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):

add_filter('language_attributes', 'add_og_xml_ns');
function add_og_xml_ns($content) {
  return ' xmlns:og="http://ogp.me/ns#" ' . $content;
}

add_filter('language_attributes', 'add_fb_xml_ns');
function add_fb_xml_ns($content) {
  return ' xmlns:fb="https://www.facebook.com/2008/fbml" ' . $content;
}

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:

<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<?php $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'thumbnail'); ?>
<?php if ($fb_image) : ?>
	<meta property="og:image" content="<?php echo $fb_image[0]; ?>" />
<?php endif; ?>
<meta property="og:type" content="<?php 
	if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>"
/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>

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):

<?php
/*
Plugin Name: Facebook Featured Image and Open Graph Meta Tags
Version: 1.0
Plugin URI: http://www.ryanscowles.com
Description: Automatically set the posts' Featured Image as the thumbnail and set appropriate Open Graph meta tags for sharing on Facebook.
Author: Ryan S. Cowles
Author URI: http://www.ryanscowles.com
*/

define ('pluginDirName', 'fb-featured-image');

// Allow for Facebooks's markup language
add_filter('language_attributes', 'add_og_xml_ns');
function add_og_xml_ns($content) {
  return ' xmlns:og="http://ogp.me/ns#" ' . $content;
}

add_filter('language_attributes', 'add_fb_xml_ns');
function add_fb_xml_ns($content) {
  return ' xmlns:fb="https://www.facebook.com/2008/fbml" ' . $content;
}

// Set your Open Graph Meta Tags
function fbogmeta_header() {
  if (is_single()) {
    ?>
    	<!-- Open Graph Meta Tags for Facebook and LinkedIn Sharing !-->
		<meta property="og:title" content="<?php the_title(); ?>"/>
		<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
		<meta property="og:url" content="<?php the_permalink(); ?>"/>
		<?php $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'thumbnail'); ?>
		<?php if ($fb_image) : ?>
			<meta property="og:image" content="<?php echo $fb_image[0]; ?>" />
			<?php endif; ?>
		<meta property="og:type" content="<?php
			if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>"
		/>
		<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
		<!-- End Open Graph Meta Tags !-->

    <?php
  }
}
add_action('wp_head', 'fbogmeta_header');

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!

100 thoughts on “Set WordPress Featured Image as Facebook Thumbnail”

  1. How would you use the wp_get_attachment_image_src() to grab the original file, instead of the thumbnail version?

      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!

  2. This is a great plugin thankyou, but we’re having a problem with it working with numbers in a title, even a single digit stops it, although it works every time with text titles.

    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?

  3. 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. Hi Manuel. I’m not taking on any freelance work at this time, but I’d be happy to take a look at the issue on your site. What’s up?

    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?

  4. 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!

  5. 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.

  6. 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!

  7. 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?

  8. 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!

  9. 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

  10. 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

  11. 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

  12. I wonder if there is a plugin where we can share our post with thumbnail picture only for facebook but in our blog there is actually no picture for the post. Is that possible to have plugin like that Ryan?

    1. Hi Syed! The display of the post thumbnail on your site is dependent on your theme. So, if your theme includes the Featured Image with your post, I’m afraid that this plugin won’t be able to help you with that. However, if you find a theme that does not include the Featured Image automatically within your post, then this plugin will still work for you!

  13. Plugin working a treat, thanks Ryan. Initially it didn’t for existing blog posts but I twigged that I simply needed to go into those posts in edit mode and ‘Update’ them – then it worked. Might be a useful trick for people who say it’s not working for them. Many thanks for the plugin!

  14. Rayan, could you help me with clearing out the problem with my website. (www.baggy.bg)
    Your plugin is activated at the moment, also I had other plugins that are deactivated or deleted.

    1. Hey there! I had a look at a few posts on your site, and the meta tags generated by my plugin seem to be correct. Could you point me directly to a few of the posts that are not working as expected?

        1. Thanks for the links! That’s actually expected behavior, due to L42 here:
          https://plugins.trac.wordpress.org/browser/facebook-featured-image-and-open-graph-meta-tags/trunk/fb-featured-image.php#L42

          If you’re comfortable working with code, you can alter that conditional. If not, I’m afraid I don’t have any immediate plans to update this plugin, so I would suggest using another plugin instead. Jetpack is one that allows you to automatically include these Open Graph tags:
          http://jetpack.me/

    1. Hi there! It looks like you have two plugins adding Open Graph meta tags to your site – mine, and one called “Facebook Thumb Fixer Open Graph.” This is resulting in duplicate tags, which is likely responsible for the trouble. I’d recommend disabling one of those plugins, and then seeing if the issue persists.

  15. Good morning, my name is Nisa. I am from Indonesia. After reading above tutorial I still do not understand why I did not post pictures appear when sharing on facebook. This is one example of my articles.
    Pictures show: http://nyindir.com/6-alasan-mengapa-pc-lebih-baik-dari-smartphone-anda/
    Pictures and links do not appear: http://nyindir.com/web-corner-mengenal-lebih-dekat-apa-itu-palung-website/
    Open graph: https://developers.facebook.com/tools/debug/og/object

    Is there a problem with my wordpress plugin, I use Yoast SEO plugin and Jetpack. Thank you for your help.

    1. Hi Nisa! If you’re using Yoast and Jetpack, you don’t need to use my plugin. I had a look at your posts, and I see that Yoast’s plugin is creating your Open graph tags. As such, I’d recommend getting in touch with them to see if they can help you resolve the issue!

      1. Thanks for the link! It looks like you have multiple plugins adding Open Graph tags. These duplicate tags are causing Facebook’s scraper to fail. Could you try disabling all other plugins, then see if the issue persists?

Leave a Reply to Anastasia Cancel reply

Your email address will not be published. Required fields are marked *