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!
How would you use the wp_get_attachment_image_src() to grab the original file, instead of the thumbnail version?
Hey Deric,
You should be able to change ‘thumbnail’ to whatever image size you want to use. You can use an existing image size, or create your own with add_image_size();. Hope this helps!
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.This is a great plugin. It fixed my featured image on FB problem. Thank you.
I’m glad to hear that it helped! Thanks for the feedback 🙂
I activated this plug in on my blog and it isn’t working. Is there something more that I need to do after I install and activate?
Hi there! After activating the plugin, no further action is required. If you have a link, I’d be happy to take a look.
http://sheattack.com
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!
Thanks!
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.
Thanks for reporting this! Do you have any active examples where I can take a look?
Thanks for the plugin, is there a way to set the page Featured Image along with the post Featured Image which works great.
Hello, I just installed and activated the plugin and it’s still not working for this link (I’m not getting any thumbnails on Facebook):
http://hintmama.com/2013/09/30/todays-hint-the-gifts-to-bring-to-a-no-gift-birthday-party/
Thanks!
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?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!
Howdy, Lilian! Untested, but this should do the trick: https://gist.github.com/RCowles/33f096b2470b7354965f
Please note, you’ll need to edit line 48 to point to your image.
Thanks!
Hi Ryan,
Thanks for the plugin.
I tried to install the plugin in my wordpress but the thumbnail is still not showing on FB. Here’s my blog http://seminarphilippines.com/
Is there anything else I need to do? Please help.
Thanks,
Sha
Hi there! Can you link me to a few posts that don’t seem to be working as expected?
Hello,
I have some issues with the featured images, could you help me? i can pay for that. Thanks in advance,
Hello, i need help with this plugin, could you help me?
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?
This is a great plugin. Thank you.
You’re welcome! Thanks for the kind words 🙂
Hi. I’m using your plugin, however I still have problems with featured image in my website. This only show 3 images for all posts, how you can see in this site: http://oficina.turbo.pt.
How can I solve this problem?
Regards
Howdy! It looks like you have multiple plugins adding og:meta tags to your site. Here is an example from your homepage:
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!
Hi there! Can you link me to a few posts that don’t seem to be working as expected?
Hi Ryan, thanks for designing this awesome plugin! Eager to have this working, unfortunately still not seeing correct images when posting to FB. Here’s a link: http://blog.inspiredapp.tv/bodysuits-bringing-sexy-back/
Help would be much appreciated, thanks!
– J
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?
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?
Untested, but this should do the trick: https://gist.github.com/RCowles/33f096b2470b7354965f
Please note, you’ll need to edit line 48 to point to your image.
Can you implement a way to set a default image in case if no thumbnail or featured image is set?
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!
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.
Awesome! Thanks, Darius!
Hi, is it working for wordpress 3.8.1?
I haven’t tested, but there shouldn’t be any reason that the plugin wouldn’t work with 3.8.1.
Hi! I´m trying to use it but is not working, can you take a look?
http://periodistasviajeros.com/?p=2803 thanks!!!
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!
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
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?
WordPress URL and site address both are set to http://neilfindlay.com. I’ve move my dev site live but still facing the same issue.
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.
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!
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 🙂
So i try to share posts on facebook but the picture fails to resize and i installed your pulgin,can you help me please?
Happy to take a look! Can you link me to a few posts that didn’t share properly?
http://leememe.com/2014/03/27/so-true/
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!
Here are couple of links: (All the links are not working)
Link1: http://www.telugumata.com/roudy-movie-review-3-25-out-of-5/
Link2: http://www.telugumata.com/pawan-kalyans-response-to-chiranjeevis-comment-on-ism/
Link3: http://www.telugumata.com/legend-telugu-movie-review/
Best Regards
Gowtham
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!
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
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?
Hi, I’ve been trying to fix this issue on my site for a while now. I haven’t been able to do it, so I held off posting on my Facebook page. I found your site and installed and activated your plugin, but it doesn’t work. Can you offer any help? My blog is http://www.midgeorgiabankruptcyblog.com
It looks like your site is down at the moment. Could you double check the URL?
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
Wow, that was a quick reply. I shared these two: http://midgeorgiabankruptcy.com/qualifies-for-chapter-7/ http://midgeorgiabankruptcy.com/bankruptcy-blog/page/2/ Here: https://www.facebook.com/shenakinglaw
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!
Hi! I’m having trouble to get the og:image tag to be visible in source. Other og tags is there, I don’t use yoast. http://swecial.com/juicyclouds/levels/facebook/
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!
Sorry forgot to thank you! Yes that function was missing in my theme now it works! Thank for taking the time to anwser!
/t
Glad I was able to help! 🙂
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
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!
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
Thanks for the update! I’m glad to hear that things seem to be working 🙂
just wanted to say awesome post, exactly what i was looking for. cheers.
Glad to hear!
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
Hey man solved it myself. Edited the PHP file… the “/>” on the og:article was running on to a new line. Changed it to land on one line and it solved my problem. No clue why.
Hi Alex! I’m glad to hear that you got it resolved. Let me know if you do run into any further issues. Cheers!
The plug in is working for some of my pages but not for all. I still can’t get a feature image on Facebook for this particular page: http://kh1art.ca/seminars/
Thanks for your help.
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
Hi Sha! It looks like you’re using another plugin at the moment for your Open Graph tags. If you’re still having trouble, feel free to give me a shout.
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?
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!
You must be a hero.
Not working for me help me please help its very urgent
my website link http://www.spaarkyzz.com
its work for google+ but not for facebook. featured image is not get shared only link is get shared.
Hi there! Your Open Graphs tags look correct. Can you point me to a specific post that isn’t working as expected?
I have deleted all the unnecessary social plugin.
my any featured image of a product is not showing on facebook after sharing you can check with it.
http://www.spaarkyzz.com/?product=oxford-leather-black
when you try to share this product on facebook in a popup its showing the image but when you finally share it either it takes a logo image or just a link to that product.
please reply as soon as possible
Thanks for the link! However, it is returning 404 Not Found for me. Are you sure that’s a functioning URL?
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!
Awesome! Thanks for the trip, Paul.
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.
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?
Hey,
thank you for your response and sorry for the long time to reply.
This is the list and what is wrong..
http://www.baggy.bg – does only the logo
http://www.baggy.bg/shop/ – only logo
Thanks!
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/
sir.ryan i really need your help i my website when i share products in facebook it gives me wrong thumb or no display please help me
this is the link thank you i hope you will help me thank you so much
http://juicecollection.com/product/unfuckwitable-white/
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.
Can you help me too?
i’m running http://www.mocit.co.kr. this website and i have thumnail issue.
I installed your plugin, but it didn’t work.
example page: http://mocit.co.kr/hum-no/
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.
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!
Thanks for your answer Ryan, and sorry I was wrong to ask you.
No worries at all! I hope that helps 🙂
Thanks for Amazing tutorial .. it helped me alot
Hey Ryan, i installed your plugin but still featured image is not showing on linkedin.
http://site.clairvoyantsoft.com/encrypting-amazon-ec2-boot-volumes-via-packer/ this the post link.
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?