Chad Von Lind

Have you ever wondered how your WordPress posts might look when they’re shared on Facebook?

If you’ve ever shared a link on your Facebook account, you’ve noticed the nifty Title, Image and Description that get automatically loaded to provide an attractive link. Depending on how your particular theme is built, sometimes you’ll have to cycle through several images, before the actual appropriate post image shows up with your Facebook link.

Here is a bit of code you can add to the head section of the header.php file of your theme (Try adding it before the wp_head(); tag) to guarantee that your theme is optimized for Facebook link sharing. It will also make sure that the appropriate post image is the first one that Facebook looks for.

Code Last Updated June 3rd 2011

This update allows you to set the “Featured Image” as the the image that Facebook shows when your link is shared. Secondly, it allows you to set a default image, in case your post does not make use of a “featured image”. You can use a promo graphic, or your logo for this default, by saving it in your themes directory, in a /images/ directory with the file name as default_icon.jpg. Or you can alter the image directory in the code below

 
<!-- Begin FB Sharing for WP by Chad Von Lind. Get the latest code here: http://vonlind.com/?p=539  -->
<?php
	$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
	$thumb = wp_get_attachment_image_src($thumb[0], false);
	$thumb = $thumb[0];
	$default_img = get_bloginfo('stylesheet_directory').'/images/default_icon.jpg';
 
	?>
 
<?php if(is_single() || is_page()) { ?>
	<meta property="og:type" content="article" />
	<meta property="og:title" content="<?php single_post_title(''); ?>" />
	<meta property="og:description" content="<?php
	while(have_posts()):the_post();
	$out_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt());
	echo apply_filters('the_excerpt_rss', $out_excerpt);
	endwhile; 	?>" />
	<meta property="og:url" content="<?php the_permalink(); ?>"/>
	<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php  } else { ?>
	<meta property="og:type" content="article" />
   <meta property="og:title" content="<?php bloginfo('name'); ?>" />
	<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
	<meta property="og:description" content="<?php bloginfo('description'); ?>" />
    <meta property="og:image" content="<?php  if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php  }  ?>
<!-- End FB Sharing for WP -->

Be Aware: Updating your code will not have immediate effects with Facebook, as Facebook will cache your shared link. It could take up to a few hours before the shared link would work properly. You can try to share one of your links that has not been shared before, to test that it is working proper.

Coming soon: At the moment, if you don’t have an image set as “featured”, it will just default to your chosen default image in your theme directory. I’ll be adding the ability for it to check for the first image used in the post if there is no featured image. So the order will be 1) Featured, if not 2) First Image in post, if not 3) Use default image in theme directory.