How to add a Facebook like button to your Zen Cart product pages

NOTICE: We have now release two new modules which you can use instead of following the below guide:

• Facebook Open Graph
• Facebook Like Button
• these are the first of many Facebook and social networking modules coming from Numinix!

Adding a Facebook like button to your Zen Cart product pages makes it easy for your customers to share your links to your products in their Facebook account.  Then, their Facebook friends can “like” or visit your website creating a cascading effect of exposure for your website and products.

Getting this great exposure is free and takes less than 5 minutes to implement.  Just follow this quick tutorial and your website will become accessible from Facebook in no time.

1. Open includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php and add the following block of code where you would like the “like” button to appear:

   <?php if ($_SERVER['https'] != 'on') { ?>
   <!-- Facebook Like Button BEGIN -->
   <iframe src="http://www.facebook.com/widgets/like.php?href=<?php echo urlencode(zen_href_link(zen_get_info_page((int)$_GET['products_id']),'cPath= '.$_GET['cPath'].' &products_id=' . (int)$_GET['products_id'])); ?>"
    scrolling="no" frameborder="0"
    style="border:none; width:auto; height:24px;"></iframe>
   <!-- Facebook Like Button END -->
   <?php } ?>

2. Adjust the “style” parameter above as needed.
3. Open includes/templates/YOUR_TEMPLATE/common/html_header.php and add the following to the meta data section of the file:

   <?php if (in_array($_GET['main_page'], array('product_info', 'document_general_info', 'document_product_info', 'free_shipping_info'))) { ?>
   <meta property="og:title" content="<?php echo strip_tags(zen_get_products_name((int)$_GET['products_id'])); ?>" />
   <meta property="og:site_name" content="<?php echo STORE_NAME; ?>" />
   <meta property="og:url" content="<?php echo zen_href_link(zen_get_info_page((int)$_GET['products_id']), 'products_id=' . (int)$_GET['products_id'] . '&cPath=' . $_GET['cPath']); ?>" />
   <?php
    $facebook_image = $db->Execute("select p.products_image from " . TABLE_PRODUCTS . " p where products_id='" . (int)$_GET['products_id'] . "'");
    $fb_image = $facebook_image->fields['products_image'];
    if ($fb_image == '' && PRODUCTS_IMAGE_NO_IMAGE_STATUS == 1) {
    $fb_image = PRODUCTS_IMAGE_NO_IMAGE;
    }
    if ($fb_image != '') {
   ?>
   <meta property="og:image" content="<?php echo HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_IMAGES . $fb_image; ?>" />
   <?php }} ?>

And that’s it!

XFBML Method

Do you have an API ID and want to use the XFBML method instead of the iframe method described above?  Simply replace the code from step 1 with:

<?php if ($_SERVER['https'] != 'on') { ?>
<div id="fb-root"></div>
<script>
 window.fbAsyncInit = function() {
FB.init({appId: 'add 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 href="<?php echo urlencode(zen_href_link(zen_get_info_page((int)$_GET['products_id']),'cPath='.$_GET['cPath'].'&products_id=' . (int)$_GET['products_id'])); ?>"></fb:like>
<?php } ?>

Feel free to share your comments or implementation tips so that we can better improve this tutorial.

Find out more features and options by visiting Facebook.