Hire an Agile Team for your business

Create your own agile squad with experienced members for your business.

Connect with Experts

How to Add a Facebook Like Button to Your Zen Cart Product Pages

Last Updated on Mar 13, 2020 by Numinix Developer

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="https://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.

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?

    Thanks!

    Brian


    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.


  2. 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.


  3. I tired the code and nothing appeared on my website. i have done it several time and no like button is appearing. I use a zen cart. there are all sort of examples out there on how to add a facebook like button, i have tried them all and still can’t see the like button on my website. can anyone help???????


  4. Pingback: Add the Facebook Like Button to your Zen Cart store | kerrinhardy.com


  5. If you have previously used this implementation guide and are now using our mod, you will need to undo the edits outlined in this tutorial or it will result in duplicated meta data. Also, if the og:url is coming up blank in the meta, check your settings for canonical URLs. If using the canonical URL, you must have Zen Cart 1.3.9 installed.


  6. Does anyone have a complete code with necessary modification that makes this work? Also, how do I remove the cPath from the url generate so url is in the form url/index.php?main_page=product_info&products_id=70904 NOT url/index.php?main_page=product_info&cPath=329_354&products_id=70904

    Thanks!



  7. Your a star numinix,
    I’ve been wrecking my head with this for a couple of days (specifically the image getting posted at facebook) and then someone from the zen-cart forum pointed me to your blog and hey presto…she’s working perfectly.
    Thanks!

    See the evidence here: store.theebooksale.com



  8. Hi, thank you for those bits of code. I have a quick question: when I clicked on first product on my website I got this: xxxxx likes Daisy Basket on Needlegraphy. But when I clicked on more products I simply got just: xxxxx likes Dahlia Basket , xxxxx likes Rose Bouquet etc. Could anyone tell me why I don’t get “on Needlegraphy” every time? Does it work for first product only? Or something needs to be changed in those codes?
    Many thanks!






  9. I got the Like button to show however it says ‘Be the first of your friends to like this. · Error’ When I click on ‘Error’ it tells me

    You must specify an “href” attribute to the iframe. Something like “iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Ffoo%2Fbar.html””””/iframe”

    If I click ‘Like’ first then click ‘Error’ I get

    ‘You must specify a URL as part of this widget or API.’

    I am using the XFBML version and have an API ID (hopefully i did that right on Facebook).


    1. You may need to add this property to your header:
      Then modify the block of code in html_header.php to match the newly updated code (just added the property og:url).




  10. A quick update – I figured out what was causing the Firefox error – for the Like button to work, Firefox users need to have ‘Accept third-party cookies’ selected in their Privacy settings. I had mine de-selected and that was causing the redirect loop.


  11. Thanks very much – this is the simplest explanation I’ve come across.

    I’m trying out the iframe method on my website and I’ve noticed that it doesn’t work in Firefox – clicking the Like button just results in an infinite redirect loop. I’ve tested the Like button on this page and the same problem occurs. There doesn’t seem to be any solution out there as yet.

    Also, when I hover over a button that I’ve ‘liked’ it only shows the product name and not the store name – have I put the meta data in the wrong place?





Leave a Reply

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

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