3 minute read.

How to control the snippet used in Facebook

Paul Anthony / March 1, 2011

Posted in: Archive

No doubt many of you will have already heard the news on Facebook’s recent bait and switch tactic with the like button now turning into sharing functionality across your Facebook stream.

For publishers across the web, this change will undoubtedly bring with it an additional wave of traffic from the social network site, and is likely to encourage publishers to implement the code they need to increase Facebook’s reach even further.

However, with the recent change, it is worth noting that control has now been taken out of users hands as to the snippet of information which is lifted and used to describe a story and encourage a click-through.  You can no longer expect or rely on end users cycling through to choose an appropriate image, and overwriting the text which gets pulled in from your page.

Having a good thumbnail, and good introduction to your article or page will encourage click through’s within the Facebook network, in much the same way as it does in organic results. It makes complete sense to ensure that your house is in order for this recent change – so how do you control what Facebook picks for your image and introduction?

Easy when you know how.

Tucked away in the depths of the Facebook documentation is a protocol known as ‘OpenGraph‘ which provides you with a number of ‘meta tags’ which control the snippet and image  which is used within the Facebook stream when the like button is pressed.  Taken from the developer documentation this shows an IMDB page, which shows exactly what image should be used in the stream etc.

<meta content="The Rock" /><meta content="movie" />
<meta content="http://www.imdb.com/title/tt0117500/" />
<meta content="http://ia.media-imdb.com/rock.jpg" />
<meta content="IMDb" />
<meta content="USER_ID" />
<meta content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons." />

Thankfully, for those of you on WordPress, you don’t have to worry about this one. There is a variety of OpenGraph plugins which handles all of this for you.

Unfortunately with both of these, there are problems. The description tag isn’t used at all for single posts in the latter, and its used incorrectly in the former (set to the blog info). I’ve created a fix to sort the problem out with both, and you can download below modified versions. which work like a dream.

Open Graph Protocol Update (Artlung version)

Open Graph Protocol Update (Willnorris version)

The image selected is just the first one which is logically in your WordPress gallery for that post. There are also plugins out there for other content management systems such as Joomla.

Here’s a before and after shot:

Before: open graph meta is implemented, Facebook pulls in a good lump of the text, and defaults to the first image.

After: Publisher controls the text used as the description to the article. More control = More clickthroughs and traffic.

  • facebook
  • FBML
  • html4
  • slider
  • snippets