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 :)
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.
We use the Facebook Share option on a website with newsarticles. The website is build with PHP and uses Smarty. We generate a unique URL (stripped like /news/headline-of-the-article) and have the meta properties defined.
When the owner shares a links with an image that was previously uploaded, everything is fine. When he uploads a news image, inserts it into the article and shares, Facebook takes another pictures, the pictures that it finds first on the source-code. Altho, in the preview-box just before you publish, it shows the correct image. Once placed, it's the wrong one.
The Facebook Debug Tool shows as og:image tag > og:image domain/UserFiles/images/news/standard_14.jpg
But when I look at the RAW tags og:image shows > domain/UserFiles/images/news/bosuil_1.jpg
So the og:image tag does it job and generates the correct URL, but facebook still posts the wrong image. When I force Facebook (manually) to scrape again, it shows everything good and also shares it correct.
I don't get it...
I had the same problem and found these best practices on facebook's developer wiki: https://developers.facebook.com/docs/sharing/best-practices#precaching
Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image dimensions to the crawler so that it can
render the image immediately without having to asynchronously download
and process it.
After specifying the width and height we have not had a problem with facebook crawling the right picture immediately.
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.
If you view the source code of an example page, and the Facebook debugger for that page, you will see that Facebook scrapes the correct image and displays it in the Facebook debugger. There are no weird redirects or filenames going on here, just a simple image set to og:image, but Facebook doesn't show it!
If you copy/paste the url directly on Facebook (for example, in a status update), the og:image shows up immediately.
However, when liking or commenting from the site, NO image shows up at all!
Any help would be appreciated.
Thank you.
//create an object
FBGraphObject object;
//open graph object will be posted to facebook
object.provisionedForPost = YES;
Putting your page into Facebook debugger produces this warning:
The image referenced by the url of og:image tag could not be downloaded.
It is also for some reason chopping the ends off the og tags in your page, deleting the 'IMG_0325.jpg' text. I can only imagine this is because it doesn't like the capitalisation!
Our site has been suffering owing to a recent change in FB's acceptance of urls for images which it will show in posts, I think we have a slightly different problem to yours but they seem to have become more restrictive about the url being a very vanilla image url.
I have a Facebook Application with an iframe based canvas that contains a like button (also iframe), in the head of my iframe i've specified the standard meta tags (og:title, og:url, og:site_name) and they seem to work fine (the information is displayed correctly in the profile wall) except for the title.
I've tested various links of the app with the Facebook URL Linter and the ug:title tag is ignored completly.
Have any of you had any trouble with the open graph tags inside facebook applications?
Any ideeas are apreciated, thanks.
I've tried every possible combination and suggestion in adding og meta tags to my page, but none of them worked. When testing URL with facebook URL Linter it always returned default values defined on application admin page. Like it doesn't see og meta tags. And what was more interesting is that when I look the page source, og meta tags existed but haven't been evaluated by facebook or linter.
Now, in my canvas page I defined login/authentication (and depending redirection etc) at the top, before html and og meta tags definition, and that was the main problem.
If you perform FB login redirection/authentication before providing og meta tags,
then FB crawlers/linter will not be able to detect your meta info and will try to auto-fill it.
I'm having the same problem in my app http://apps.facebook.com/tripline It seems that Facebook doesn't process links to pages inside apps the same way as pages they hit directly.
You can see the difference in the URL Linter:
The og:url on the canvas page: http://apps.facebook.com/tripline/trip.php?id=2015071615051003BEE6FBED6F531103 (og:title is ignored, get trip.php instead)
The url to the actual page loaded in the iframe: http://www.tripline.net/api/fbcanvas/trip.php?id=2015071615051003BEE6FBED6F531103#frame-top (og:title correct, but can't link to this because it's not in the frame)
The page on the main site: http://www.tripline.net/trip/The_Boston_Freedom_Trail-2015071615051003BEE6FBED6F531103 (og:title correct, if i can't figure things out, i'm just going to set the og:url on the canvas page to this)
Not really an answer, but at least you know you're not alone or crazy...which is worth something.