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
Thank you so much! I’ve been struggling since yesterday and your plugin just magically solved it!
I love you guys! You just saved me and my site an eternity of finding out how to resolve this! More power to you guys!
Have any similar solutions for tumblr sites?
Something probably exists for Tumblr sites, but we only focus on WordPRess.
Man you guys rock, this is what I’ve been after!
This has to be the best WordPress blog out there.
Well done Syed and your team!
Thanks Steve. Glad we were able to help.
YOU HAVE NO IDEA HOW MUCH I LOVE YOU… YOU SAVE ME BRO. Thank you VERY VERY much!!!!! Its actually working! Thank you again, i have very big problem, almost none of my post have thumbs in the fb..
Thanks, good post.
However, I also have social buttons under post titles in the home page and archive pages.
Your code excludes pages that are not single posts. How do I apply it to multi post pages?
It won’t work with homepage and archive pages. Mainly because it will pull the image of the first post in the loop.
Thanks for this! Pesky WordPress thumbnail kept popping up when I didn’t have a featured image, but not anymore!
Where in the functions.php shall I place it? Tried loads of different places but it’s not working and I get error from this code. Any help appreciated!
This article should help:
http://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Thank you very very very much!!!!!!!!!!!!
That was so helpfull, thank u very much
Hi, would it be possible to adapt this script to make my own site dynamic pages show a thumbnail when posted to facebook? (I mean no WP at all). How would that be? Thank you very much
Hi there, I found this post from a google search. I’m having 2 problems: (1) FB stopped pulling my images alltogether, and (2) I’d like to specify an image FB pulls when my blog post has no image. This post is a bit dated, but is this still the fix for these two issues? Or is there something newer? Really appreciate it…
I have used this plugin alone as well as with your FB OG meta plugin, and all it seems to have done is pull through the details of my latest post instead of the home page information, and still no thumbnails.
I have been trying to fix my ‘no thumbnails on fb’ problem for a year now, I am on the verge of tears. I would be willing to pay someone at this point to help me work out what I’m doing wrong. Can anyone spare the time to look at my site and the code and help me out?
@Holli-MaeJohnson This sounds like a query issue in your theme. Send us an email using the contact form. We would be able to fix it for a small fee.
good code well it works only for jpg what if image in in png or how to add more type images
That WP plug-in is not working for me… any idea why?
Thanks! I’m not code savvy to insert what you suggested myself.
Hey guys.. i know the question is a bit out of topic but could you please tell me how to represent php code the way you have done it here.. Help would be really appreciated.. Thanks..
Great just what i was looking for this helped a lot! Appreciate it much!!
thanks works perfect let see how ti works for rest of the 10043 page
Guess what I just found out! Facebook is so stupid; that none of these methods work, if the file is named as a .html or .htm; try if if you don’t believe
Will this work if I have inserted an external image in the post? Do I need to define it with a custom value for this code to work?
@wpbeginner found it, uh err, linter-ed it, solved it. thanks so much for the help!
@AndyDragt Well FB does have a cache that stores page data. But you can clear that. There is a page called Linter … you can google it Facebook Linter… and it shows you more about this.
@wpbeginner @AndyDragt I haven’t been, I thought that if I set a default image that would do. I did just add one (about) on a page and I’m starting to suspect that fb works with cached copies or something…
@AndyDragt Are you adding thumbnails to your pages???
@wpbeginner So it’s just me… because it’s not working for any of my pages but works fine for posts…. any advice on what to check or where to dig?
@AndyDragt This should work for posts and pages because we are using if is_singular() <<
Is there a way to make this work for pages and not just posts? Or, at least, this seems to only work on post for ME… Is that the way it is designed or is my theme interfering somehow? my site is http://untilloveisequal.com
Is there a way to tell Facebook to NOT use a certain image (e.g. my title)?
By using the trick in this article, you specify which image to use. So the user has no other choice to pick from.
Thank you so much. That was perfect!
Hi,
In my case this code creates the right meta property containing the featured image of my posts, yet I STILL don’t have image when I’m sharing it.
I tried 4 or 5 different FB share button plugins, same result.
It worked like a charm, but I hacked the code a bit.
I moved setting the $default variable to just below “global $post”.
Also copied/pasted the “echo ”;” to the first if block just before the return statement to make sure my default was always available (I should note that if you add more to the first “if” block you will need to add curly braces since there will be more than one line of code following it), and copied/pasted the same bit below the echo for the featured thumbnail so that we would have a choice in case we wanted our logo instead of the thumbnail for whatever reason.
Cheers. I have a bad habit of reading posts like this and then never replying when I get the fix working, but this was really bugging me. Upgraded my blog which was still stuck on 2.7 and tried a couple of tweaks to no avail.
However, by simply activating the featured image in my funtions and adding the plugin above it’s worked perfectly. (I don’t actually use the featured image in posts, it’s solely for use as a thumbnail)
Really appreciate this guys, thanks.
Thank you for this. I had been looking for more effective ways of integrating Facebook gracefully on my website.
great man thank. i was always having problem with post not having images. facebook take my ads as thumb and i really hate that.
thanks for giving the solution.
This is a great tip. Thanks for sharing. I get stuck sometimes wondering why it won’t show up on some of my posts!
Awesomeness!
Do you know what you would put as the image URL for a WooThemes theme? For my related posts script I use php woo_image(‘width=100&height=100&class=thumbnail&quality=80&link=img’);
We don’t provide any support for Woo Themes on this site (it is not even in our list of recommended themes). You are better off asking this on their forum.