Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Avoid No Thumbnail Issue While Sharing Post on Facebook

Last updated on by
Follow WPBeginner on YouTube
How to Avoid No Thumbnail Issue While Sharing Post on Facebook

Have you ever tried clicking on a Facebook Share link from a blog post just to end up with either no thumbnail, or very unrelated thumbnail showing up? This is exactly what happened to one of our client’s site. For them, we simply wrote a manual code and placed into their header.php, but while surfing through twitter we came across a better solution. In this article, we will show you how to avoid no thumbnail or unrelated thumbnail issue while sharing posts on facebook.

One of the reason why you get no thumbnail, or unrelated thumbnail is because facebook’s script is not smart enough. On each page load, it searches for all image tags and display the ones that it finds useful. Sometimes the script times out without even loading the right image. To get around this issue, facebook recommends developers to tell the script exactly which image to pick by adding a meta tag in the header. The meta tag looks something like this:

<meta property="og:image" content="http://example.com/image.jpg"/>

This works perfectly when you are running a static site, but for a dynamic platform like WordPress, we need to tweak the code a little bit to make it work. We are going to use the WordPress Post Thumbnail (aka featured image) and tell facebook script to pick that as the main image. If for some reason you did not attach a featured image to a post, then we will tell facebook to pick a default image that we have pre-selected.

You need to open your theme’s functions.php file and paste the following code within the php tags:

function insert_image_src_rel_in_head() {
	global $post;
	if ( !is_singular()) //if it is not a post or a page
		return;
	if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
		$default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
		echo '<meta property="og:image" content="' . $default_image . '"/>';
	}
	else{
		$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	}
	echo "
";
}
add_action( 'wp_head', 'insert_image_src_rel_in_head', 5 );

This code will add a meta tag only on single post pages with the thumbnail url in the meta tag. We have specified a default image “http://www.example.com/image.jpg”, so make sure you change that URL in the code for your image.

For those users who do not want to mess with the codes, there is a plugin for you to use called Add image_src Meta Tag

This function will solve your no thumbnail issue with facebook sharing.

Source: Staenz Web Solutions


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Patrik says:

    Plese help,

    I did as instructed and now I have a white screen of death, even on the admin page so I am not able to log in to remove that part from the functions.php and idea what can I do in this case ? :(

  2. Kaley Perkins says:

    The plugin hasn’t been updated in over four years now. Sadness and grief :-(

  3. WPBeginner Staff says:

    Access your website using File Manager in cpanel or an FTP client. Locate the file where you added the code. Edit that file and remove the code.

  4. Katti Lingmar says:

    tried to paste this on my wp-blog an now all I get is

    “Parse error: syntax error, unexpected T_FUNCTION in
    on line 7″ can’t acsess my blog at all.
    crying here…

  5. GRTR666 says:

    Hi, i put that code in my template but when i want to share a link through Facebook, I need to refresh the page 3 times and then it loads the correct image (thumbnail of the post), do you know this issue ??

    BTW even adding : $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘full’ );

    The thumbnail size is 120x90px

    Do you know why ?

    Thank you

  6. Morgan says:

    I tried doing this and got the white screen of death. Found the theme function file in the Bluehost file manager and deleted it, thus bringing my site back to life (RELIEF!!!!!).

    Was I supposed to add the code in-between the “//” which was between the .php ending code? I put it after the “//”. I also wonder if the link to the default picture that I chose was faulty.

  7. Ruth Cataldo says:

    How do I find the php tags? I have located theme‚Äôs functions.php file but where are the tags?? I don’t want to paste it in the wrong part!
    Thanks

  8. Brendan Lee says:

    Hey guys, great easy to understand article, thanks.

    Unluckily this did not work for me. A little background: I first noticed the problem on this post of mine: http://www.brenontheroad.com/way-cagbalete-island/

    That is my first and only post since migrating my site to a new host, and is still the only post that is having this problem.

    All my posts that were published before the migration still generate thumbnails fine.

    As a test, I went back and uploaded a new featured image for one of my old posts: http://www.brenontheroad.com/happy-chinese-new-year/

    As soon as I did that, it stopped working for this post as well. Even after I changed the featured image back to the original, it still doesn’t work.

    Any ideas? Been losing my mind over this!

    Thanks so much
    Bren

  9. Misa Mladenovic says:

    Just doesnt work for me. FB picks up random banner and crops it ugly :(

  10. Abidemi says:

    Hey i tried the code but my entire page turned white and now I can’t log in. Any solution?? Plus other solutions other than using the code? Thank you

  11. Ali says:

    Wonderful!
    I’ve been having this problem for months now and had no idea how or why, I’m so glad I searched your site for the answer!
    I am going to try this tonight…(thank you!!) I only hope I can make it work (I will do the plugin because I dont know where to find functions.php?)
    Ali

  12. Sandy says:

    This was EXACTLY what I was looking for! Worked perfectly! Thanks for sharing!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.