How to Set Post Thumbnail as Default Preview Image for Facebook Share

Post Thumbnail as Facebook Preview Image

Usually, when people share a blog post on Facebook they will want to share the post image (set as thumbnail image) as well.

Here is an example:

1. We have a blog post (from a demo WordPress website using our tInteriorDesign theme)

Post with Thumbnail Image

2. When we click on Share on Facebook link, the preview image that appear should be same as the thumbnail image:

Post Thumbnail Share Post on Facebook

Here are all of the steps that need to be performed:

 

1. Open your_theme/header.php file

 

2. Replace

<html <?php language_attributes(); ?>>

with

<html <?php language_attributes(); ?><?php if ( is_single() && has_post_thumbnail() ) : ?> xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://ogp.me/ns/fb#”<?php endif; ?>>

 

3. Above </header> (also in header.php), insert the following code:

<?php if ( is_single() && has_post_thumbnail() ) : ?>
<meta property=”og:image” content=”<?php the_post_thumbnail_url(); ?>” />
<?php endif; ?>

 

4. Save changes and upload the header.php file

 

Note: The above change is already applied to All of our Premium themes. So, if you use a premium theme from us, you don’t need to apply these code changes to your theme.

About the Author

Tihomir Ivanov is a WordPress web developer, founder of tishonator.com, a fan of Linux and Open Source, a gym enthusiast, a vegan, a fan of minimalism, good movies and books :)

Leave a Reply