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
Related
I've successfully added a Share button to my website using the following code:
https://developers.facebook.com/docs/plugins/share-button
It produces a popup with a link to the og:url along with the title of the linked page and a picture from it, which I can then post, and it shows up on my Facebook.
I am having 3 issues with this:
I've update the og:url and data-href after page load, using jquery, but the new values get ignored when I Share.
the og:title, og:description, and og:image don't appear to be used at all.
Sometimes I'd like to Share some custom text (and images if possible) without any url.
I'm aware that Facebook provide other tools/APIs that provide more versatility but it seems that would mean my site would have to go through a review process, and I'd have to code for security. This is not an option and I want to stick to the popup method.
Hope someone can help. Many thanks.
If the tags do not change when posting, refresh (and test) the tags in the debugger: https://developers.facebook.com/tools/debug/sharing/
Dynamically created Open Graph tags (with JavaScript) will be ignored, the tags have to be in the original page source.
I've got some image on our site where I included the Open Graph tag og:image.
For example the main company logo has such a tag as it should always be selectable and then there are some article pages or news and the lead image of those pages also has also the og:image tag.
When I test it using the sharer button on our page or browserbar-button (or any other way) the share dialog does only show me the image of the article page and not the company logo for selection.
You can test it here:
http://www.up-great.ch/unsere-firma/wegbeschreibung
Funny thing is, that if I use the Facebook Debugger Tool the images (2 images) are all there:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.up-great.ch%2Funsere-firma%2Fwegbeschreibung
Why is there a difference between the debug tool and the share dialog? (Btw, I know that I don't use og:url tag but I once added it to the page and there was no difference even after resetting the Cache with the FB debugger).
FB sharer bug oder am I doing something wrong?
One year later still no answer.
I just tried the same and it doesn't work neither in your nor in my testcase: http://mattweb.de/open-graph-multiple-images/
To me it seems Facebook changed this to one image only, but it's not documented anywhere.
I remember once it worked (even without Open Graph tags) but couldn't tell when that was. Now I know that it must have been more than a year. So thanks for your question.
Regards,
Matt
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/
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 use the meta tags in the exact way the instructions say. So when I click on the like button, I indeed have the correct information on my facebook page.
Yet, when I slightly change the meta tags' code (for example if I put another image or if I change the description) the changes do not take effect on the facebook like button, which continues to show the previous information.
This is very disturbing, because by mistake I put same link in the meta property="og:url" for two different pages, so when someone likes one of them, the other ones like button is also "pushed". And although I've corrected the code, the problem with the like button, as I said before, remains.
You should be able to edit your Open Graph tags at any time. The only exception is title is fixed after 50 likes and type after 10k
http://developers.facebook.com/docs/opengraph/#edit
Facebook has to scrape your pages to see the changes to the Open Graph tags. You can force this by using the debugger/linter.
http://developers.facebook.com/tools/debug