Take the 2-minute tour ×
Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.

This is a question about Facebook Publisher. When I share a link, Facebook will grab some text, the title an image from the site and construct a preview for the user. The user may then edit the preview, chose from one of several different thumbnails, and then post this to their Facebook profile.

Here's a screenshot to illustrate the point:

Screenshot from Facebook

How does the Publisher application grab the images and text from the Link? Are there similar applications which work for other popular web applications, any of the Google applications, Wordpress blogs, etc?

I asked a similar question a few months ago, and it appears that Facebook uses oEmbed, but it appears that oEmbed only embeds content. I also read that oEmbed only works with oEmbed providers. The Facebook Publisher works with nearly all websites.

share|improve this question
    
webapps.stackexchange.com/q/3359/40 –  phwd Sep 16 '10 at 17:55
    
@phwd : It seems like @Edward is talking about a bug in his post. It was working until "But since about two weeks ago, ..." –  Stefan Lasiewski Sep 16 '10 at 18:49

4 Answers 4

up vote 7 down vote accepted
+50

Facebook will use any open graph meta tags if present for the title, and image etc (eg, og:title). The facebook documentation for Open Graph Protocol explains this in more detail:

The Open Graph protocol defines four required properties:

og:title - The title of your object as it should appear within the graph, e.g., "The Rock".

og:type - The type of your object, e.g., "movie". See the complete list of supported types.

og:image - An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.

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/.

In addition, we've extended the basic meta data to add two required fields to connect your page with Facebook:

og:site_name - A human-readable name for your site, e.g., "IMDb".

fb:admins or fb:app_id - A comma-separated list of either Facebook user IDs or a Facebook Platform application ID that administers this page. It is valid to include both fb:admins and fb:app_id on your page.

It's also recommended that you include the following property as well as these multi-part properties.

og:description - A one to two sentence description of your page.

I'm not sure how they do it for pages lacking these tags. If you're trying to duplicate this functionality then this is no help, sorry. But if you're trying to ensure your pages show up in the Publisher as you want then maybe this will.

You can also use the facebook opengraph debugger, which will provide info about your preview as well as (super handy) update their cached link if you make changes. Otherwise you can make changes to a link you want to share and the changes will not show up for days:

https://developers.facebook.com/tools/debug

share|improve this answer
    
They will use the meta tags if you havent provided the open graph tags. OG tags are more helpful when liking a webpage, coz it creates a facebook page then for the site/url –  Umair Oct 8 '10 at 7:45

To tell facebook which text and Images to pick up you need to add specific meta keys in your page's head.

    <meta name="title" content="title" />
    <meta name="description" content="description " />
    <link rel="image_src" href="thumbnail_image" / >

I have posted he details here http://umairj.com/2010/10/modify-how-the-shared-item-appears-on-facebook/

share|improve this answer
1  
That's interesting, and those meta tags are a recommended practice for many webmasters (It helps search engines, etc). However, look at the source for flowingdata.com/2010/09/15/… . That page doesn't have those tags, and doesn't have a <link rel= image image tag either. –  Stefan Lasiewski Sep 16 '10 at 17:48
    
@ Stefan, this is a very good question, well what FB does is if it doesnt find the meta tags of the new OpenGraph OG tags then it picks up all the images and shows part of the text from the beginning of the html of that page. So the user gets a choice for images but the text is the same. Moreover only those images are shown which are upto Facebook's specified criteria. the aspet ratio –  Umair Oct 7 '10 at 7:23

What worked for me was placing 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.

Hope this helps.

share|improve this answer

I would say the answer to your question is fairly complex, and also most likely something of a trade secret for Facebook. Their ability to scan a URL and pick up relevant content/media to display in the news stream is one of the things that makes their service so unique and useful to the everyday person who uses Facebook.

That being said, I would say the algorithm wouldn't be terribly complex, it probably uses a lot of the same rules Google uses to scrape content from websites (they have some general details published here). I think the power behind the Publisher comes from a lot of trial and error and testing by the Facebook engineers.

share|improve this answer
1  
I totally disagree! –  Umair Oct 8 '10 at 7:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.