Getting 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!
Does the
code validate?It should.
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:
Is this XHTML 1.1 + RDFa?
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!
Hey Jonny, looking at it now and I don’t get it either… Something IS going wrong there but what…
Could you try this instead of the meta for the image:
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.
I found that info at stack overflow :)
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?
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.
In the past for FB share I’ve used:
Where field = Image and key = /wp-content/uploads/2010/10/file.jpeg
Merged your comments, you need to use html entities, even inside <pre> tags :)
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 :)
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 :)
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.
Thank you very much!! We were just looking how to specify the image. Perfect timing!
Thanks! The image is nice..
Excellent!
This is cool but I need help from some expert with the codes ;)
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.
Nice post thanks for a good information
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”
Thanks for the excellent post Yoast!
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.
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
I’m in the same boat as 256studio, very new to WP and PHP so I’m wondering where code goes as well.
Thanks!
Great tips, every e-commerce site should implement Facebook sharing. Facebook is def the hot social marketing tactic right now.
Good question, WHERE do I have to put that piece of code?
Normally in header.php
Gonna try i out thanks for another great tip..
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.
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.
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