Facebook – How does “Facebook Publisher” select the image, title and content from a shared website

facebook

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.

Best Answer

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

Related Topic