Sharing on Facebook: How to Improve Your Results by Customizing the Image, Title, and Summary Text

Holding a red leaf at The Monroe Institute

Are you in a hurry? See the manual and automated solutions.

If you find this helpful, consider voting this up at stackoverflow to let others know!

My Motivation

My wife recently made the best ice cream known to man: bay leaf ice cream. Yes, I originally made that same puzzled face and cringed of the idea of adding herbs to my dessert. Honestly, I was shocked at how good it was, so we clearly had to tell the world of our new found discovery.

My wife took a picture, wrote a post, and then tried to share the link when this happened:

Damn you facebook! The script used to select the information to share was skipping the body text and pulling something unexpected. And since we all judge books by their covers (or social media links by their thumbnails), we needed a way to remedy this.

Why You Should Care

You probably just spent a lot of time and effort creating what you feel is important content to share with the world, therefore you should try to get the most bang for the buck for your efforts. If you rely on facebook's scripting, you might get a result that looks like this:

Of course, sometimes an unitentional mishmash may get a higher click rate because people are intrigued, but most of the time you're simply going to get people to pass you by. Attention spans on the internet are non-existant, and there is a never ending array of other, more enticing links to go check out.

The 2 Solutions

In my investigation, I found 2 methods of fixing this: manual and automated. Manual is by far the easiest and more robust, but you're relying on user intervention (do they have the time, skill, and desire to edit). Automation through a CMS (e.g. wordpress, drupal) is awesome but may require a level of expertise a casual blogger doesn't have. So check out both and see which one you can best leverage.

Manual Adjustments

When you drop a link into the facebook share box, you'll see the (1) image, (2) title, and (3) text summary. What you may not have known is they are all editable.

The images are the most obvious and can be toggled simply by the left and right buttons. The title and text summary must be clicked, and then you can adjust it to whatever you like.

Much Better!

Automated Suggestions

I gave some advice on how to do this in Drupal in a previous post, so I want to be a little more high level in the beginning so it's more applicable to all CMS's.

The goal is to inject 3 pieces of HTML into the <head> region.

Title:<title>INSERT POST TITLE</title>
Image: <meta property=og:image content="http://www.yousite.com/INSERT_YOUR_IMAGE.jpg" />
Description: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

Notice: If you do these 3 things, you'll significantly increase the odds your suggestions appearing automatically when another user shares your content. However, there are no guarantees. Facebook's algorithm sometimes rejects your suggestion and picks something else it determines is more appropriate. I've noticed 2 trends: image names with spaces in them seem to get ignored (use dashes or underscores instead), AND ALL CAPS caps and/or ("highly punctuated") text will get ignored. Despite that, the success rate appears pretty high as of this date (June 1st, 2011).

The difficult part is doing this programmatically. If you don't know PHP, you're typically out of luck unless there is a contributed module/plugin/theme that can do this for you. The following is such an example.

Automation Example: Drupal's Blueprint Theme

In the Drupal 6 version of the Blueprint Theme, you'll find the following 2 sections of code:

function blueprint_preprocess_page(&$vars) {

  $vars['meta'] = '';
  // SEO optimization, add in the node's teaser, or if on the homepage, the mission statement
  // as a description of the page that appears in search engines
  if ($vars['is_front'] && $vars['mission'] != '') {
    $vars['meta'] .= '<meta name="description" content="'. blueprint_trim_text($vars['mission']) .'" />'."\n";
  }
  elseif (isset($vars['node']->teaser) && $vars['node']->teaser != '') {
    $vars['meta'] .= '<meta name="description" content="'. blueprint_trim_text($vars['node']->teaser) .'" />'."\n";
  }
  elseif (isset($vars['node']->body) && $vars['node']->body != '') {
    $vars['meta'] .= '<meta name="description" content="'. blueprint_trim_text($vars['node']->body) .'" />'."\n";
  }
  // SEO optimization, if the node has tags, use these as keywords for the page
  if (isset($vars['node']->taxonomy)) {
    $keywords = array();
    foreach ($vars['node']->taxonomy as $term) {
      $keywords[] = $term->name;
    }
    $vars['meta'] .= '<meta name="keywords" content="'. implode(',', $keywords) .'" />'."\n";
  }
}

function blueprint_trim_text($text, $length = 150) {
  // remove any HTML or line breaks so these don't appear in the text
  $text = trim(str_replace(array("\n", "\r", "\r\n"), '', strip_tags(html_entity_decode($text, ENT_QUOTES, 'UTF-8'))));
  $text = trim(substr($text, 0, $length));
  $lastchar = substr($text, -1, 1);
  // check to see if the last character in the title is a non-alphanumeric character, except for ? or !
  // if it is strip it off so you don't get strange looking titles
  if (preg_match('/[^0-9A-Za-z\!\?]/', $lastchar)) {
    $text = substr($text, 0, -1);
  }
  // ? and ! are ok to end a title with since they make sense
  if ($lastchar != '!'&& $lastchar != '?') {
    $text .= '...';
  }
  return $text;
}

What this is essentially doing is looking for a node's body text and them slimming it down to 150 characters. This will get us the text summary into the <meta> tag. We'll still have to fix the image issue, which we can do by adding this additional chunk of code.

if($vars['node']->field_image[0]['filepath'] != ""){
  $vars['meta'] .= '<meta property="og:image" content="'.$vars['node']->field_image[0]['filepath'].'" />'."\n";

If you're using wordpress or another CMS, you'll have to do your own due diligence on how to get this working.

Was this helpful?

The APIs are always changing, so this may be irrelevant in 6 months, but the strategy should remain the same. I hope you found this helpful, and feel free to leave feedback if this worked for your or not. Good luck sharing!