Do you get no thumbnail image or very unrelated image like twitter icon or RSS icon as a thumbnail image while sharing your article on Facebook? As well, this would happen with your readers who share the smae article on their wall.
While sharing any post to Facebook wall, Facebook spans your page’s html source code to find all the <img> tags and offers you the choice to choose one of them as the thumbnail image for the post, that best suits the title and the content of the post, to make the entry more engaging for your friends.
So if there is no image in the html source or if the images are not related to the post content (like twitter/facebook/RSS icons), then that is the problem for you while sharing. You definitely choose ‘No thumbnail’ option while sharing. Here is a very simple solution for the issue, I have included a solution for WordPress users as well as a very decent solution for Non-WordPress users.
For WordPress Users
Most of us now-a-days use a small thumbnail image on the front page which is pulled using the WordPress post featured image or thumbnail image for the post (WordPress 2.9 feature), though this image is not displayed in the actual post. We can use this image as the thumbnail image while sharing the article on Facebook. If there is no ‘Featured Image’ attached to the post, then we can specify a default image, which will be included while we choose the thumbnail for the post while sharing on Facebook, as the default image can be our blog or site’s brand logo, definitely better than having no choice other than the twitter or RSS icon.
For achieving this, in your active theme’s functions.php (On your WP Dashboard go to –>Appearance –> Editor –> On the right side you would find ‘Theme Functions’ –> Click open to edit it), place the below code before the closing php tag (?>):-
<br />
function insert_image_src_rel_in_head() {<br />
global $post;<br />
if ( !is_singular()) //if it is not a post or a page<br />
return;<br />
if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image<br />
$default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library<br />
echo '<meta property="og:image" content="' . $default_image . '"/>';<br />
}<br />
else{<br />
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );<br />
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';<br />
}<br />
echo "\n";<br />
}<br />
add_action( 'wp_head', 'insert_image_src_rel_in_head', 5 );</p>
<p>
Note: Remember to replace the url for default image (http://example.com/image.jpg) by the actual default image specific for your site. This can be the image you have uploaded to your server or to the Media Library.
What this code will do:-
It will add a new meta tag to your post/page header representing the thumbnail image which could be used while sharing
1) This code will give you an option of the post featured image (if it exists) as a thumbnail image while sharing
2) If no featured image is found, you have a default image to choose from as a thumbnail while sharing the entry on Facebook
If there are other images attached to the post, they would also be shown while you choose the thumbnail at the time of sharing.
WordPress Plugin
For those who do not want or are not very sure about changing the Theme Functions (functions.php) file, there is a very simple plugin on the WordPress Plugin Directory named Add image_src Meta Tag which does the same thing. Just it does not have the “default image” setting feature. You can install and use this plugin as well, but this plugin did not work on Chrome and Firefox for me.
For Non-WordPress Users
You can definitely set the default image representing your site’s logo by putting the below code in your web pages head section (after <head> and before the head section close i.e. </head>)
<br /> <meta property="og:image" content="http://example.com/image.jpg"/><br />
Note: Remember to replace the url for default image (http://example.com/image.jpg) by the actual default image specific for your site. This should be the image you have uploaded to your server.
BEWARE: On my blogs, the .png images set as the default image and featured image did not work for the thumbnail extraction. So I suggest you to adhere to .jpg images for definite success!!
Thus, by using the default image, at least you get some good option specific to your site’s niche or logo to use as a thumbnail image while sharing, if there is no image related to the content on the page which is to be shared.
How To Add Post Thumbnail Or A Thumbnail Image To WordPress RSS Feeds
Optimize WordPress Blogs for iPhone, BlackBerry or Other Touchscreen Smartphones
Solution for WordPress WP Super Cache Broken Or Not Working
Sovereign – Clean, Professional Premium WordPress Theme
Get Recent Posts From Various Blogs On WordPress MU Site
Tagged: code snippet, facebook, featured, function, how to, How To's, image, plugin, share, solution, Wordpress, wordpress plugin
No Trackbacks
You can leave a trackback using this URL: http://www.staenzwebsolutions.com/avoid-no-thumbnail-or-unrelated-thumbnail-image-while-sharing-post-on-facebook/477/trackback/
2 Comments
hi. so in order to replace the http://example.com/image.jpg with my own image should i just upload the image alone to my server like http://www.example.com/facebookthumb.jpg ? then go in and place the coding in the header?
Yes Stephanie, you are right!!