I am using FB.ui() to share a page and on mobile the og image is cropped to a square, instead of being desiplayed entirely.
The natural size of my og image 1200x622. How can I specify its dimensions using FB.ui method?
Here is the code I am using:
FB.ui({
method: 'share',
action_type: 'og.shares',
href: 'http://example.com/',
title: 'My title',
picture: 'http://example.com/picture.jpg',
description: 'My description'
}, function(response){
console.log(response);
});
Thank you,
Andru
You can´t change the share image in the Share Dialog, you need to use the Feed Dialog for that: https://developers.facebook.com/docs/sharing/reference/feed-dialog/
If you want to use the Share Dialog, make sure you follow the guidelines to get the best picture after sharing: https://developers.facebook.com/docs/sharing/best-practices#images
Also, you should include the size directly in your HTML code:
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Source: http://ogp.me/
If all those things don´t work for you, you can file a bug: https://developers.facebook.com/bugs/
Related
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.
I am using facebook send method for invite friends in my website.
this is the code
function FacebookInviteFriends()
{
FB.ui({
method: 'send',
name: 'Join Stuffuneed',
picture: '<?php echo $this->getSkinUrl('images/owl_logo_250_250.jpg') ?>',
link: '<?php echo $customerLink?>',
description: "You have been invited to join Stuffuneed. Stuffuneed is the place to find the stuff you always needed but didn't know where to find",
});
}
it's showing me this dialog
problem is this
it's not showing me exact name.picture,link description.
i have also use og meta tags
<meta property="og:title" content="Join Stuffuneed" />
<meta property="og:image" content="http://www.stuffuneed.com/stuffuneed/skin/frontend/default/lockrez/images/owl_logo_25_250.jpg"/>
<meta property="og:site_name" content="Stuffuneed"/>
<meta property="og:url" content="http://www.stuffuneed.com/stuffuneed/"/>
<meta property="og:type" content="website"/>
but it's still showing me wrong content
Pls help me...
description picture are not the valid parameters in the send dialog. Reference
You'll just have to provide the link; and fb will fetch the image by itself. May be you can set the meta tag of og:image in the link you have provided.
Using graph API, I can set a custom image to be displayed when sharing link from my app. But, when a user shares a link of my website manually, a random image of my website comes in rather than my logo. So, is there a meta tag or something using which I can set a custom image as the image to be displayed in the link description box of facebook? Thanks in advance...
What you want to add are the Open Graph tags so that Facebook can parse your website more easily than its default parsing. The <meta> tags required are
<meta property="og:title" content="Page's Title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://yourwebsite/article" />
<meta property="og:image" content="http://yourwebsite/images/displayImage.jpg" />
Thank you Anvesh. I applied your suggestion, but in my case it is not working, as it should.
If I post my link page to the wall, it's ok, the image is showing. But if I post via url share/sharer.php, image is hidden, except on some web image host like imagilive.com (weird).
But, anyway, after posting the page url in the facebook debugger, all I did which failed before, is done with success.
I can handle the issue this way, but I have to do it with every page. Just imagine you have a photo gallery with each image shareable.
I need a better solution or a fix.
I am using the below array and
$feeddata = array(
'type'=>'flash',
'method'=>'stream.publish',
'display'=>'iframe',
'link'=> 'https://developers.facebook.com/docs/reference/dialogs/',
'source'=>'http://www.hackerdude.com/channels-test/swfscout_VideoSample.swf',
'picture'=> 'http://fbrell.com/f8.jpg',
'name'=> 'Facebook Dialogs',
'caption'=> 'Reference Documentation',
'description'=> 'Using Dialogs to interact with users.');
and passing it to facebook->api($userid.'/feed', 'POST', $feeddata );
But in the feed i can see only the image and when i click in the image it takes me to the link, how can i see swf in the feed (ideally on clicking on the picture it should toggle to swf)
The type should be "video" instead of "flash". Here's a parameter array that produced a playable video in my tests:
array(
'type'=>'video',
'source'=>'http://www.hackerdude.com/channels-test/swfscout_VideoSample.swf',
'picture'=> 'http://fbrell.com/f8.jpg',
'name'=> 'Facebook Dialogs',
'caption'=> 'Reference Documentation',
'description'=> 'Using Dialogs to interact with users.',
);
Note that there's no link attribute, that's because as it seems to me, the facebook API has a bug at this moment where if you provide a link then it won't embed your video.
The bug theory reinforced by that the JS SDK does indeed accept a link and produce a playable video, you could migrate to this method for publishing if its feasable, with parameters like this:
FB.ui({
method:'feed',
type: 'video',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
source: 'http://www.hackerdude.com/channels-test/swfscout_VideoSample.swf',
description: 'Using Dialogs to interact with users.'
});
Workaround
The embedding seem to be working fine if you post a link that has the proper opengraph meta tags for video embedding, here's an example:
the link to be shared (video brought to you by youtube)
<html>
<head>
<title>Fly, you fools!</title>
<meta property="og:title" content="Fly, you fools!" />
<meta property="og:type" content="website"/>
<meta property="og:description" content="Content for Description" />
<meta property="og:image" content="http://i2.ytimg.com/vi/meOCdyS7ORE/mqdefault.jpg" />
<meta property="og:site_name" content="Content for caption"/>
<meta property="og:video" content="http://www.youtube.com/v/meOCdyS7ORE?version=3&autohide=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="640">
<meta property="og:video:height" content="360">
</head>
<body>
<script>
window.location = 'http://disney.com'; // redirecting users who's clicking on the link, wont affect crawlers since its in js.
</script>
</body>
</html>
php sdk call to share it
$this->facebook->api('/me/feed', 'post', array(
'type' => 'link',
'link' => 'http://.../', // put the html file's location here
));
write one more met tag :
<meta property="og:video:secure_url" content="https://...game url.">
"
try to put "https:// " game url ,i.e game swf url with ssl, because fb takes only ssl url to play videos or swf file for game.
Hope this will be useful.
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.