Whenever we post any url to facebook, it extracts its data and shows the basic information like title, thumbimage etc. I just want to know how it detects whether the url contains a video and adds a play button on top of the thumbimage.
Here are a couple links to get you on the right track. The short answer is Open Graph, e.g.
<meta property="og:image" content=""some content..." />
and if those tags aren't available, in simple terms, facebook guesses.
How Does Facebook Know What Image To Parse Out of An Article?
Facebook uses the Open Graph Protocol to determine what content is being shared. It is up to the webmasters/developers to insert these tags on their content.
Webmasters - Facebook Developers
I have a website where news articles get posted through CMS and there is no option to add Facebook META OG tags to <head>. I could only add them manually to <body> but that won't work I assume?
Is there another solution where you can tell Facebook which image should be picked when using like/share buttons?
This depends how you make the share. You can use the FB.Ui to request a "Post to a wall" where you can specify the specifics of what appears on the share.
https://developers.facebook.com/docs/reference/dialogs/feed/
If you are sharing the URL only it will read your meta tags as you state. I have not tried making that image the first within the HTML as this may also make that the default.
you can use this link to debug your meta tags and test your sharing if you are sharing a URL.
https://developers.facebook.com/tools/debug/
Using the "Share" link of a page does not always show the picture of the page as thumbnail in the Facebook link. For example, linking the page http://www.tekes.fi/tekes/tulokset-ja-vaikutukset/caset/2013/managed-outcomes-tuotantotalouden-logiikkaa-terveyspalveluihin/ to Facebook by using the red "Share" > "Facebook" link at the bottom of the page makes the link show in Facebook so that the picture of the article also shows in the link. However, linking the page http://www.tekes.fi/nyt/blogit-2013/katoavatko-tyopaikat/ in the same way does not show the picture in the Facebook link. The "Share" links in the pages are implemented by using the AddThis Toolbox.
When copying the urls of the above links directly to Facebook, both of the links are shown with pictures in Facebook as they should.
Could you tell us what could cause the problem with the "Share" link? Is there something wrong with the "Share" link implementation? Is there a solution to this problem? We have tried to add a
<meta property="og:image" content="<picture url>" />
tag to the pages with no effect. The Facebook debugger tool (https://developers.facebook.com/tools/debug) tells about both of the pages the same things: that the 'og:image' property should be explicitly provided, even if a value can be inferred from other tags, and that the provided og:image is not big enough and that an other image will be used instead.
Here are some other urls where the picture shows correctly when sharing it to Facebook using the "Share" link:
http://www.tekes.fi/nyt/uutiset-2013/suomen-peliteollisuus-nousi-kahteen-miljardiin/
http://www.tekes.fi/nyt/uutiset-2013/suomalaisyritys-pistaa-kampoihin-pelikonsolijateille/
http://www.tekes.fi/nyt/uutiset-2013/verkosta-vauhtia-liiketoimintaan-ict-ammattilaisten-avulla/
Here are some other urls where the picture does not show correctly when sharing it to Facebook using the "Share" link:
http://www.tekes.fi/nyt/uutiset-2013/yritys-suomen-puhelinpalvelu-tarjoaa-hyvan-kanavan-yrittajille/
http://www.tekes.fi/tekes/tulokset-ja-vaikutukset/caset/2013/lasten-sijoitukset-vahenivat-raisiossa/
The magic begins with using <figure> tag around article image. In this case, sharing works better. For example in Facebook and Google+.
Is there a special url for sharing to Facebook and Twitter for mobile?
Or are they the same as those from websites?
Using
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Twitter
for Twitter and
<script>
function fbs_click()
{
u='www.something';
t='title';
window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<a rel="nofollow" href="http://www.facebook.com/sharer/sharer.php?u=someurl" onclick="return fbs_click()" target="_blank" class="">Facebook</a>
for Facebook.
Your sharing implementation should be the same and should work so long as your mobile users have devices capable or rendering JavaScript. Otherwise you can use each platforms' API url to share inside a link, the only problem is the callback redirects them either to Twitter or Facebook and they'll have to manually return to your site. The links are as below:
Sharing on Facebook:
http://m.facebook.com/sharer.php?u=<urlencoded url>t=<urlencoded title>
For example:
http://m.facebook.com/sharer.php?u=http://www.google.com
Updating status on Twitter:
http://mobile.twitter.com/home?status=<urlencoded status>
A couple of notes regarding Simpleton's answer.
The http://m.facebook.com/sharer.php URL may not be what you want. The site that you provide in the u query parameter needs to have some tags in the page in order for the share
page to be at all interesting. Just try putting another URL in there other than Google to see what I mean. I was never really able to figure out what it is looking for in the page of the site in order to show anything useful in your share page. I did not see any way to provide extra information about the site you are sharing.
The t query parameter is no longer read by facebook as far as I could tell
I found that the Facebook feed dialog was a better sharing alternative (https://developers.facebook.com/docs/reference/dialogs/feed/). See the example at the bottom of that page for the information you can share. Paste that example URL in to your browser to see what it looks like. You can play around with the parameters to see what each parameter controls in the post. For example, if you don't provide the caption parameter, it seems that the base URL of the link parameter is used in it's place. To use the feed dialog approach, you need to register your app in Facebook to get an app_id that you will need to include in the feed dialog URL. You also associate your app with a web site URL, which you also use in the feed dialog URL. If you want Facebook to serve you a mobile-friendly page, append &display=touch to the end of the feed dialog URL. Lastly, you must provide redirect_uri parameter where the user will be redirected (with the post ID included as a query parameter), so you have to have something at that URL to handle the response.
Regarding the http://mobile.twitter.com/home?status URL, I learned a couple of things: first, any URL's in include in the status will not be shortened (bummer); second, if your status includes any single quotes, they will be encoded as ' (HTML entity code) but will not get decoded when your post the tweet. However, this doesn't happen if you are posting via the desktop, using the same URL. You can see what I mean by trying the following URL from both your iPhone (I was using Safari on iPhone) and then from your desktop (I was using Safari):
http://mobile.twitter.com/home?status=Wayne's%20World
Note, I do an javascript encodeURI on the status, but single quotes are not generally encodable characters by most URL/I encoders. There are some that will replace the single quote with a %27, but I tried inserting that manually and it still didn't get decoded in the status text.
I hope this information helps someone comes here looking for simple Facebook and Twitter sharing options.
Twitter - This is how I solved the tweet by url for all devices/browsers issue:
http://twitter.com/intent/tweet?text= + encodeURIComponent(tweet);
encodeURIComponent - is a built in javascript function, explained here.
The 'http://mobile.twitter.com/home?status=' is not supported, and you will get encoding issues when twitter requests a login.
Facebook - For facebook sharing I used Facebook API example
The url is ok, but you need to do some work on your server to get Facebook to really make it look decent. Facebook now uses "Open Graph", which allows you to add special tags to your web page that Facebook understands. You can define what types of media are on the page, even add your own objects with definitions you create inside your Facebook app. The link to the developer Open Graph objects page is Here.
A sample of Open Graph on a detail page might look like this:
<meta property="fb:app_id" content="YOUR FACEBOOK_APP_ID }}" />
<meta property="og:url" content="The URL that this page is on" />
<meta property="og:site_name" content="Your domain" />
<meta property="og:title" content="Title of your page" />
<meta property="og:type" content="This is very important - it is how
Facebook refers to your post. Image, video, text, etc. Even custom stuff is
possible" />
<meta property="og:image" content="image url for facebook to display on
the user's wall" />
<meta property="og:determiner" content="auto" />
<meta property="og:description" content="A description you want with this
content" />
And so on. This all goes in the <head> of the page of the actual url you are supplying to Facebook. Then Facebook will translate this into the appropriate post. In addition, you need to set up the Open Graph on your apps developer page, so that Facebook knows to look for the og: tags. It's complicated, but it does work.
Good luck!
I have a website at http://www.mydomain.com which has a corresponding facebook page at https://www.facebook.com/pages/mydomain/123456789.
I am looking for a way to integrate this facebook page URL into the open graph headers so that when someone shares my page, it actually shares the Facebook page instead of the site's URL.
Is this possible?
You can now do this by setting the og:url meta tag to the url of your Facebook page. Keep in mind that if you do this, other networks that use Open Graph tags will probably share your Facebook page instead of the site's url, so make sure that's what you want.
<meta property="og:url" content="http://www.facebook.com/your-page"/>
Perhaps you already figured this out as this is an old question, but since I stumbled upon it... If I understand your question correctly, you do not even need the ogp meta tags to accomplish what you want to do. All you need to do is go to http://developers.facebook.com/docs/reference/plugins/like/ and input your facebook page url in "url to like", https://www.facebook.com/pages/mydomain/123456789 from your example. Then select the options you want including the "send" button. Then get the code and paste it where you want it in your website. Now whenever someone clicks "like" on your website or clicks "send" to share your website, they will actually be liking or sending the url to your Facebook page and not your website. Is that what you were looking for?