When using Facebook Sharer, Facebook will offer the user the option of using 1 of a few images pulled from the source as a preview for their link. How are these images selected, and how can I ensure that any particular image on my page is always included in this list?
How do I tell Facebook which image to use when my page gets shared?
Facebook has a set of open-graph meta tags that it looks at to decide which image to show.
The keys one for the Facebook image are:
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
and it should be present inside the <head></head> tag at the top of your page.
If these tags are not present, it will look for their older method of specifying an image: <link rel="image_src" href="/myimage.jpg"/>. If neither are present, Facebook will look at the content of your page and choose images from your page that meet its share image criteria: Image must be at least 200px by 200px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format.
Can I specify multiple images to allow the user to select an image?
Yes, you just need to add multiple image meta tags in the order you want them to appear in. The user will then be presented with an image selector dialog:
I specified the appropriate image meta tags. Why isn't Facebook accepting the changes?
Once a url has been shared, Facebook's crawler, which has a user agent of facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), will access your page and cache the meta information. To force Facebook servers to clear the cache, use the Facebook Url Debugger / Linter Tool that they launched in June 2010 to refresh the cache and troubleshoot any meta tag issues on your page.
Also, the images on the page must be publicly accessible to the Facebook crawler. You should specify absolute url's like http://example.com/yourimage.jpg instead of just /yourimage.jpg.
Can I update these meta tags with client side code like Javascript or jQuery?
No. Much like search engine crawlers, the Facebook scraper does not execute scripts so whatever meta tags are present when the page is downloaded are the meta tags that are used for image selection.
Adding these tags causes my page to no longer validate. How can I fix this?
You can add the necessary Facebook namespaces to your tag and your page should then pass validation:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
When you share for Facebook, you have to add in your html into the head section next meta tags:
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
And that's it!
Add the button as you should according to what FB tells you.
All the info you need is in www.facebook.com/share/
As of 2013, if you're using facebook.com/sharer.php (PHP) you can simply make any button/link like:
<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
Link query parameters:
p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook
It's plain simple: you do not need any js or other settings. Is just an HTML raw link.
Style the A tag in any way you want to.
From my experience, the http://www.facebook.com/sharer.php does not use meta tags. It uses the string you pass. See below.
http://www.facebook.com/sharer.php?s=100&p[title]=THIS IS MY TITLE&p[summary]=THIS IS MY SUMMARY&p[url]=http://www.MYURL.com&&p[images][0]=http://www.MYURL.com/img/IMAGEADDRESS
The meta tags work with Facebook's developer like/send buttons, as does the other Open Graph info. So if you use one of Facebook's actual elements like the comments and such, that will all tie into the Open Graph stuff.
UPDATE: There are two ways to use the sharer * note the ?s versus the ?u value in the query string
1 ==> STRING: http://www.facebook.com/sharer.php?s + content from above
~~> Will pull info from the string.
2 ==> URL: http://www.facebook.com/sharer.php?u=url where url equals an actual url
~~> Will scrape the page provided in the url value
~~> You can test test the values here: https://developers.facebook.com/tools/debug
Put the following tag in the head:
<link rel="image_src" href="/path/to/your/image"/>
From http://www.facebook.com/share_partners.php
As far as what it chooses as the default in the absence of this tag, I'm not sure.
Old way, no longer works:
<link rel="image_src" href="http://yoururl/yourimage"/>
Reported new way, also does not work:
<meta property="og:image" content="http://yoururl/yourimage"/>
It randomly worked off and on during the first day I implemented it, hasn't worked at all since.
The Facebook linter page, a utility that inspects your page, reports that everything is correct and does display the thumbnail I selected... just that the share.php page itself doesn't seem to be functioning. Has to be a bug over at Facebook, one they apparently don't care to fix as every bug report regarding this issue I've seen in their system all say resolved or fixed.
To change Title, Description and Image, we need to add some meta tags under head tag.
STEP 1 :
Add meta tags under head tag
<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
NEXT STEP :
Click on below link
https://developers.facebook.com/tools/debug
Add your URL in text box (e.g http://www.test.com/) where you mentioned the tags.
Click on DEBUG button.
Its done.
You can verify here https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/
In above url, u = your website link
ENJOY !!!!
For secure HTTPS
<meta property="og:image:secure_url" content="https://image.path.png" />
Use facebook feed dialog instead of share dialog to show custom Images
Example:
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
I had this problem and fixed it with manuel-84's suggestion. Using a 400x400px image worked great, while my smaller image never showed up in the sharer.
Note that Facebook recommends a minimum 200px square image as the og:image tag: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
This is what worked for me: I placed the desired thumbnail image on the page right after the tag and making it too small to see..
<img src="imagename.jpg" width="1" height="1" />
I have not tested it with height 0 and width 0 but it probably will still work.. This does not guarantee the user will select this image..
ALSO it seems like Facebook caches the thumbnails on your page and doesnt always check it for new ones.. try adding this to another page on your site and you'll see that it works.
I couldn't get Facebook to pick the right image from a specific post, so I did what's outlined on this page:
https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts
In other words, something like this:
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
Basically, you're going to hard code an if statement into your site's HTML to get it to change the meta content for whatever you've changed for that one post. It's a messy solution, but it works.
Here's what I tried for Facebook Debugger tool:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fdevstmaws.linesofphp.com%2Fvideo%2Findex%2F52f0fd544eab99ae28000106
Scrape Information:
Response Code 401
Fetched URL http://devstmaws.linesofphp.com/video/index/52f0fd544eab99ae28000106
Canonical URL http://devstmaws.linesofphp.com/video/index/52f0fd544eab99ae28000106
Warning
Critical Errors That Must Be Fixed
Bad Response Code URL returned a bad HTTP response code.
Warning
Errors That Must Be Fixed
Missing Required Property The 'og:type' property is required, but not present.
Notice
Open Graph Warnings That Should Be Fixed
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
URLs
Graph API https://graph.facebook.com/1419346681640654
Scraped URL See exactly what our scraper sees for your URL
The URL that I would like to share is: http://devstmaws.linesofphp.com/video/index/52f0fd544eab99ae28000106
What could be the reason? It's not scraping my site anymore.
Scraper response: Document returned no data
Meta tags:
<meta property="og:image" content="http://devstmaws.linesofphp.com/static/img/logo_facebook.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:title" content="Check out my awesome video!" />
<meta property="og:site_name" content="Check out my awesome video!" />
<meta property="og:description" content="SearchTheMusic gives you the ability to legally add music to your videos and share them with the world!" />
<meta property="og:url" content="http://devstmaws.linesofphp.com/video/index/52f0fd544eab99ae28000106" />
Facebook has to be able to access the URL for the Open Graph tags to work, and your URL is protected by a password. Only public URLs are possible. You get the same error as if you cancel the authorization popup.
I give you other way also. Here I remove javascript SDK.Other are all same
Taken intermediate step.
So I take this steps:
I have created folder , outside of project folder(password protected).i.e. outerface.And create a file,say projectfront.php
First:
defined a outside url
Here, I have used aforesaid file path. So now Facebook can't abuse me.
<?php
$faceproject_url='[your servar path]/outerface/projectfront.php';
?>
<div class="fb-share-button" data-href="<?php echo $faceproject_url; ?>" data-type="button_count"></div>
Second:
In outerface/projectfront.php-
I have written(with proper doctype) as:
......
........
<script>
function xyz()
{
url=[Give your target link];// it will your project page, which you want to share.
window.location=url;
}
</script>
</head>
<body onload="xyz()">
<?php
ob_start();
?>
Please wait....
</body>
</html>
[please do proper html]
So now if any user click on your share button, share'll be successfully done and Facebook will not obstacle us. Also If you click on link on Facebook(in wall) after share, you will redirect successfully to your link defined in projectfront.php.
Thanks
Atanu Mitra
You usually receive this error when the fetched URL to the page and the OG:URL do not match.
Using javascript SDK for Facebook
I have overcome with intermediate step.
My project url is also password protected.
So I take this steps:
I have created folder , outside of project folder(password protected).i.e. outerface.And create a file,say projectfront.php
Call a function using Facebook sdk and use FB.ui({ with method:feed. And I have taken a tricks. In link, I have used aforesaid file path. So now Facebook can't abuse me.
<div>share</div>
<script>
function sharesend()
{
FB.ui({
method: 'feed',
link: '[your servar path]/outerface/projectfront.php',
picture: [give picture, if you can],
caption: [give any caption],
description: [give any description],
.....................,
..............
},
function(response){}
);
}
</script>
In outerface/projectfront.php- I have written(with proper doctype) as:
......
........
<script>
function xyz()
{
url=[Give your target link];// it will your project page, which you want to share.
window.location=url;
}
</script>
</head>
<body onload="xyz()">
<?php
ob_start();
?>
Please wait....
</body>
</html>
[please do proper html]
So now if any user click on your share button, share'll be successfully done and Facebook will not obstacle us. Also If you click on link on Facebook(in wall) after share, you will redirect successfully to your link defined in projectfront.php.
Thanks
Atanu Mitra
I'm trying to define a Facebook Open Graph Object for the URL http://www.storeyourboard.com. Therefore, I include a Facebook meta tag for this URL in my code:
<meta property="og:url" content="http://www.storeyourboard.com" />
I would like to specify the image used for this object. Therefore, I include a Facebook meta tag for this image in my code:
<meta property="og:image" content="http://spirecollective.com/temp/gopro/img/gopro_promo.jpg" />
The URL on which I am trying to create this object is located here: http://spirecollective.com/temp/gopro/
I used the Facebook debug tool to see if the object is created successfully. You can repeat this by visiting the Open Graph Object Debugger and debugging the url mentioned above.
As you will see, the Facebook scraper seems to be ignoring all of the meta tags on my page, and instead being redirected to the og:url location. It's then reading the meta tags from that page instead of the ones specified on my website.
Here are all of the meta tags on my site for reference:
<meta property="og:title" content="I just registered to win a GoPro Hero 3 Camera!" />
<meta property="og:site_name" content="StoreYourBoard.com" />
<meta property="og:description" content="StoreYourBoard.com features board racks and accessories for however you shred. Reshare this post to be entered to win a GoPro Hero 3 camera!" />
<meta property="og:url" content="http://www.storeyourboard.com" />
<meta property="og:image" content="http://spirecollective.com/temp/gopro/img/gopro_promo.jpg" />
Is this the intended behavior? Why is Facebook ignoring all of my meta tags? The open graph object documentation does not mention anything that would make me think this is expected behavior. Am I missing something here? Thank you very much for the help!
Your og:url should be
http://spirecollective.com/temp/gopro/
and not
"http://www.storeyourboard.com"
From http://ogp.me/#metadata:
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
I understand this is the main facebook developer community; I wanted to as a question and see if anyone can help?
I built a wordpress photo portfolio blog - http://shutterliving.com/movember-moustache/
I have the official facebook plugin installed and I have its own LIKE button running at the top and bottom of the page.
I also have the ‘TFG social share’ plugin installed:
wordpress.org/support/plugin/twitter-facebook-google-plusone-share
I am now wondering if I have managed to set it up correctly as I am encountering some unexpected behavior.
When I preview an unpublished post, the LIKE counter (for the official plugin) is at 0, however the ‘TFG social share’ plugin shows a 12 count? Why is there a discrepancy? How can the post get a like count if it has yet to be published? When I create a new post and save it as a draft, then preview it, both LIKE counts are at 0.
When I go to the debugger tool and input my URL I get errors that I don’t really understand, but a bit of googling told me they were not serious errors. Not sure though on how to fix them? Any idea?
Also when I click on my URL link in the Fetched URL and the Canonical URL, it takes me to a ‘Page not found’ page? Is this normal? Should it not take me through to my homepage?
Response Code 200
Fetched URL shutterliving.com
Canonical URL shutterliving.com
Open Graph Warnings That Should Be Fixed
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Meta Tag <meta property="og:locale" content="en_US" />
Meta Tag <meta property="og:site_name" content="shutterLIVING" />
Meta Tag <meta property="og:type" content="website" />
Meta Tag <meta property="og:title" content="shutterLIVING" />
Meta Tag <meta property="og:description" content="Jamie A Cowan's PhotoBlog and Portfolio" />
Meta Tag <meta property="fb:app_id" content="178646462271083" />
I also associated the INSIGHTS analytics to my web page, however the information it shows is not accurate, ie it says I have only 55 LIKES on my page, however I have much more Likes that that
http://shutterliving.com/movember-moustache/
This leads me to believe I have set something up incorrectly.
Can anyone help with any issue
Jamie.
I have the following HTML in my HTML head:
<meta content="***" property="fb:admins">
<meta content="***" property="fb:app_id">
<meta content="Site.com" property="og:site_name">
<meta content="http://site.com/thumbnail.png" property="og:image">
<meta content="activity" property="og:type">
<meta content="Test Title" property="og:title">
<meta content="http://site.com/page/?Id=56&Source=" property="og:url">
<meta content="Test Activity Description" property="og:description">
But rather than the details I have specified showing up in my facebook feed, instead I get a link to site.com/page (without the URL variables after it), the title seems to be coming from the <title> rather than the <meta content="Test Title" property="og:title"> and the description is coming from the first <p> on site.com/page (which isn't there when you include the URL variables)
any idea what I am doing wrong?
EDIT
Running the page through linter has thrown up some interesting issues.
http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Fwaggleb.com%2F12454874521145474-2%2F
The problem seems to stem from the fact that the image, the URL, the title and description are generated using javascript. When facebook calls back does it not allow the JS to run before fetching the results?
I need to change the data with javascript unless there is a way to pass the whole page through PHP, pick out the data I need and then place the correct URL, title, description and image into the meta tags. I do not have direct access to the database, so I must retrieve this data from the DOM
Maybe it was cached by facebook before you put in these tags.
Try to clean them in Linter: http://developers.facebook.com/tools/lint/