How To Make Your WordPress Post Look Nice When Shared On Facebook

Have you ever wondered how your WordPress posts might look when they’re shared on Facebook?

If you’ve ever shared a link on your Facebook account, you’ve noticed the nifty Title, Image and Description that get automatically loaded to provide an attractive link. Depending on how your particular theme is built, sometimes you’ll have to cycle through several images, before the actual appropriate post image shows up with your Facebook link.

Here is a bit of code you can add to the head section of the header.php file of your theme (Try adding it before the wp_head(); tag) to guarantee that your theme is optimized for Facebook link sharing. It will also make sure that the appropriate post image is the first one that Facebook looks for.

Code Last Updated June 3rd 2011

This update allows you to set the “Featured Image” as the the image that Facebook shows when your link is shared. Secondly, it allows you to set a default image, in case your post does not make use of a “featured image”. You can use a promo graphic, or your logo for this default, by saving it in your themes directory, in a /images/ directory with the file name as default_icon.jpg. Or you can alter the image directory in the code below

 
<!-- Begin FB Sharing for WP by Chad Von Lind. Get the latest code here: http://vonlind.com/?p=539  -->
<?php
	$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
	$thumb = wp_get_attachment_image_src($thumb[0], false);
	$thumb = $thumb[0];
	$default_img = get_bloginfo('stylesheet_directory').'/images/default_icon.jpg';
 
	?>
 
<?php if(is_single() || is_page()) { ?>
	<meta property="og:type" content="article" />
	<meta property="og:title" content="<?php single_post_title(''); ?>" />
	<meta property="og:description" content="<?php 
	while(have_posts()):the_post();
	$out_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt());
	echo apply_filters('the_excerpt_rss', $out_excerpt);
	endwhile; 	?>" />
	<meta property="og:url" content="<?php the_permalink(); ?>"/>
	<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php  } else { ?>
	<meta property="og:type" content="article" />
   <meta property="og:title" content="<?php bloginfo('name'); ?>" />
	<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
	<meta property="og:description" content="<?php bloginfo('description'); ?>" />
    <meta property="og:image" content="<?php  if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php  }  ?>
<!-- End FB Sharing for WP -->

Be Aware: Updating your code will not have immediate effects with Facebook, as Facebook will cache your shared link. It could take up to a few hours before the shared link would work properly. You can try to share one of your links that has not been shared before, to test that it is working proper.

Coming soon: At the moment, if you don’t have an image set as “featured”, it will just default to your chosen default image in your theme directory. I’ll be adding the ability for it to check for the first image used in the post if there is no featured image. So the order will be 1) Featured, if not 2) First Image in post, if not 3) Use default image in theme directory.

  • http://kmsm.ca Josh

    Great blog, Chad.

    This post and another (how to get post thumbnails outside of the loop) have been extremely helpful to me.

    Keep up the good work!

  • jamie

    how exactly does this work? how do I get my chosen image to show on facebook? Do I need to load a thumb of a certain size? is it the first image uploaded to the post that gets selected or is it the featured image that gets selected?

  • http://vonlind.com Chad Von Lind

    An important question, Jamie. One that I seemed to have overlooked with the last update. I’ve included in the post above, and will include here.

    As of January 25th 2011 – This update allows you to set the “Featured Image” as the image that Facebook shows when your link is shared. Secondly, it allows you to set a default image, in case your post does not make use of a “featured image”. You can use a promo graphic, or your logo for this default, by saving it in your themes directory, in a /images/ directory with the file name as default_icon.jpg. Or you can alter the image directory in the code.

  • http://vonlind.com Chad Von Lind

    Also, size is unimportant, as Facebook will auto size your image as a thumbnail for their use.

  • jamie

    well this is a fantastic fix. I just had a customer complaining about her facebook posts. She uses some twitter service to post to facebook and the thumb was always wrong. This was the only solution that I could find. I am going to post the link on facebook help forums so that the others that I ran across can give it a try on their blogs..

    Thanks for the tip

  • Michael

    Hi Chad. Nice Post.

    But it doesn’t seem to be working for me. the default icon shows first when sharing a link, not the featured image of the post and no description shows for the links (i.e. excerpts of the blog articles)… not sure if you can help.

  • http://vonlind.com Chad Von Lind

    Hi Michael,

    I’m not sure what the problem could be, as this has been working for me. Do you have a link to the site where you’re using it?

  • http://cougargulch.com/ Dean Isaacson

    Thanks, Chad. This really did the trick. Every time I liked a link, FB would dig up some ad logo! Thanks for the fix.

  • http://dred.alphabetset.net ed

    Hey Master Von Lind!

    thanks for this code. It works perfect for me – one thing to note, though, is that it only works if you put the code in before wp_head(); is called. This may well be the problem micheal is having.

  • http://vonlind.com Chad Von Lind

    Good note, Ed! I’ll add that to the post to hopefully prevent this mishap for other folks.

  • Michael

    Hey Chad,

    I managed to get it all sorted with some other code. But I did just realize I pasted it in the functions.php and not the header.php. My bad.

    Thanks for sharing…

  • Pingback: How to Setup Facebook Open Graph Tags in Wordpress

  • http://vonlind.com Chad Von Lind

    This code has been updated in case anyone was having trouble getting the Description for a single post or page to display properly.

  • Edwin

    Hi Chad,
    i find a bug , as ” og:image ” here , if use ur code , i can’t get img at facebook .

    i try to change ” og:images ” , it’s work !

    by the way , thx ur share !

  • http://vonlind.com Chad Von Lind

    Hi Edwin, According to Open Graph Protocol, the correct tag is og:image. I’m not sure why you’ve been having a problem with it.

  • Pingback: How to Setup Facebook Open Graph Tags in Wordpress

  • http://www.foodbanquet.com Ryan V.

    Help! I followed everything written here, all instructions but then whenever I share my link to FB it’s just showing the URL and no description. Here’s my site http://www.foodbanquet.com. Here’s the code on my header.php

    <html >
    <!– –>

    <meta charset="” />

    <meta name="description" content="” />
    <meta name="keywords" content="” />

    <link rel="stylesheet" href="” type=”text/css” media=”screen” />

    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="” />
    <link rel="pingback" href="” />

    ID,’_thumbnail_id’,false);
    $thumb = wp_get_attachment_image_src($thumb[0], false);
    $thumb = $thumb[0];
    $default_img = get_bloginfo(‘stylesheet_directory’).’/images/default_icon.jpg’;

    ?>

    <meta property="og:title" content="” />
    <meta property="og:description" content="” />
    <meta property="og:url" content="”/>
    <meta property="og:image" content="” />

    <meta property="og:title" content="” />
    <meta property="og:url" content="”/>
    <meta property="og:description" content="” />
    <meta property="og:image" content="” />

    <link rel="shortcut icon" href="/favicon.ico” />

    <body >

    <a href="” class=”subscribe-button” >
    <img src="/img/social//rss.png” style=”border:none;” alt=”Subscribe RSS” title=”Subscribe RSS”>

    <a href="/”>

    <a href="/”>

    <a class="blankheader" href="/”> 

    ‘top_menu’, ‘sort_column’ => ‘menu_order’, ‘container_class’ => ‘menu-header’ ) );
    }
    else wp_list_pages();
    ?>

    I desperately need help. Thanks a bunch.

  • http://www.foodbanquet.com Ryan V.

    I swear I copied the correct code from my header.php, here it is again:

    <meta charset="” />

    <meta name="description" content="” />
    <meta name="keywords" content="” />

    <link rel="stylesheet" href="” type=”text/css” media=”screen” />

    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="” />
    <link rel="pingback" href="” />

    ID,’_thumbnail_id’,false);
    $thumb = wp_get_attachment_image_src($thumb[0], false);
    $thumb = $thumb[0];
    $default_img = get_bloginfo(‘stylesheet_directory’).’/images/default_icon.jpg’;

    ?>

    <meta property="og:title" content="” />
    <meta property="og:description" content="” />
    <meta property="og:url" content="”/>
    <meta property="og:image" content="” />

    <meta property="og:title" content="” />
    <meta property="og:url" content="”/>
    <meta property="og:description" content="” />
    <meta property="og:image" content="” />

    <link rel="shortcut icon" href="/favicon.ico” />

  • http://vonlind.com Chad Von Lind

    @Ryan – Looking at your source code, I’m guessing there is a conflict with plugins you’re using.

  • http://www.foodbanquet.com Ryan V.

    Thanks Chad for the reply. Ok, I will try to disable my plugins one by one and see which was is causing the problem. I will comment back to let you know. :)

  • http://www.easyskinnylife.com Kathleen T.

    Chad, your post is exactly what I’m looking for! I switched my new blog’s WP theme to TwentyTen Weaver and now my ‘featured image’ and first few sentences of my post will NOT show when “shared” on FB. And it won’t show when I cut and paste the post link into FB.

    The RSS feed works fine with correct photo and exerpt.

    See my site at http://www.easyskinnylife.com and my FB page at http://www.facebook.com/easyskinnylife

    In desparation yesterday, I had to post my recipe photo separately on FB, right after posting the photo-less and description-less link.

    Can you help a Skinny Chick out?! Where do I post your code in the Weaver 2010 theme? I’m checking Main Options and Advanced Options.

    Kathleen

  • Jason

    Hi. I added the code to my wordpress site. but still my fblog title and description are stillnot showing and the info that does show is from my sites header.php main meta tag info. this is nuts! how can we fix this?

    thanks!

  • http://vonlind.com Chad Von Lind

    Hi Kathleen, Looking at your source code, I’m guessing it is a plugin conflict with the “FB Like Thumbnail”. Try deactivating it and testing.

  • http://www.realgoodwine.net Adrienne D

    Hi Chad! This is exactly what I need to fix and is an excellent post, but I can’t seem to make it work. I have pasted the code into Header.php, right before the wp_header tag and I’ve also uploaded a new default_icon.jpg to my images directory and nothing has changed. All new posts to FB seem to pull only my theme’s icon, which renders really poorly on FB.

    Up until a few days ago, I never had an issue, as long as I selected the image manually on FB. However, it seemed to change after the 3.2.1 update or maybe a newish plugin is the problem. What should I do? I am such a novice at this I am stuck! Any help is much appreciated!

    Thank you!!

  • http://vonlind.com Chad Von Lind

    Adrienne, Everything appears to work fine. Updating your code will not have immediate effects with Facebook, as Facebook will cache your shared link. It could take up to a few hours before the shared link would work properly.

  • http://realgoodwine.net Adrienne D

    Thanks so much Chad! Seems to be working fabulously now!

  • http://pcnp.org dittlerachel

    Hi – this work great, but I have a question – if there an ability to only edit the description portion and not the icon it pulls from various links I post to facebook? For instance – I like facebook’s automated pulling of any photos within the page link you are sharing, but it randoml pulls a description from a footer box that I’d rather not share.

    Thank you!

  • http://vonlind.com Chad Von Lind

    @dittlerachel – This code here has all image references removed from the code: http://pastebin.com/wrJ2Q72Q

  • http://pcnp.org dittlerachel

    Hi Chad,

    Thanks! The code works! And it’s much better than the descriptions that had been showing up.

  • Vanessa

    Hi Chad,

    After updating my site to 3.2.1, my Facebook plugins posted all the wrong information. After implementing your code. the Facebook posts now show the correct title and image. However, it’s still not showing the excerpt. My site is http://www.weddinginvitesvancouver.com/blog/ You need to click into a post to the single page to see the FB like button. Do you have any idea why the excerpt is not showing? I’ve tried several different Facebook plugins, but none show the excerpt.

    Any help would be much appreciated!!! Thankyou!

  • http://www.web503.com Charles

    Worked great! Had to move it once because of a conflict unexpected “<" on line 21. This was because the <?php was before this code and what it was opening was after. So anyone else that sees that just look close as where you put it. Code worked great for me. Much thanks for sharing!!!

  • http://www.intendedimmigration.com Thomas Feurer

    What a fantasticly useful code! Thank you so much, Chad!

  • Pingback: Make Your Link Shares Look Pretty on Facebook | Facebooking101 - Facebook News and Video Tutorials

  • http://www.grzybecki.pl Grzybecki

    Thanks man.
    I tried everything, many snippets from many blogs.
    Just your few lines of code is working great.
    Thanks!

  • http://www.maskc.org Richie Madden

    Thank you for this code! Worked for me almost right out of the box.

    get_the_excerpt() was returning a string of about 275 characters, then appending a “Continue reading…” link with extra quotes causing “Continue reading…” to appear on every page and the description not showing. I don’t know if it was due to a plugin, but truncating a long excerpt worked for me. See $excerpt_truncated in: http://pastebin.com/ELXGdBpP

  • http://www.mpls.tv Brad

    The code seems to be working in terms of what it posts to Facebook, but the og:description shows up on top of my header on my web page. Any guesses as to what it might be?

    Thanks!

  • http://www.mpls.tv Brad

    Is it possible to pull the featured image of a as the og:thumbnail instead of a random thumb on the page?

    Thanks, very much!

  • http://www.computerandyou.net/ Abhishek

    Hi
    I have a problem. When I share a post on my facebook page then instead of showing the description of the page it shows some weird codes. I have no idea about PHP codes and all.

    Do you know how to fix it?

  • http://techgeek.lt Donny

    Hi, Chad,

    The script works just fine, but I am using UTF-8 language coding as I have more alphabetic attributes that English language has. Do yu know how to enable this script to support such elements as č, ų, ė, ę, ž and others. Thanks!

  • Pingback: Profesionálne vyzerajúce odkazy na Facebooku « Martin Palkovič – @ sucha_zapalka

  • http://michelecannone.com Michele

    It doesn’t work with shareaholic?

    I copied all the script!

    You made a great job! Keep it up and thanks for your help!

  • http://www.maskc.org Richie Madden

    Brad, see my 10/6/2011 post. It fixes what you are experiencing.

  • http://moxphere.com Cassiano

    Chad, i placed the code but it is not picking nor my description not my featured image on the post http://moxphere.com/2011/12/conteudo-ainda-e-rei-mas-ele-nao-reina-mais-sozinho/

    I use All in One SEO plugin to do the description (which you can clearly see in the source code). Is that possible that the plugin is creatinga strange behaviour?

    Thanks, The code is really great.

  • http://deluxejournal.com otobong

    Wow! This is what ive been looking for. It was so damn annoying when i saw that facebook didnt crawl the right description in my post.Thanks for the help,

  • http://www.sinancankaya.nl Sinan

    Best all,

    i am able to get the correct thumbnail and excerpt. But when i add the link of a post permalink and press ‘share’ on facebook, I actually still see the homepage url of my website on my wall (including excerpt and thumbnail). I don’t not want this, since i am trying to connect the individual like buttons to the corresponding permalinks of posts. At this point, when someone likes a post on my facebook wall, it actually does nothing on the post page.

    So how can i modify the way the url/permalink is showed when i attach the post link to facebook?

  • http://www.jenniekay.com Jennie Kay

    As soon as I put it in, my page goes to this:

    Parse error: syntax error, unexpected ‘<' in /home/sparkinz/public_html/jenniekay.com/wp-content/themes/minimatica/header.php on line 26

    What could I possibly be doing wrong?

    Very new at all this, thanks for your patience.

  • http://vonlind.com Chad Von Lind

    Hmmm. Well, try checking line 25 or 26 for that < causing the problem. Double check the syntax for any errors.

  • http://www.jenniekay.com Jennie Kay

    Ignore my post, figured it out. As a newcomer to this whole thing, I didn’t realize I was pasting it in the middle of a php tag.

    “Never mind” – Emily Letilla

  • http://automaxz.com Automaxz

    This what i need to make my post more intresting in facebook,,, thanks a lot.

  • http://biblicalmen.com Chad G.

    I’ve been looking for this answer for weeks! Thanks a lot!

  • http://n/ausinglocalhosttotest Gary

    I am testing this code on a copy of my website on localhost on my pc.
    Is it possible to confirm if i am using the code in the correct place.
    I am using it in the header.php for my theme Weaver 2.0.
    To resolve the syntax error of unexpted “<" i closed off the php tag at line 62 and opened a php tag on line 93.
    I then inserted the code just before the wp_head(); tag.
    http://pastebin.com/64cx4L1U

    My problem is the inserted code is causing a line of text to appear above the header of the site?

    Also, how long should i expect to wait before this code starts working 100% when sharing to FB?

  • http://vonlind.com Chad Von Lind

    Unless there is public access to your local host, this will not work on a local host.FB needs to access the page. In order to share it.

  • http://www.maskc.org Richie Madden

    Gary, I had that problem too. See my post above from October 6, 2011. The get_the_excerpt() function was returning too long of a string. Now how I fix, along with truncating when I am lazy, is to enter my own excerpt. Then I know there are no special characters screwing up Chad’s solution.

  • http://n/ausinglocalhosttotest Gary

    Chad,
    I understand that on my local pc this may not work yet as anticipated.
    Is it possible to have a look at the code i included to confirm if i have placed the code in the correct place in the theme’s header.php

  • http://n/ausinglocalhosttotest Gary

    Richie,
    I added the truncating section to the code.
    I still have the same issue.
    Do you perhaps have any other suggestions for me?

  • http://www.theregoesthefear.com msallnitechemist

    Hi Chad, I found this post after searching for an hour for a solution to the title/description/image not appearing correctly on Facebook. The solution you gave dittlerachel worked like a charm on my blog. You are a lifesaver! I only wish I had found your page before the oodles of others with code I tried that didn’t work at all.

  • http://calishaw.com Cali Shaw

    i put the above code in the top part of my headers.php file on thesis_18. It totally hosed my admin back end. I removed the code and still get the error: Warning: Cannot modify header information – headers already sent by (output started at /home/content/87/7821487/html/wp-content/themes/thesis_18/lib/html/header.php:3) in /home/content/87/7821487/html/wp-includes/pluggable.php on line 897

    Help Please

  • http://www.fishtenacity.com Doug

    I’m having a problem with a clients website. When they try to share their post on facebook, all it shows is code. I installed your code as suggested and now I see a “Continue reading →” /> ” in the top left corner??

    Have you seen this before? It am using the Twenty Eleven Theme.

  • http://www.cookgoods.com MACC

    Hello,

    Have you ever tried this using a phpthumb generated image associated with the post? I use Magic Fields to take care of image uploading but that way the images don’t get linked to Facebook when you share a link, it would be cool to make them appear.

    If you happen to know how to achieve that please leave me a reply.

    Thanks!

  • http://bodymoment.org Chris

    I just wanted to second the use of Richie Madden’s truncate script…I too had the issue with “Continue reading -> />” showing up at the top of every page. Richie’s script from pastebin solved it beautifully. Thanks to both Richie and Chad for a great bit of code.

  • http://fromstephwithlove.wordpress.com Stephanie

    Hi Chad,
    thanks for this! I’m wondering if this works if you are using the free wordpress blog address? I look at the html code and don’t see the header.php file and am not sure how to proceed. Please help!

  • http://www.mscheevious.com Lisa Jey Davis

    awesome! this is just what I needed. thanks so much!

  • http://www.studio-rama.net Raoul

    Thank you very much! That piece of code solved my problem with the description not always showing in Facebook! :)

  • http://receptizakolace.net/ Kolaci

    i have genesis template. can this code be added to “simple hooks” into meta box?

  • http://www.waylaydesign.com Wayne

    Recently found this after updating my Shareaholic plugin (to Version 5.0.0.4) and thumbnails were no longer being generated. Running WP 3.3.2, this piece of code still works with the exception of one thing I had to remove. I had to remove the

    <meta property="og:description" content="” />

    because it was causing the post excerpt to be displayed across the top of the page on the single post. However, even with removing this section, thumbnail and description still generate just fine. Just thought I’d update to confirm that this workaround still works on newer versions of WordPress. Thanks for the post!

  • http://www.waylaydesign.com Wayne

    Sorry. Pastebin URL http://pastebin.com/kQPNpzr8

  • Pingback: How To Make Your Wordpress Post Look Nice When Shared On Facebook — Chad Von Lind » Web Design

  • http://www.tangomusicsecrets.com Michael Lavocah

    Thank you so much, this totally fixed my problem. Brilliant work. WordPress should be begging you to allow them to put this in their standard theme!

  • http://www.tangomusicsecrets.com Michael Lavocah

    Chad I’ve just noticed that the FB sharing plugin is displaying this on the top of my pages:
    Continue reading →” />
    e.g. at http://www.tangomusicsecrets.co.uk/launch-party/
    This is being embedded in the tag

    Any way to fix this please?!

  • http://www.tangomusicsecrets.com Michael Lavocah

    Basically it’s the code for og:description that uses
    get_the_excerpt
    this generates the link
    Continue reading →” />
    which breaks chrome and firefox
    I’ve replaced this for now just to make my site look nice

  • Pingback: 10+ Hacks to add functionality to your WordPress Theme | gonzoblog.nl

  • Pingback: 10+ Hacks to add functionality to your WordPress Theme | Deep Ocean, Wide Sky

  • http://www.mojocreator.com Kim

    This is a great tip, what about having the code pull the first image in the body and using that as your Facebook image?

  • http://snowdpd.com Chris

    Works great! What if I want to still have to option to use the default icon even if a featured image is set?

Chad Von Lind, Webcraft, Leathercraft, Bushcraft © 2013. Chad Von Lind.