I am trying to add a Pin it button on a blog page. AddThis widgets are being used for this.
But when I try to use the PIN functionality then it is not choosing all the images on my page.
The image tags are as below
-- Getting Pinned
<img src="images/blog/123_3710961211.jpg" class="blog-main-img">
-- not Getting Pinned
<img src="data:image/png;base64,v2nv1jcqS/VEhanlIJN8hnyDHoT4Z8FfAhX/g8EI9yHfLfPFQAAAA
BJRU5ErkJggg==" data-filename="Victor Vasarely positive negative space pic.png"
style="width: 521px;">
Let me know what is the error? Is it that Pin does not include Data images?
I have tried using another widget also but same result there.
I read somewhere that img size should be at least 100×200 but all my pics are greater than that.
pinterest does not support pinning from base64 images, you should be able to set a meta tag to an actual image not displayed on the page however
<meta property="og:image" content="http://example.com/pic.jpg" />
Related
I have image with phone number on it:
I want to let other people find the page where this image is, by searching "1-700-700-690" on Google. Just as if the HTML tag would be:
<div> 1-700-700-690 </div>
I tried:
<img alt="1-700-700-690" src="http://hashef.co.il/wp-content/uploads/2013/12/Moked-Telephoni2.png" width="295" height="62" />
But it doesn't work (tried find the page on Google).
Is there anyway to do this?
One of these two workarounds might work for you:
1) Place <p>1-700-700-690</p> directly before or after your image and set font-size to 1px and change the font color to the background color.
2) Use <meta> tags in your head that include the phone number. This should help with the indexing of your page. Documentation can be found directly on Google, e.g. see this link here.
I have a product page that uses Microdata. At the moment the itemprop="image" attribute is specified on the first thumbnail from my thumbnail gallery. What I'd like to do is specify it for the high-res image I have.
The trouble is, that's not actually displayed on the page, it's loaded via JavaScript using a lighbox. I know I can do something like:
<img itemprop="image" src="/img/high-res.jp" style="display:none" />
and the image won't show and it's tagged as the product image. But, of course the image is still download.
Any way I can specify itemprop="image" on an image but not actually download the image?
I tried changing <img> to <span> but the testing tool didn't recognise it.
Perhaps the link element would be useful here - it's not displayed in the rendered HTML, but it is available in the HTML source and therefore available to JavaScript:
<link itemprop="image" href="/img/high-res.jpg">
In the _Layout.cshtml, I have a heading image and two link images that change into other images when the cursor hovers over them. When the page is loaded initially (e.g. //localhost:58055/), the images are shown. When I redirect through the links so that the URL is //localhost:58055/Home/Index, for instance, the images only show the little "broken image" icon. Why might this be? Here is where I specify the header's image in _Layout.cshtml.
<header>
<div class="trippy-title">
<img src="images/title_wider.jpg" width="100%" height="100%" repeat>
</div>
</header>
I recommend you read this article for a better understanding of locations in ASP.net.
http://www.west-wind.com/weblog/posts/2009/Dec/21/Making-Sense-of-ASPNET-Paths
as a simple solution you can use ~/images/title_wider.jpg this works with Razor 2+
I am trying to use Addthis widget for my website.Right now I am using the following code to share image to different website.
<script>var addthis_config = {
services_overlay:'facebook,twitter,email,more'
}</script>
<div class='giveTopMargin'>
<a href='link' class='lightbox' title='title'>
<img class='addthis_shareable' src='img_url' addthis:url='img_url' addthis:title='message' />
</a>
</div>
What I want is that when the user clicks the share button for facebook.I need the image preview of the img_url I've mentioned and when this link is successfully shared on facebook I need whoever clicks on this post on facebook, he should be redirected to the main page of my website instead redirecting him to the img_url.
Right now the problem with this code is that it shows me the following share box.
As you can see it is showing me the img_url in the title and description instead of the things I've mentioned above that is the title message.If I change the img_url to the main page of my site then this will not show me the preview of the image I've shared.
I hope I am clear enough. Please let me know for any clearification.
Code Source : http://www.addthis.com/labs/photo-sharing#.USyj-jAyZjY
I was not able to solve the problem so I sent an email to the Addthis support and they said that facebook tries to catch the image preview from the url we mention.So I was not able to accomplish this using the Addthis Plugin.
So I end Up doing it myself by using the facebook.ui dialog to share with the settings I wanted.
I think all you need to do is change the value for addthis:url, so for example, if the site you want them to go to is http://www.supportmyidea.com, then your img tag should look like:
<div class='giveTopMargin'>
<a href='link' class='lightbox' title='title'>
<img class='addthis_shareable'
src='[your_image_url]'
addthis:url='http://www.supportmyidea.com'
addthis:title='Support My Idea' />
</a>
</div>
The image preview that Facebook shows is actually based on the URL you specify. Facebook scrapes that page and will show an image from the page - if you specify an og:image tag, Facebook will use that image. I hope this makes sense.
You don't have to use their format. Make your own image and url using an img tag and an a tag. All the URL has to be is this :
http://www.addthis.com/bookmark.php?url={url}
even though i use this meta <link rel="image_src" href="myimage"/> in my page, facebook sharer selects an image that i am using for ajax loading (load.gif)
how can i exclude that image ?
Instead of including it in the HTML, try adding that load.gif to the page dynamically using Javascript when you need to display it. This way Facebook will not see this image in the HTML.
Using Leventix suggestion, only on the home page I had to use javascipt to load images to prevent facebook from loading other images for "sharing" images found on the home page. Here's what I did.
In the head, I explicitately stated the image that is to be used when Facebook share link images apear using:
<link rel="image_src" href="/images/site.gif" />
And then all references to images on the home page I loaded like this:
<img alt="" onLoad="imgSrc(this, '<?php print base_path().path_to_theme() ?>/images/gall1.jpg');" src="/images/spacer.png" />
<script>function imgSrc(img, src) {if (img.src.search("spacer.png") > 0){img.src = src;}};</script>