Display Correct Thumbnail on Facebook Share
Facebook share allows you to define certain portions of page preview. You can define them using the following tags:
<!-- Start of Facebook Meta Tags by shailan (https://wpassist.me) --> <meta property="og:title" content="Introducing dropdown menu effects" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://wpassist.me/introducing-dropdown-menu-effects/" /> <meta property="og:image" content="https://wpassist.me/wp-content/uploads/2011/01/wp-dropdown-menu-effects-thumbnail-200x200.jpg" /> <meta property="og:site_name" content="shailan.com"/> <meta property="og:description" content="With the 1.6 update finally added jQuery effects to the dropdown menu widget. This version also brought many other features like, auto-recognizing dropdown.css in theme folder, specifiying an external theme URL, options for removing link..." /> <!-- End of Facebook Meta Tags -->
Here i will show you how to implement a post thumbnail meta in order to show the right image in the post preview.
Those tags go to header.php which defines your page’s styles and meta informations.
- Open the
header.php
- Paste the following code before
<?php wp_head(); ?>
[php title=”header.php”]<?php
global $wp_query;
$thePostID = $wp_query->post->ID;
if( has_post_thumbnail( $thePostID )){
$thumb_id = get_post_thumbnail_id( $thePostID );
$image = wp_get_attachment_image_src( $thumb_id );
echo ‘<meta property="og:image" content="’.$image[0].’" />’;
} ?> - Save and upload the file to your theme directory. Voila!
You can also use my Facebook Meta Tags for WordPress plugin. It automatically inserts related tags to your site.
Don’t forget to put a facebook share button to your site. You can get one here.
Cheers!