So I want users to be able to share this link on facebook but I want only a specific picture to be the thumbnail for this sharing picture and no other images that appear on my web site
I read the documentation about facebook share and I got this
http://developers.facebook.com/docs/share
Basically what I understand is that
<link rel="image_src" href="thumbnail_image" / >
should do what I want. However, I cannot get this to work. My site is programmed using rails and, inside the layout, I have the above tag to take in an image url coming from a model instance.
Does anyone know how to use this properly? Am I misunderstanding something about this tag? I want to disable user from selecting through the images that I have on my page and just allow the user to share with only 1 image which I have to specify.
To specify a specific picture you will need to add open graph meta tags to your page. Take a look at http://developers.facebook.com/docs/opengraph/.
The open graph tag for your case is: og:image
Related
Does anyone know how to give the user the option to choose between multiple images when sharing a page on Facebook?
I've used an url like the one below in the past. The images param would be
p[images][0]=...&p[images][1]=...
etc. However, it seems that this doesn't work anymore. The user sees the arrows to select the next or previous image with but there is only one image to choose from.
Web page
http://occasions.dvangorkum.nl/Land-Rover/Range-Rover-Sport-2.7-/TdV6-HSE-Navigatie-PDC-Climate-Xenon-Luchtvering--1606304/1603/1/11/details.aspx?zoek=&so=gallerij
URL:
https://www.facebook.com/sharer/sharer.php?s=100&p[url]=http%3A%2F%2Foccasions.dvangorkum.nl%2FLand-Rover%2FRange-Rover-Sport-2.7-%2FTdV6-HSE-Navigatie-PDC-Climate-Xenon-Luchtvering--1606304%2F1603%2F1%2F11%2Fdetails.aspx%3Fzoek%3D&p[images][0]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_1.jpg&p[images][1]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_2.jpg&p[images][2]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_3.jpg&p[images][3]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_4.jpg&p[images][4]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_5.jpg&p[images][5]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_6.jpg&p[images][6]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_7.jpg&p[images][7]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_8.jpg&p[images][8]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_9.jpg&p[images][9]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_10.jpg&p[images][10]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_11.jpg&p[images][11]=http%3A%2F%2Fimages.autodealers.nl%2F640%2F1606304_12.jpg&p[title]=++++Land-Rover%C2%A0Range+Rover+Sport+2.7+%C2%A0TdV6+HSE+Navigatie+PDC+Climate+Xenon+Luchtvering+&p[summary]=Occasion+te+koop+aangeboden+Land-Rover+Range+Rover+Sport+2.7++TdV6+HSE+Navigatie+PDC+Climate+Xenon+Luchtvering++uit+2007%2C+187618+km%2C+Diesel%2C+SUV%2C+Automaat%2C+Grijs&so=gallerij
However, it seems that this doesn't work anymore.
Yes, the Share dialog does not accept these parameters any more after a recent change, but will now get all its info about the shared link from the Open Graph meta information embedded in the shared document.
So if you want multiple images the user can chose from, you have to put multiple og:image meta tags into your document. (Be aware that Facebook seems to offer no more than three images to chose from any more, so putting more images in there is pointless.)
For documentation on Open Graph meta information, see https://developers.facebook.com/docs/opengraph/using-objects/#creating and http://ogp.me/
One of the problems I face while sharing a link of my blogger post on facebook or linkedin is that the thumbnail shared is my picture (which is the only picture on the page). I would prefer no thumbnail being shared.I tried using
<meta property="og:image" content=""
I.e the content is kept as blank, yet it shows a thumbnail. How do i set it to no picture?
You can't. Facebook/Linkedin will crawl your site and decide on it's own what images to offer the user. The og:image meta tag is just a suggestion and not a directive.
The only way to share without image is for the user to remove it.
Update: there is another way. You could detect (on the server) FB/LinkedIns crawler and serve them HTML that does not contain any images. That way they wouldn't have anything to display (just text). I don't know if that's possible on blogger. And if you go down this path, check FB/LinkedIn's TOS if this is allowed (doing this with google, for instance, will get you banned).
I am working on a wp blog site. Currently not using og tags at all.
I use the social sharing toolkit plugin to allow visitors to share articles on Facebook.
The problem:
When FB share box pops up, all of the images on the page are shown as thumbnail options to be published along with the article information. In some cases over 20 sometimes.
How can i specify only 1 image to be shown in the available thumbnail options?
I'd like to do this so that visitors don't, for example, select a meaningless image (such as page ad images or layout components)?
I tried using rel="image_src" as suggested but it made no difference.
Thanks.
This is working for me: I found out that even with OG meta tags Facebook Share plugin may present various thumbnails from my page, including all sorts of unwanted images. To work around it I add the wanted image with small size, first thing after the tag:
<img src="image_wanted_as_thumbnail.whatever" style="width:1px;height:1px;">
But I always use the OG meta tags as well.
I have a like button that works and that takes the image I have specified through the following parameter and attaches to a user liking the post on there feed.
<meta property="og:image" content="http://www.mysite.org/images/logo_50x50.gif" />
I basically want to use this image only for my users when they like an article, but when posting from a specific article "on my facebook site"..I want to be able to still select the images pulled up from that link. That doesn't happen. All I get right now is what I specified in my og:image parameter.
How would I achieve this?
You can't, you just told Facebook which image to use - it's supported to have multiple og:image tags but i'm not sure if which image to display is deterministic, random, or uses a picker like the system used when you don't specify an image
So, I've searched and searched this site before posting this question -- I know there is a lot of facebook like questions -- but I can't find an answer to mine.
I have a page VERY similar to Mashable.com. They have multiple teaser articles with LIKE buttons next to each. When you click the LIKE button, you see the article thumbnail, and the article description.
I already have this set-up and it works EXCEPT for the thumbnail and description. They are wrong or not showing up at all. How can I make sure these LIKE buttons are pulling the correct thumbnails and descriptions for each of my articles.
(They are not using Open Graph I don't think, because Mashable.com has no facebook meta tags (and even if they did, the meta tags only specify one thumbnail image, and one title, and one link).
Can anyone tell me how to customise the thumbnails and descriptions for each individual news story?
Thank you!
The href in each like button needs to point to the full URL of that article, which needs to have a full set of open graph meta tags.
Run the (article) page through the debugger at http://developers.facebook.com/tools/debug to make sure the correct tags are present and being detected by Facebook's crawler.
The crawler will fall back to using tags and other non-Open Graph meta tags if there aren't a full set present, but the behaviour in that case isn't easy to debug, especially in relation to the images.
Mashable's like buttons are pointing at page which do have open graph meta tags by the way, e.g. https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmashable.com%2F2011%2F10%2F28%2Fsteve-jobs-tributes%2F