I am setting up a blog and it contains a Facebook "Like" button. With this button you can like a post.
But when I like a post, a popup shows up with a randomly picked image on my website. I've looked into the meta tags for Facebook and I filled all six of them with content, but clicking the Like button still causes that same random image shows up. How can I control this image when I click the Like button?
Include the following meta tag in your site:
<meta property="og:image" content="path-to/mylogo.png" />
More info about open graph images can be found here. After changing the image, Facebook needs time to update this information due to caching.
Edit: you can view and reset Facebooks cache with the developer tool debug page
That is because when you change facebook's og (open graph) tags, you cannot see the change immediately, but only when their scraper refreshes the page. Try putting the url through their debugger. If the image here is the one you set up as shared image, then you just have to wait for facebook cache to refresh :)
Here is one more alternative approach:
http://www.clickonf5.org/5536/how-insert-custom-image-thumbnail-facebook-link-sharing/
Related
I have a Facebook Like/Share button on a webpage. When you click the Share button, a window pops up allowing you to share a message about the site. There's a photo in the popup as well, which is derived from the webpage the button is on.
The problem is, that webpage shows a composite photo, an image on top of another image, and instead of showing the whole composite, the popup shows one piece of it.
Is there a way to use a different image entirely on the Facebook popup window, some specific image that's not present on the webpage? I had thought the og:image meta tag would do the trick, but it doesn't seem to work.
Thanks.
Mark
Got it. My problem is that the info I need from the Facebook Developer pages is either incomplete or not presented in a way I can understand. So for the benefit of others in my boat:
It's not enough to add the Like/Share button javascript code and div tag (where you want the button to appear). You also need to add a group of meta tags in the <head> section of your html page. (Note that in the Facebook Developers "Like Tag" page, the phrase "meta tag" does not appear.) The meta tag format is this: <meta property="og:type" content="website">
There is apparently a lag between your adding these meta tags and Facebook finding them. Some have said this is because of the way Facebook caches its content. In any case, you can bypass this lag by using the Facebook Debugger https://developers.facebook.com/tools/debug/ You enter the URL of the page with the buttons, and it tells you what's missing from your code--and at the same time it now recognizes any new additions, like new meta tags.
It turned out I needed meta tags for og:url, og:title, og:image, og:site_name, og:type, and og:description. I also discovered that the og:image tag needs an absolute url.
I found out about a lot of this not from Facebook but from here: http://davidwalsh.name/facebook-meta-tags
The Debugger is now telling me I still need fb:admins and fb:app_id tags. To get those I apparently have to create a Facebook App, which I'd rather not do. I hope it's not necessary.
Now that I've added these meta tags and run my page through the Debugger, I'm now getting the image I want showing in the Share window.
I'm using the Facebook share dialog to share a specific url. The shared link contains an image which should be part of the sharing later on. The strange thing about this is that it works totally fine on mobile browsers. But desktop browser do not load the image at the first attempt. A simple reload of the sharing window fixes the missing image. Once this image shows up for at least one time it continues working in other browsers without additional reloads..
So my question is: Does anybody knows why the first call of this url does not show images?
Details
Link for opening the sharing dialog
Here is the output of the Facebook Debugger, which is free of errors and shows the image as well.
Facebook debugger output
Update
Seems to work with the Feed Dialog without any issues. But this is another way of sharing which I would like to prevent since it requires an App ID.
I have run into this issue as well and it turns out that Facebook has an undocumented "feature", likely implemented for optimization. It does not load your image during the first share.
The bug description can be found here:
https://developers.facebook.com/bugs/657696104321030
In short, the solution is one of two possibilities.
The easiest is to include og:image:width and og:image:height as part of your ogtags describing the pixel width and height of the image. Strangely, this will (by design apparently) convince Facebook to scrape the site immediately, including image.
<meta property="og:image" content="http://example.com/image.jpg"/ >
<meta property="og:image:width" content="450"/>
<meta property="og:image:height" content="298"/>
The second potential solution is to trigger a scrape manually via API. I have not tested this, but theoretically it is possible. See the relevant Stackoverflow discussion on this topic.
Facebook displays a cached image. It does so the first time the share is submitted or when Facebook crawler finds og:image tag on your page.
According to Facebook docs at https://developers.facebook.com/docs/sharing/best-practices#pre-cache-images
"Some of our Social Plugins render an image when someone is interacting with them. The image is based on the og:image on the page, or other images on the page if the og:image isn't set. Before the social plugin can render an image Facebook's crawler has to see the image at least once. For sites where pages change frequently (e.g. ecommerce) the first person who clicks on these plugins won't see a rendered image."
I found another way to force the facebook crawler to check the page before you click the share button: just include an hidden iFrame with the sharer facebook link.
Example:
<iframe src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com" style="width: 0px; height: 0px; margin: 0px; padding: 0px;"></iframe>
I finally I think I found the issue. The images I want to share are delivered by a PHP script instead of a plain file. It seems to be related to the way PHP delivers the images:
Bad:
echo readfile($image_thumb_file);
Good:
$fp = fopen($image_thumb_file, "rb");
fpassthru($fp);
After doing this change my images finally appear in the Facebook debugger.
You also can check og:image:width and og:image:height properties.
This works for me.
I've put "Like" button to my web site.
In general it works fine, the only problem is when user add some text and publish it in the profile his post contains image. And the image chosen is not something meaningful, it is one of the menu items that doesn't really makes any sense.
Could you please advise how to tip to the facebook the better image? I didn't see any information about that in their documentation (http://developers.facebook.com/docs/reference/plugins/like/), probably I've overlooked that?
Thank you.
P.S. Pretty similar question: is there any way to suggest for user text he wants to share (that will appear once user click "Like" button)?
You can specify image by adding Open Graph tags to head section each page containing the "Like" button.
You can specify an image URL in og:image tag, and Facebook will use this image in the user's profile entry.
The same goes with
og:title - this will be the title of the new entry on user's profile.
og:site_name (will be displayed as grey text under title) etc.
See http://developers.facebook.com/docs/reference/plugins/like/ and
http://developers.facebook.com/docs/opengraphprotocol/
for detailed description.
You can use the Open Graph tags for both versions of the "like" button - iframe and XFBML.
Once you add the tags to your pages you can use http://developers.facebook.com/tools/debug to check if they are OK.
I have added a Facebook Like-Button to my website, which works perfectly. It shows the perfect link to my website on the wall of the persons who click it.
There's only one problem and I can't seem to solve it in any way.
The link also includes a preview of my website, but instead of a complete preview or a preview of my header it shows a picture of one of the link-buttons of my website!
The script itself doesn't contain anything to change or set a preview picture and changing names of pictures, links and header doesn't solve it either. No matter what I do, it still keeps on showing the button...
What can I do bout it?
I've contacted my serverhost but they don't know it either?
You can set the image that shows on Facebook with the following og tag in the head of your page:
<meta property="og:image" content="http://example.com/image.jpg" />
Facebook requires some more open graph tags. (Formerly known as meta tags.)
You have to make sure the facebook linter correctly interprets your page. Use the Facebook debugger to check and fix all issues.
try to refresh facebook catch by submitting link here . If you still have problem , you can provide custom images by with open facebook graph . Refer
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