Notes from the Studio

How to set the default Featured Image and Description when sharing your posts on Facebook

August 7, 2012 // Filed under: Web + Coding

So you’ve added a Facebook share button to your site, or a Facebook comments box to your blog, but the image that is linking is not the image you so carefully selected for your article. Bummer huh? That’s what happened to me when I recently added a FB comment box on my blog. I excitedly added the comments box and did a test, but the image coming up was the “subscribe for email updates” envelopes on my footer. Which is not what I want every single liked article to show! I was able to find some documentation on adding og:image tag in order to have the right image pulled up, but I don’t want to have to do that manually for each post. And since I use WordPress, I don’t want to have to update individual meta data when I have a common header.

Fortunately I came across this great article on Moneytized, which walks you through automating this process. And they offer solutions whether your theme supports Featured Images or not. I’ve shared that portion below, as my main issue was the image, not so much the description or the title.

Setting the Featured Image as the default image Facebook will show
Many WordPress themes support the relatively new feature of “post thumbnail”. Usually, authors choose an image relative to the content; it would be a good idea to include it in the meta-information of the web page. Again, add this just below line 5 of the code above:
<meta property="og:image" content="<?php $post_thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'large'); echo $post_thumbnail[0]; ?>" />

For themes not supporting post featured images, one may use the first image found inline in the main content:
<meta property="og:image" content="<?php preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); echo $matches[1][0]; ?>" />

You can read the full article originally posted by Nikolaos Anastopoulos on 11/14/11 to Moneytized.


Join the Conversation on twitter @yaritsaarenas or leave a Facebook reply below!