Creating an enhanced Facebook posting with META tags
You’ve written some really great posts to your WordPress blog. You’ve added a Post to Facebook button so folks can re-post you, you know they will, right? Is there more you can do to optimize what gets sent to Facebook? You Bet!
It’s all in the META
When folks share your WordPress posts on Facebook, data is gathered from your post to create the imported story. It all comes from the META data in the <head> of the post.
Here’s a screenshot of an imported story formatted using the technique described in this post:
Here are the tags used to create the story on Facebook:
<title>Tulsa Web Results | New Search Engine Takes Factual Approach |</title>
<meta name="description" content="Can a search engine tell fact from fiction?
This new engine claims it can!!" />
<link rel="img_src" href="http://tulsawebresults.com/wordpress/wp-content/uploads/2009/12/
The WordPress code
The code to generate the first two (title and description) should already be in your header.php file in wordpress. These are standard to every Web page. The third tag (the link to img_src) is used by Facebook to generate the thumbnail in the imported story. It’s not a default part of a Web page, so some code has to be added to header.php to create it.
Here’s the code:
<link rel="img_src" href="<?php echo get_post_meta($post->ID, "img_src", true); ?>" />
Add this anywhere between <head> and </head> in header.php. Now you’re ready to do some post enhancement!
Enhancing Your Posts
When you create a post in WordPress, there’s a tab below the text box for “Custom Fields”. Add a new custom field named img_src , or select it from the drop down box. For the value, paste in the URL of an image you want to use. Facebook will automatically make a thumbnail of the image and place it when your story is imported.
“Title” and “Description” tags are generated automatically by WordPress, though you can enhance them as well using a plugin like “Headspace” or “All in One SEO”. Once you add the img_src code snippet to your template, the image for Facebook is almost automated. Now all you have to do is decide what image you want to appear with your post. You could use an image from your post, your logo, or just about anything. It’s up to you!
Social networking lets users on you site re-post what you write to Facebook and other places. If you enhance your posts with an image, they’ll be even more attractive to Facebook users. This can increase click throughs and traffic on your site, and that’s a good thing, right?
Spurred by Daniel’s comment below, I made some investigations. Here are my findings:
1. The img_src tag does indeed work. Must be an undocumented feature 😉
2. The image to be linked to can be no larger than 130px x 110px (recent change I was using 150 x 150) and the ratio of width to height can’t be more than three. In other words, really long or really tall images can’t be used.
3. What happens when the image doesn’t meet these criteria? A thumbnail isn’t created.
4. Here’s the page at Facebook for the details: Specifying Meta Tags for Facebook Share