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="<?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']); ?>" />
     $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>
 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 +
<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.

26 thoughts on “How to Add a Facebook Like Button to Your Zen Cart Product Pages

  1. 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?



    1. You can try it. We can’t do that in our mod though since we need it to work on all websites, including those that have been significantly modified.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Contact Account Cart Search Cart Open Menu Arrow Link Arrow Chat Close Close Popup Facebook Twitter Google Plus linkedin2
    Add a Facebook Like Button to Zen Cart Product Pages