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.
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 have inserted the OG meta tags in my pages and also have provided a simple link to help users share the contents on the Facebook using the
https://www.facebook.com/sharer/sharer.php?u=[the-urlencoded-link-to-my-page]
link. But I have two problems:
When attempting to share the content for the first time, the
Facebook sharer page only displays a preview box which only contains
the name of the site, and makes me use the Facebook's Object
Debugger to
fetch the meta tags. How can I automate this process?
And secondly, while the Object Debugger report says that it has
found the og:url, og:type, og:title, og:locale,
og:image:width, og:image:height, og:image and the
og:description raw tags on the page, but the image doesn't get
displayed in neither the preview box of the page nor on the shared
status. What I have missed? What's wrong?
To make things clear, sharing on google+ works perfectly (the image gets displayed, the title and the descriptions are in place.)
Thanks in advance :)
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/
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
I'm implementing a facebook like button on a simple blog/news section I created in an MVC 3 web application.
I used the XFBML way to implement this.
It works, but not completely.
When clicking and checking it on facebook, it shows the title I specified.
Here is a piece of code.
The viewbag information comes from my view, this is in the layout/master page.
<meta property="og:title" content="#ViewBag.FGTitle" />
But since it's a news item, I also want the content of the article to be displayed.
It only shows, the title, the site name and that's it.
I checked the facebook developer page, but I cant find a meta property/Open graph type in which i can set this content.
any ideas?
see the facebook url linter it shows you exactly what facebook sees when greping the url. Also you should read up on the other meta tags