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:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

28 thoughts on “How to add a Facebook like button to your Zen Cart product pages


  1. Inserting the ‘facebook button’ in the page wasn’t a problem.

    The problem is that a ‘comment’ MUST be posted. Perhaps there’s a way that when the ‘Like’ button is pressed and ‘general’ comment can be inserted.

    Plus, nothing shows up on the ‘Configuration/Facebook Like Button Configuration’ page is empty. I don’t see anyway or instruction on what to do with the page.

    Any help would be great.

    http://gfbbq.com/store/index.php?main_page=product_info&cPath=2&products_id=9

    Thanks


  2. Hey there! I was looking for a way to add the meta tags for FB, since occasionally Facebook seems to choke on the product image. This seems to have done the trick admirably, but I have one question (preceded by a statement)…

    There’s an extra DB query used here, while the product image is already used on the page. Is there a way to avoid this by reusing the information from the main DB query for product information that Zen cart does, or does this not happen until after the html_header.php file is loaded?

    I hacked around a little bit, to see if I could use a pre-loaded product image variable, but didn’t have much luck, which led me to think that the product image must not be queried until after Zen cart has loaded the html_header.php file. However, it does already have the product name and description, which it automagically inserts into the main meta tags. Any chance that the image has already been loaded too, to avoid extraneous, albeit small, queries?

    Thanks!

    Brian



  3. Esther, I had a quick look at your store and it appears that with your customizations you are not using the product title. Is that correct?

    Have you tried temporarily reverting back to the Classic template and testing a Facebook Like button in that template? That way you can determine if it is a problem due to template customizations.