Add a Facebook Like button to individual products in Zen Cart

After being asked by a client to add a Like button to each of her products (like ASOS) and getting confused by Facebook’s documentation on adding custom Like buttons, I stumbled upon this excellent post for how to do it in WordPress:
http://www.hyperarts.com/blog/how-to-add-facebook-like-button-social-plugins-to-wordpress-posts/
I have adapted it to work with ZenCart


1) Register for an application with Facebook – write down your application ID and your Admin id (see the HyperArts post for a good explanation)
(BTW I had a blank screen problem after creating an application – but the app was there when I went to my applications home page in Facebook)

2) Add the following into your html header – change your html tag to read:

<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:og=”http://opengraphprotocol.org/schema/”
xmlns:fb=”http://www.facebook.com/2008/fbml” >

3) Add the following meta tags

<meta content=”YOUR ADMIN ID” property=”fb:admins”></meta>
<meta content=”YOUR APP ID” property=”fb:app_id”></meta>
<meta content=”product” property=”og:type”></meta>
<meta content=”<?php echo META_TAG_TITLE; ?>” property=”og:title”></meta>
<meta content=”YOUR MAIN SITE URL<? echo $_SERVER[‘REQUEST_URI’];?>” property=”og:url”></meta>’

4) The Like button should live somewhere on the tpl_product_info_display.php template

<div id=”fb-root” ></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({appId: ‘YOUR APP ID’, status: true, cookie: true,
    xfbml: true});
    };
    (function() {
    var e = document.createElement(‘script’); e.async = true;
    e.src = document.location.protocol +
    ‘//connect.facebook.net/en_US/all.js’;
    document.getElementById(‘fb-root’).appendChild(e);
    }());
</script>
<fb:like action=”like” colorscheme=”light”
layout=’standard’ show_faces=’true’ width=’500’/>
</fb:like>

I’m aware that as a newbie I’ve probably made a few errors along the way but it seems to work for now. Any comments would be appreciated!
Here’s the example at work:
http://www.thecherrycloset.com/index.php?main_page=product_info&cPath=3&products_id=191

UPDATE: 28th Aug 2010
While the code above was working I was getting the annoying problem with a random product image (eg one of the additional images) appearing next to the shared link on facebook – and not the main product image.
This might not be a problem for Zen Carts that only have the one product image – but it needed to be fixed.
Cue time to delve into the inner workings of Zen Cart:

1) Modify the includes\modules\meta_tags.php file:

The SQL SELECT statement around line 210 needs an additional field adding in the list;
“p.products_image“

Then about line 225 I have the following line:

  $meta_products_image = $product_info_metatags->fields[‘products_image’] ;

Then at line 296 I add a new line to define a new variable called META_TAG_PRODUCT_IMAGE

    define(‘META_TAG_PRODUCT_IMAGE’, $meta_products_image);

2) Modify the html_header.php template as above by adding the following line:

<meta property=”og:image” content=”http://YOUR SITE URL/images/<? echo META_TAG_PRODUCT_IMAGE;?>” />

Back to Blog

Testimonials

It’s been fab working with you – we love the site and certainly going to recommend you!
James DaviesThirty Eight Degrees North