Facebook Share (for WP E-Commerce sites too!)

Facebook logoGetting people to share your posts or pages on Facebook is important, but also hard enough as it is. If they do share your product, you’ll want them to use the correct image too of course. This is even more important when you run an e-commerce sites off of WordPress, as then you’ll usually have multiple images on your pages and Facebook won’t always pick the best one by default.

One of the attendees of Made in 48 Hours, Lynda Harvey, who runs the Wine Place, asked me how to make sure when someone shared one of her wine pages on Facebook, it would show the wine image. And to be honest, I had absolutely no clue, so I looked it up. The method used for that, which I knew, is Facebook Share, so that part of the docs was easy to find.

Facebook has documented their Facebook Share stuff pretty well, what you need to do is add this to your page’s section:

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

Update: turns out, in testing, that this works better on some sites for the image meta:

<link rel="image_src" href="http://www.example.com/images/image.jpg" />

If that’s the case for you, you should adapt the examples below.

Of course to get the correct data in those content fields, we’ll need to work a bit. Or rather, I had to do some research and you just have to copy paste.

Facebook Share for your blogs posts

To implement this properly on your posts, use the following code, this code assumes you use post thumbnails and have an excerpt for your posts, so you could of course adapt this for your own needs:

if (  is_singular() ) {
  global $post;
  if ( current_theme_supports('post-thumbnails') 
      && has_post_thumbnail( $post->ID ) ) {
    $thumbnail = wp_get_attachment_image_src( 
      get_post_thumbnail_id( $post->ID ), 'thumbnail', false);
    echo '<meta property="og:image" 
      content="'.$thumbnail[0].'" />';	
  }
  echo '<meta property="og:title" 
    content="'.get_the_title().'" />';
  if ( get_the_excerpt() != '' )
    echo '<meta property="og:description" 
      content="'.strip_tags( get_the_excerpt() ).'" />';
}

Facebook Share for WP-Ecommerce

The next step of course is figuring out how to implement this for one of the most popular WP E-Commerce plugins, they’re not as well documented as Facebook, but their documentation helped a bit. To implement this in your theme, add this in your header.php file:

global $wpsc_query;
if ( $wpsc_query->is_single ) {
  echo '<meta property="og:title" 
    content="'.wpsc_the_product_title().'" />';
  echo '<meta property="og:description" 
    content="'.strip_tags(wpsc_the_product_description()).'" />';
  echo '<meta property="og:image" 
    content="'.wpsc_the_product_thumbnail().'" />';	
}

Now if you share a product on Facebook it should pick the correct thumbnail image for your post or product as a default. Have you done something similar? Or an adaption to this code? Let us know in the comments!

Tags: ,


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

36 Responses

  1. TonyBy Tony on 21 October, 2010

    Does the code validate?

    • Joost de ValkBy Joost de Valk on 21 October, 2010

      It should.

      • Joost de ValkBy Joost de Valk on 21 October, 2010

        On second thought: no it might not if you don’t have RDFa added to your Doctype, as Facebook share is based on that. You’d have to change your Doctype to:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" 
        "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
        • RamoonusBy Ramoonus on 23 October, 2010

          Is this XHTML 1.1 + RDFa?

  2. @jonnyvaughanBy @jonnyvaughan on 21 October, 2010

    I’ve helped Lynda implement the above code on TheWinePlace but Facebook still doesn’t pick up the product images on individual product pages.

    Incidentally if you provide Facebook with a category link (i.e. http://www.thewineplace.co.uk/products-page/cabernet-sauvignon) it will pick up the first few images, even without using the meta tags, but if you give it an individual product page then it won’t (despite using the same thumbnail jpgs as the category page).

    I have a feeling there’s something more complicated going on. At first I thought it might be to do with the aspect ratio of the images (can’t exceed 3 when dividing width by height, or height by width) but this doesn’t appear to be the case either.

    Facebook picks up images from normal WP pages/posts just fine.

    I’m perplexed!

    • Joost de ValkBy Joost de Valk on 21 October, 2010

      Hey Jonny, looking at it now and I don’t get it either… Something IS going wrong there but what…

    • Joost de ValkBy Joost de Valk on 21 October, 2010

      Could you try this instead of the meta for the image:

      <link rel="image_src" href="http://www.example.com/images/image.jpg" />
      • @jonnyvaughanBy @jonnyvaughan on 21 October, 2010

        That seems to have done the job!

        Can I ask where you sourced the information from? That issue has been driving me nuts for the last couple of days – so thank you for the help.

  3. ScottBy Scott on 21 October, 2010

    Do you know how to translate that to a WooThemes script? WooThemes use the custom field “image” for the thumbnail. Could I just switched thumbnail to image?

    • Joost de ValkBy Joost de Valk on 22 October, 2010

      I don’t use any Woothemes at the moment so couldn’t tell you… If you find the solution I’d be happy to add it to the post.

  4. Gabe DiazBy Gabe Diaz on 22 October, 2010

    In the past for FB share I’ve used:

    <?php $image = get_post_meta($post->ID, 'Image', true); ?>
    <link rel="image_src" href="http://YourSite.com/< echo $image; >" />
    

    Where field = Image and key = /wp-content/uploads/2010/10/file.jpeg

    • Joost de ValkBy Joost de Valk on 22 October, 2010

      Merged your comments, you need to use html entities, even inside <pre> tags :)

  5. RichardBy Richard on 22 October, 2010

    I’m so sick and tired of WP E-Commerce all together, decided to stop working with it. Next up is either Open Cart, Shopp or PHPurchase. So thanks for the fix Joost, but I won’t use it :)

    • Joost de ValkBy Joost de Valk on 22 October, 2010

      Nobody’s forcing you to mate :) I’ll get this going for Shopp as well if I can find someone with shop to test it for me :)

  6. BrianBy Brian on 22 October, 2010

    Hmmmm – it is my understanding that Facebook does not want to continue to use Share. They are pushing people to use Like instead. Go here to read the top paragraph.

    A word of warning – putting either Share or Like in an https (SSL page) page will cause issues.

    Dealing with implementing/maintaining Facebook is a PITA.

  7. HalvorsenBy Halvorsen on 22 October, 2010

    Thank you very much!! We were just looking how to specify the image. Perfect timing!

  8. BillyBy Billy on 23 October, 2010

    Thanks! The image is nice..
    Excellent!

  9. Latief@Simple Blogging TipsBy Latief@Simple Blogging Tips on 23 October, 2010

    This is cool but I need help from some expert with the codes ;)

  10. JesseBy Jesse on 24 October, 2010

    I had to bail on all facebook integration for now until they get their act together. I found most fbml to be unreliable at best and that is very unfortunate because in theory it offers a lot of cool functionality that I enjoyed using (integrated login, like buttons, update streams etc)

    They also don’t seem to be too overly interested in keeping the facebook dev site updated about whats going on either, so for now.. boo facebook.

  11. riteshBy ritesh on 24 October, 2010

    Nice post thanks for a good information

  12. TrafficColemanBy TrafficColeman on 25 October, 2010

    Joost..its nothing that frustrate me the most to see someone share my content with the wrong
    imagine..but this article will help me me solve this problem.

    “TrafficColeman “Signing Off”

  13. Stage CHinaBy Stage CHina on 28 October, 2010

    Thanks for the excellent post Yoast!

  14. TeenaBy Teena on 30 October, 2010

    This is really useful, I really should try this one. Thanks for mentioning the source as well. I just hope it’ll work for me.

  15. 256studioBy 256studio on 31 October, 2010

    Hello, I’m a big fan of yours! I read all the articles about WP. I try to keep my site up today by using your codes and code snippets..
    Would this info go in the index or page or post? I’m sorta a newbie playing with php..
    Because each template designer creates there own coding for the pages.. sorta wished there was sometime of standard for the layouts..

    Thanks
    256studio

  16. boyce100By boyce100 on 1 November, 2010

    I’m in the same boat as 256studio, very new to WP and PHP so I’m wondering where code goes as well.

    Thanks!

  17. Gino OrlandiBy Gino Orlandi on 1 November, 2010

    Great tips, every e-commerce site should implement Facebook sharing. Facebook is def the hot social marketing tactic right now.

  18. SchunsBy Schuns on 1 November, 2010

    Good question, WHERE do I have to put that piece of code?

  19. Blogger GuyBy Blogger Guy on 3 November, 2010

    Gonna try i out thanks for another great tip..

  20. Mario FischerBy Mario Fischer on 10 November, 2010

    Thanks! I came across the same problems and found this very useful tool from facebook:

    http://developers.facebook.com/tools/lint/

    It gives you details about the information facebook extracts from a given URL.

  21. Rahul BatraBy Rahul Batra on 11 November, 2010

    Facebook plays a very important role in promoting website, as you mentioned that if we are promoting any business than should place the correct images.

  22. LorenzoBBy LorenzoB on 16 November, 2010

    Joost, this doesn’t work for me: it appears to work only inside the Loop, how do I make it work outside the Loop?

    I tried an approach with $wp_query but it doesn’t seem to be working either (it returns the wrong ID for some reason for me)

    Thanks

Trackbacks