Set WordPress Featured Image as Facebook Thumbnail

If you have a WordPress blog, odds are that you are sharing your posts on Facebook and other social media websites. Some of these sites allow you to include a thumbnail image and description when you or your visitors share posts. For example, when you paste in a URL on Facebook or LinkedIn they will pull an image (if available) and description from the page. At first glance, it may appear that you don’t have much control over this.

However, both Facebook and LinkedIn utilize the Open Graph Meta tags (For more info about the Open Graph API in general, check out David Walsh’s Facebook Open Graph META Tags article.). If you take advantage of this, you can control which image and description is pulled by default.

How can I use Open Graph Meta Tags with WordPress?

It is a pretty straightforward process to add the required meta tags. First, we need to allow for Facebook markup in our opening HTML tags. In this example we are going to add a few filters in our functions.php  file to accomplish this (Note: you could also add the appropriate code to your header.php):

Now we can add the Open Graph meta tags just like regular meta tags and use WordPress’ Template Tags to fill them in. Here’s an example:

Most of the tags are pretty self explanatory, but feel free to ask questions if anything is unclear.  If you wanted to avoid touching your theme files, I’ve packaged this into a simple plugin that you can use as a starting point.  You can see the full code for the plugin here (the zip also contains a screenshot and a readme):

And you can download it from the WordPress Plugin Repo: Facebook Featured Image and Open Graph Meta Tags

Things to consider:

A lot of plugins and themes already include some or all of this functionality. For example, WordPress SEO by Yoast takes care of this for you. A lot of themes will also do this by default. To avoid redundancy you should check to see if the Open Graph tags already exist on your site. All code contained in this post is to be used on an “As-is” basis, and may contain errors. If you notice any, let me know!

References

Facebook Featured Image and Open Graph Meta Tags
by Ryan S. Cowles

This plugin will add the necessary Open Graph Meta tags to automatically set the posts’ Featured Image as the thumbnail for sharing on Facebook and LinkedIn. It will also set Open Graph Meta tags for title, description, URL, type, and site name.

Stats:

  • Current version: 1.0.1
  • Rating: 87.6(8 ratings)
  • Downloaded 13,737 times

75 thoughts on “Set WordPress Featured Image as Facebook Thumbnail

      1. Just to follow up on this: I just updated the plugin to 1.0.1 in the WordPress repo. wp_get_attachment_image_src() will grab the full size image, instead of the thumbnail now.

        1. Thanks for the reply! It looks like you currently have WordPress SEO by Yoast installed, which takes care of adding these Meta tags for you. I hope this helps!

    1. Hi Jennifer! It looks like you have duplicate og:image tags in your < head>. This is likely because you have more than one plugin adding the tags. Could you try disabling the other plugin that adds the tags, or disable my plugin, and then see if the issue persists?

  1. Hi Ryan,

    I have installed the plugin because I want to control the image that Facebook shows when sharing. However, that image (my logo designed for twitter) is not on my website. Is it possible to upload that image in some way and use your plugin to force facebook to use it? Thank you!

    1. Howdy! It looks like you have multiple plugins adding og:meta tags to your site. Here is an example from your homepage:

      !– Generated with Facebook Meta Tags plugin by Shailan ( http://shailan.com/ ) –>
      < meta property="og:title" content="Turbo Oficina" />
      < meta property="og:type" content="blog" />

      !– WordPress Facebook Open Graph protocol plugin (WPFBOGP v2.0.7) http://rynoweb.com/wordpress-plugins/ –>
      < meta property="fb:admins" content="368200773270617"/>
      < meta property="og:url" content="http://oficina.turbo.pt"/>

      I would recommend only using one plugin to generate these tags. If you have trouble, try disabling all of your plugins, and then enabling them one at a time to determine if there is a conflict. Hope this helps!

    1. Hi Joey,

      Thanks for the kind words! I had a look at the post you linked to, and noticed that the Featured Image is 600x350px in size. Can you try using a bigger image to see if that work?

  2. Hello Ryan, I’m trying to find out how to post always the same image, only a logo I don’t want any of the images inside my posts, I read all the instructions but can’t find how, can you help me please?

    1. Howdy Darius! That’s currently a bit beyond the scope of the plugin, but if I have some extra time I’ll see if I can hack something together :) Thanks for the suggestion!

      1. I’ve done that thing by adding the following line in you plugin:


        <?php

        $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'full');

        if(empty($fb_image[0])) { $fb_image[0] = “linktodefaultimage”; }

        ?>

        But I think that an option in the settings would be better for the ones who don’t have any programming skills.

    1. It looks like you have duplicate Open Graph meta tags being added. Are you using any other plugins to generate the tags? If so, you’ll want to disable one of them to resolve the issue. I hope this helps!

  3. I’m trying to use your plugin… however the of:url is throwing errors when i use the facebook debugger as the_permalink() is only bringing the url without the domain (following the /)
    I’ve created a temp fix by manually adding my domain in your plugin:
    <meta property="og:url" content="”/>
    Can you help me understand why this is happening?
    my domain is dev.neilfindlay.com

    1. That is rather strange. Could you please let me know what your WordPress address and Site address settings are, under Settings > General in your dashboard?

        1. I am also receiving the same issue.

          Fatal error: Cannot redeclare add_og_xml_ns() (previously declared in /hermes/bosoraweb105/b872/nf.futujobs/public_html/tm/Mar_2014/newsplus_licensed/wp-content/themes/newsplus/functions.php:707) in /hermes/bosoraweb105/b872/nf.futujobs/public_html/tm/Mar_2014/newsplus_licensed/wp-content/plugins/facebook-featured-image-and-open-graph-meta-tags/fb-featured-image.php on line 33

          My site: http://www.telugumata.com

          Please suggest.

  4. Hi! How do I know which plugins are causing problems or how to deactivate or activate functions? I have jetpack, all in one seo and this plugin but it is not working for me deactivating one by one. my web is periodistasviajero.com thanks!

    1. Howdy! You can disable all of your plugins, and then able them one at a time to determine which is causing the conflict. It’s also worth noting that Jetpack automatically adds Open Graph meta tags, so you probably don’t need to use my plugin :)

        1. It doesn’t look like you currently have my plugin installed on your site. If you’re still having trouble, I’d recommend checking to see which plugin is adding Open Graph meta tags on your site, and then contacting the author. Hope this helps!

        1. Howdy! It looks like you have duplicate Open Graph meta tags on your site. You can see the Debugger returns an error here.

          You’ll need to decide which plugin you want to use for the Open Graph meta tags, and make sure there are no duplicates being added to your site. Hope this helps!

  5. Hi Ryan, I’ve also installed your plugin and can’t seem to make it work. I’m still not seeing the proper thumbnails in FB posts. Here is the site: insidersguidetospas.com

    1. I had a look at your site and it looks like your Open Graph meta tags are correct. You can see what Facebook sees here. Are you still having trouble? If so, could you link me to some examples that are not working correctly?

  6. Hi,

    I installed this app. But somehow its not working for me.

    Here is the link:

    http://www.telugumata.com/reason-for-cine-industry-joining-modi/

    When I try to post this link, the thumbnai lis blank. But it has given two thumbnails. In the second one the thumbnail is correct.

    When the posts are automatically getting posted in facebook, as the first thumbnail is blank, its not working.

    Please suggest on how to fix this.

    Thanks a lot
    Gowtham

    1. It looks like you have duplicate Open Graph meta tags on your site. You can see for yourself here. One set is being added by my plugin, and the other is being added Yoast’s WordPress SEO plugin. You’ll need to decide which set you want to use, and remove the other. I hope this helps!

    1. Hi Tomas! Have you specified a featured image for the post in question? If not, I’d recommend doing so, and then check the og:image tag once again. Hope this helps!

  7. i debuged my test post with your plugin and thats the warnings that i got

    fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate.

    Provided og:image could not be downloaded or is not big enough. Please use an image that’s at least 200x200px and is accessible from Facebook. Image ‘http://271294523.blog.com.gr/wp-content/uploads/2014/06/logo.png’ will be used instead.

    my imeges have biger size.

    my blogs url: http://271294523.blog.com.gr/
    and a post url:http://271294523.blog.com.gr/in-pede-mi-aliquet-sit-amet-euismod-in-auctor-uteres/mauris-posuere/

    if you cane help me it would be awesome thenk you in advance

    1. Hi Anastasia,

      Does this happen on all posts, or just the one that you linked to? Just let me know, and I’ll look into it further!

      1. happend in all posts but the next day when i did the debug everything was ok and facebook took the thumbnail photo correct thenks to your plugin. Sometimes takes a litle time for facebook to apdate the uploader thenks for you time and you replay

  8. Hey Ryan. Nifty little plugin that solves a problem I’ve been wondering about for a long time.

    It’s working great… adding thumbs to all projects from my site… except one, which is ironically the one I’m interested in promoting right now.

    Here is the link: http://thinkmad.com/s/projects/xxyyxx-dmt/

    If you go here and post any other project, the thumb pops up just fine: http://thinkmad.com/s/

    Not sure what is unique about that XXYYXX project that’s giving us the error. the og:image metatag seems to be in the right place.

    As a sidenote, Facebook seems to ignore the og:description metatag as well.

    I’m using the Infinity theme from themetrust.com

    Any help is appreciated! Thanks!

    Alex

  9. Hi Ryan,

    Hope you can help me. Thumbnail and details are not shown when I share my blogpost on FB.
    http://seminarphilippines.com/2014/10/life-lessons/

    Facebook Debugger says:

    Errors That Must Be Fixed
    Missing Required Property The ‘og:type’ property is required, but not present.
    Notice
    Warnings That Should Be Fixed
    Inferred Property The ‘og:url’ property should be explicitly provided, even if a value can be inferred from other tags.

    I’ve already tried to install several plug-ins, I even installed a new theme, but the problem is still there.

    Appreciate your help.

    Thanks,
    Sha

Leave a Reply