How does "Facebook Publisher" select the image, title and content from a shared website?

Question

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:

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.

Answer 1

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

Answer 2

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/

Answer 3

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.

Answer 4

Facebook uses meta tags on the page you're sharing to determine which image, title, and description to show when posting a link. The meta tag syntax follows Facebook's OpenGraph specification.

The most important meta tags you need to define are:

• <meta property="og:title" content="The title of the sharing preview" />
• $<meta property="og:description" content="The first few lines of content below the title" />
• <meta property="og:image" content="http://site.com/your-image-1200x630px.jpg" />

This of course only works if you have complete control over the site you're sharing. If you’re sharing an external link (like a news article), you don’t have access to their site and therefore can’t change the meta tags. I'm using ShareKit.io, which allows you to change the title, description, and image of any link you’re sharing without having to fiddle with meta tags.

Answer 5

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.