ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

Now Facebook Like button will Pick the Right Image

bluehost

Listen

Now Facebook Like button will Pick the Right Image

Sharing your articles on social media can drive immense traffic and we have already covered how to drive traffic from Facebook. When ever you or one of your reader share an article on Facebook or other social-media sites, it fetches the image from the post and post it. It’s very important for you to make sure right image is being shared else you will miss out a lot of opportunity on getting traffic. None the less, your shared post will look immature and funny wit a wrong post image.

I have used many sharing buttons on my blog and I found that all of them were using random images from the sidebar and footer etc. I searched a lot for this problem and finally I am here with a solution for you.

How to Fix and Pick up correct Image for Facebook Like Button

The solutions given below will pick up the very first image from the post and use it. It not only changes the Facebook like button image but also of Digg, Google+ and more. There are two ways to solve this issues.

1) WordPress Plugin: WordPress is an awesome blogging platform with large number of plugins to solve your problems. There is a plugin knows as Facebook Like Thumbnail which can solve your issue with one click. <Link>

2) Custom Code: I always prefer custom codes over plugins as they increases your site’s performance and not overload your blog with plugins. All you have to do is to add the following code in your theme’s Functions.php file between <?php and ?> tags.

Make sure to change http://blog.ashfame.com/wp-content/themes/ashfameblog/images/ashfame-logo.png with you default image which will be used when there is no image in the post.

/**
 * Function which sets the first image of the post as the thumbnail which shows up on FB like and share - http://blog.ashfame.com/?p=888
 */
 add_action( 'wp_head', 'fb_like_thumbnails' );
 function fb_like_thumbnails()
 {
 global $posts;
 $default = 'http://blog.ashfame.com/wp-content/themes/ashfameblog/images/ashfame-logo.png';
 $content = $posts[0]->post_content; // $posts is an array, fetch the first element
 $output = preg_match_all( '//i', $content, $matches);
 if ( $output > 0 )
 $thumb = $matches[1][0];
 else
 $thumb = $default;
 echo "\n\n \n\n \n\n";
 }

functions php file

facebook like button fix code 550x236

The changes might take up-to 24 hours so if you want to check if the issue has fixed then go to Facebook Debugger and give the link of your post which you want to check. If it shows an image from with-in the post then it means the problem has fixed otherwise comment below to ask any question.

facebook debugger 550x393

If this post helped you, then help us by sharing this post! :)
  • Author Bio

  • Latest Post

Article by Yousuf Khan

Yousuf has written 5 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

Comments on this entry are closed.

  • vishnu

    hi friend i did it as you told ,but its show error in my site Which Means” its showing coding ocoding in my site”

    • Yousuf Khan

      Custom code and the Plugin are written by the same author. Try using the plugin, if it works then make sure you have used the code at correct place and haven’t changed it. If the plugin doesn’t works too then better talk to the author @ blog.ashfame.com