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

November 3, 2010 by: Youzhny

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:

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

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


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 '';
}
echo '';
if ( get_the_excerpt() != '' )
echo '';
}

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 '';
echo '';
echo '';
}

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!

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
Have you found this script useful? Please support author by PayPal donation.

Leave a Reply