Creating a Facebook Thumbnail Field in your WordPress Post or Page

When sharing a post or page – one of the reasons 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:

1
<meta property="og:image" content="https://carlofontanos.com/wp-content/uploads/2015/01/access-denied.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.

In this tutorial, I am going to show you how to create a field where you can enter a custom image that you wish to use as your cover image when sharing your posts/pages on Social Sites such as Facebook. This tutorial will also cover how you can generate a meta tag for each post/page in WordPress.

Let’s Start by creating a New Post in your WordPress admin.

Then click on “Screen Options” button found on the top right hand corner in your New Post screen.

Check the “Custom Fields” to enable it within your editing page.

facebook-meta-image1

Just bellow the Excerpt field or Content field, a new field called “Custom Fields” will appear.

On the “Name” field, enter:

1
social_media_thumbnail_preview

then for the “Value” field, enter the link of the image that you want to appear as a thumbnail when you share your post on facebook. Example:

1
https://carlofontanos.com/wp-content/uploads/2015/01/access-denied.jpg

Just to be sure that you are doing it all correctly, kindly refer to the screenshot bellow:

facebook-meta-image2

What we did above is we simply created a new custom field with a meta_key “social_media_thumbnail_preview” and a meta_value containing the value of the image link that you just entered. Later on, we are going to query the value of this field and programatically create a new meta tag which will be identified by facebook as the post thumbnail.

Next is to hit the “Publish” button.

The next time you want to create a thumbnail for a post or page – there is no need to re-enter the “Name” field, it was already registered by WordPress as a default field. Refer to the screenshot bellow:

facebook-meta-image3

Next step is we need to create a function that will register an image meta tag and will then be scraped by facebook.

Open your functions.php and simply add the block of code bellow:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
add_action('wp_head', 'cvf_social_media_thumbnail_preview');   
function cvf_social_media_thumbnail_preview() {
   
    global $post;
   
    $social_media_thumbnail = get_post_meta($post->ID, 'social_media_thumbnail_preview', true);
   
    if($social_media_thumbnail){
        echo '
        <meta property="og:image" content="'
. $social_media_thumbnail . '"/>
        <meta property="og:image:width" content="1024">'
;  
    }
   
}

What the above code does is it gets the ID of the post that is currently being viewed, then gets the meta_value of the meta_key “social_media_thumbnail_preview” from the database. If an Image URL exists, it will then generate the meta tags on the header part of the webpage.

If you try to view the source code of your web page, you should be able to locate the code similar to the one bellow

1
2
<meta property="og:image" content="https://carlofontanos.com/wp-content/uploads/2015/01/access-denied.jpg"/>
<meta property="og:image:width" content="1024">

You can also define your own image width and height in your meta tags:

Width:

1
<meta property="og:image:width" content="1024">

Height:

1
<meta property="og:image:height" content="1024">

When you share your post/page on facebook, it should show the image you selected as its cover image or banner.

facebook-meta-image5

If the thumbnail is not showing the correct image or not showing any thumbnail at all, you can tell facebook to rebuild your link by using a simple tool “Object Debugger” developed by facebook: https://developers.facebook.com/tools/debug/og/object/ then enter the link of the post/page you wish to be re-generated:

facebook-meta-image4

Refresh your page, it should now show you the correct cover image when you share your post/page



Do you need help with a project? or have a new project in mind that you need help with?

Contact Me