Ensure your post thumbnail in social media sites

They say picture paints a thousand words, even in sharing your blog in social media site. Adding thumbnail on your post will help your readers to catch their attentions while browsing on their news feeds or even reading their emails. But sometimes social media sites are having problem fetching your post thumbnail for some unknown reasons. Today i will teach how to ensure your post thumbnail when sharing your blog to social media sites.

First we need to add a custom field to our post, we will store it in my_post_thumbnail custom field, and later on we will fetch it using WordPress function get_post_custom_values(). Note: custom field name should be unique. Create custom function.

<?php
function share_post_thumbnail(){
	global $post;
	$post_thumb = get_post_custom_values(‘my_post_thumbnail’, $post->ID);
	$post_thumb_def = "http://www.wpleet.com/logo.jpg";
	if(is_page() || is_front_page() || is_home()){
		echo "<link rel=\"image_src\" href=\"$post_thumb_def\"/>";
	}else{
		if($post_thumb[0]){
			echo "<link rel=\"image_src\" href=\"$post_thumb[0]\"/>";
		}else{
			echo "<link rel=\"image_src\" href=\"$post_thumb_def\"/>";
		}
	}
}
?>

We need to create a custom function in your functions.php, or custom_functions.php file if you’re using a thesis theme. We will add
tag to our WordPress. In line #3 we need to declare the global $post;, because we need to get $post->ID that we will need in fetching our custom post thumbnail.

Now let’s call the function get_post_custom_values(‘my_post_thumbnail’, $post->ID);. We also need to set a default post thumbnail for our Homepage and Pages. We can also add or exclude some post that we want to set. See Conditional Tags. Now let’s handle $post_thumb that will return an array, thats why we need to set a key. In our case we will get the first value([0]). Now we need a new condition that will display the thumbnail of the post when it’s available, and display the default thumbnail if it’s null or empty.

Call the function using WordPress action hook

add_action('wp_head', 'share_post_thumbnail');

The final part of this tutorial is activating our function using WordPress action hook add_action(). We will use wp_head hook and add the function share_post_thumbnail on our WordPress.

<?php
function share_post_thumbnail(){
	global $post;
	$post_thumb = get_post_custom_values(‘my_post_thumbnail’, $post->ID);
	$post_thumb_def = "http://wpleet.com/logo.jpg";
	if(is_page() || is_front_page() || is_home()){
		echo "<link rel=\"image_src\" href=\"$post_thumb_def\"/>";
	}else{
		if($post_thumb[0]){
			echo "<link rel=\"image_src\" href=\"$post_thumb[0]\"/>";
		}else{
			echo "<link rel=\"image_src\" href=\"$post_thumb_def\"/>";
		}
	}
}
add_action('wp_head', 'share_post_thumbnail');
?>

That’s it! Just paste this code to your functions.php, don’t forget to specify the correct custom field name you used. Some social media sites like Digg have the option to add Medium Type Tag, this tag will allow you to specify the type of content being shared. Here’s a sample code.

<meta name="medium" content="medium_type" />

Valid values for medium_type are “audio”, “image”, “video”, “news”, “blog” and “mult”. Just include this meta tag to share_post_thumbnail function and indicate the medium_type of your post.