Add Facebook ‘Like’ button to your Zen Cart product pages

May 3, 2010 in Zen Cart Customization, Zen Cart Guides

Is this useful? Like it.

It is fast and easy to add the Facebook ‘Like’ button to all your product info pages. This ‘Like’ button is part of the new Facebook widgets or Social Plug-ins.

The only Zen Cart file involved is the tpl_product_info_display.php file — and you do not need to do any editing, just get the file from here.

Facebook Like button on product page

Facebook Like button on product page

Steps

  1. Click here to download the tpl_product_info_display.php for Zen Cart 1.3.8, 1.3.9a and 1.3.9b.
    Click here to download the tpl_product_info_display.php for Zen Cart 1.3.9c, 1.3.9d, 1.3.9e, 1.3.9f, 1.3.9g and 1.3.9h..
  2. Unzip and save the file to your computer, then upload to:
    \includes\templates\CUSTOM_TEMPLATE\templates\
    Where CUSTOM_TEMPLATE is the folder name of the current template you are using.

Important note

If you already have the tpl_product_info_display.php file in your custom template’s folder, DO NOT overwrite your file. You need to manually add the Facebook code to your file. Just open the file downloaded from here, copy line 19 (the whole section of the “iframe” code), then paste to your file at about the same line location.

If you use any of our premium template, then you do not have to worry about this, just follow the STEPS section above. (unless you have separately installed any module that modifies the tpl_product_info_display.php file)

Facebook code at line 19

Facebook code at line 19

Customization

The Facebook plug-in code added to the Zen Cart file was obtained from Facebook (have a look, but you do not need to get the code from there).

As you can see from the code screenshot above, there are a few parameters that you may want to change:

  1. show_faces=false — Change to true if you want the widget to display the thumbnail photos of those who have ‘liked’ your product.
  2. colorscheme=light – Change to dark if your page is dark in color.
  3. height:40px — This was arbitrarily choosen. If you choose to display ‘faces’, then you should increase the height of the widget (80px or more).

Compatibility: Zen Cart 1.3.8, 1.3.9a/b/c/d/e/f/g/h

Premium Zen Cart templates from $22 only. Guaranteed unbeatable value! Give your business an advantage over others! Click to see now!

Bookmark and Share

Comments

35 Responses to “Add Facebook ‘Like’ button to your Zen Cart product pages”

  1. flexiblelove canada on December 1st, 2010 6:03 am

    thanks for sharing! added this to my site, works great, but after i click ‘like’ and refresh the page, there is the facebook logo, a lot of space, and then it says ‘likes this’.

    any resolution to this?

  2. flexiblelove canada on December 1st, 2010 6:05 am

    EDIT: i think it’s an issue with chrome – tested on other browsers and works fine.

    thanks again!

  3. admin on December 1st, 2010 10:57 am

    flexiblelove canada,

    It is not “a lot of space”, it is the link with facebook name of the person who liked the product. Somehow it is displayed in WHITE color text, that’s why you see it as space.

    You need to check which part of your CSS affected the link color or what you have edited in the Facebook code.

  4. flexiblelove canada on December 1st, 2010 11:32 am

    aha, don’t i feel like the fool. changed the font back to ‘light’ and works like a charm. thanks for the follow up! appreciate it!

  5. Alex on December 14th, 2010 6:03 pm

    Great post. But I’m having problem in pressing the “Like” button. DOesn’t seem to work. You can have a look at a site I did for a friend of mine here.. http://happyhomey.cz.cc//index.php?main_page=product_info&cPath=1_2&products_id=13

  6. admin on December 14th, 2010 7:04 pm

    Alex,

    It seems Facebook rejects/bans the co.cc domain. I think this extends to cz.cc domain as well.

    For more info google for “facebook .co.cc domain“.

  7. Alex on December 14th, 2010 7:46 pm

    I see. Didn’t know that. Will inform my friend about it then. Thanks again.

  8. Jackie on December 16th, 2010 7:50 am

    Thank you for sharing this code! Mine seems to be working fine, except when I “Like” one of my products from my site, sometimes another product photo will show up on my Facebook page. Do you know any fixes for this problem?

  9. admin on December 16th, 2010 11:14 am

    Jackie,

    Your site works fine for me. Facebook page does not display any picture of the links you like… but if any picture is displayed, it will just pick one to display, as Facebook won’t know which is the actual image.

    Anyway, this is at Facebook side, so we have no control over it.

  10. reece on January 15th, 2011 8:10 am

    i have integrated the like button to my products and it works but wonder if anyone can help…
    first thing, when someone likes a product it doesnt appear in their ‘news feed’ but only on their profile?
    second thing, is there a way to have a picture displayed on their profile/news feed when the click like. either a picture of the product or a stock photo i.e logo or whatever?
    many thanks :)
    Reece

  11. admin on January 15th, 2011 11:02 am

    Reece,

    Yes, that’s how it works.

    How it is displayed on the Facebook site is controlled only by Facebook. You can’t control that :)

  12. Partygirl on February 2nd, 2011 9:02 pm

    Newbie to all this and may seem dumb question but do I need to do anything other than upload the php file to the server? i.e change any other files?? Haven’t done anything as yet in case it affects my existing website! Thanks

  13. admin on February 2nd, 2011 9:38 pm

    It’s just one file. Just follow the steps above.
    If you need to overwrite the file, download the original file from your server as backup.

    It won’t affect your site. But if there is mistake you can just upload the original file.

  14. Chloe on February 3rd, 2011 4:49 am

    Is there anyway to see the stats of which products are most “liked”?

    Thanks for the code by the way!

  15. admin on February 3rd, 2011 11:01 am

    Chloe,

    No.

  16. Sam on April 19th, 2011 9:10 pm

    Awesome! thanks!
    is there anyway to make it appear at the bottom of the product listing? makes it easier to see for the customers =)

  17. Sam on April 19th, 2011 9:11 pm

    pls disregard my previous request….guess it really depends on how the template is set up =)

  18. admin on April 19th, 2011 9:13 pm

    Sam,

    The above serves only as an example. You can put the code anywhere you like in the file. Just experiment with it.

  19. Claire on May 8th, 2011 6:02 am

    Hi I installed your code into my site for some strange reason though when I click like on a product it shows my listing button from my product page on my facebook profile, is it possible to have it show a logo or something instead, I don’t understand why it is showing a button from my site :-S

  20. admin on May 8th, 2011 11:27 am

    Yup, FB will choose an image from your page to be used, but it does not know which image.. so sometimes it may be not the image you want. The code can’t control that.

  21. Francine on June 2nd, 2011 2:19 am

    Thanks so much for this…it is now on my website store.

  22. Russ on July 3rd, 2011 6:43 am

    Thanks for a quick, easy solution. I’m having a little problem, though. I dropped it in to my sandbox site and it works perfectly:

    http://www.oozix.com/store

    But, when I dropped it in to one of my live sites, clicking the button doesn’t “like” the item:

    http://www.rescoccc.com

    Both are 1.38. Any ideas?

  23. Russ on July 3rd, 2011 7:02 am

    Update to the above. Now it appears to be working on the live site. Mostly, anyway. Good enough. Thanks!

  24. Carlito's Way on July 12th, 2011 4:25 am

    have a problem, the button works like spected, but when you like something it shows a pic from the footer of the site instead of the products image, any workaround on this one?

    Forgive the bad english

  25. admin on July 12th, 2011 11:35 am

    Carlito’s Way,

    When the link is displayed in Facebook, it only knows the link. Facebook does not know what is the picture and may just randomly choose a picture to display. This is out of your control.

  26. Migue castel on October 6th, 2011 9:25 am

    Excellent thanks!!!

  27. Deb on November 27th, 2011 12:29 pm

    I followed your instructions but see no like buttons on any of my pages. I’m using your Free Zen Cart Template 1, but have modified it. Is there something in the Admin area I should look for? Maybe I turned off something that is preventing the like button from loading.

  28. admin on November 27th, 2011 1:35 pm

    Deb,

    There is nothing special about the code. Just HTML added to the template file. No need to change anything in your admin area.

    Check you have used the correct file tpl_product_info_display.php. If you got this file from your default template, you need to copy this file to your CUSTOM TEMPLATE folder… do not edit the original file from the default template.

  29. Deb on November 28th, 2011 5:37 am

    Thanks for the info. This time, instead of just uploading yuor file to my folder, I copied the one from my default folder and then pasted the iframe code.

    Still no luck.

  30. Deb on November 28th, 2011 1:45 pm

    I figured it out — I have set all my products to “free shipping” so instead of pasting the code in tpl_product_info_display.php I tried pasting it in tpl_product_free_shipping_info_display.php and it worked like a charm!

  31. Vee on December 4th, 2011 11:18 am

    I uploaded your file to my

    includes/templates/purpleshades/

    Doesn’t seem to be working :-\

    http://www.kewtgifts.com

  32. admin on December 4th, 2011 11:25 am

    Vee,

    It should be:
    includes/templates/purpleshades/templates/

  33. Vee on December 4th, 2011 12:12 pm

    OOh you are a doll, thank you so much!

  34. Sajid on February 3rd, 2012 12:50 pm

    Hi ,

    Tried, all working ….except the product image.
    FB posting is displayed without the product image…Any suggestions..

  35. admin on February 3rd, 2012 1:29 pm

    Image can’t be controlled. See reply July 12th, 2011 above.

Leave a Reply





Zen Cart Templates

Premium 1 Series ($22~25)

Premium 2 Series ($26)

Premium 3 Series ($29)

Premium 4 Series ($28)

Premium 5 Series ($30)

Premium 6 Series ($30)

Premium 7 Series ($35)

Premium 8 Series ($40)

Premium 9 Series ($35)

7 Days A Week E-mail Support