How to Add the Facebook “Like” Button for TomatoCart

There are currently more than 500 million active users spending over 700 billion minutes per month on Facebook, according to Facebook’s own data.

To convert those users into customers, you can add a “Like” button with Facebook’s API.

It only takes a few minutes to tap into the Facebook community.

Step 1. Update Your Template’s Metadata

Firstly, you will want to include several lines of metadata in your page template.

Using a file manager tool in TomatoCart, you can easily add code. In the admin panel, go to Start->Tools->File Manager. On the left hand side, select the file you want to edit. To add metadata, we select templates/glass_gray/index.php

Click the edit button and add the code after the <head> tag:

<meta property="og:title" content="<?php echo $osC_Template->getMetaPageTitle(); ?>" /> <!-- this code retrieves the post title-->
<meta property="og:site_name" content="<?php echo STORE_NAME; ?>"/><!-- yout sotre name-->

For the more information about meta tag, click here.

 

Step 2. Add the “Like” Button

There are two Like button implementations: XFBML and Iframe. The XFBML version is more versatile, but requires use of the JavaScript SDK. It is best to use the XFBML approach. To add the button to a product’s info page, you need to edit the  templates/glass_gray/content.products/info.php  file:

Add the code:

<tr>
<td colspan="2">
<fb:like href="" layout="standard" show_faces="true" width="270" action="like" font="segoe ui" colorscheme="light" />
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true  // parse XFBML
});
</script>
</td>
</tr>

After:

<tr>
<td colspan="2">
<p><?php echo $osC_Product->getShortDescription(); ?></p>
</td>
</tr>

You can generate this code here.

That is all! The “Like” button has been added to your product info page!

Looking for quality TomatoCart Hosting? Look no further than Arvixe Web Hosting.

Tags: , , , , , , , , | Posted under cPanel/Linux Hosting, TomatoCart | RSS 2.0

Author Spotlight

Kemin Bao

As a php professional, I have much experience in open-source shopping cart solutions, such as tomatocart and opencart, and master the framework of tomatocart and opencart. Except php, I am also accomplished in the front-end technique, such as html, css and jQuery. I have built two templates websites for tomatocart and opencart, and made all templates in the websites, www.tomthemes.com and www.bestopencarttemplates.com .Now I am making plugins for tomaotcart, such as mega menu, ajax-login, ajax-register, facebook and etc.

8 Comments on How to Add the Facebook “Like” Button for TomatoCart

  1. John says:

    Using the code provided, I am having an issue with it generating the meta page title and store name. The button itself works great, and post to FB….just not getting the meta info with it. Any suggestions?

    • Kemin Bao says:

      Hi John,
      sorry for late reply,
      i checked the code and found the problem. There are some errors with the meta code.
      You can try the below code again.

  2. Annette says:

    i have an issue it shows in every browser bar ie

  3. Kyoichi says:

    anyway to remove “Be the first of your friends to like this”

  4. Jarik Oosting says:

    @Kyoichi: Change layout=”standard” in layout=”button_count” or layout=”box_count”

  5. allsaints says:

    My spouse and I stumbled over here by a different page and thought I may as well check things out. I like what I see so now i am following you. Look forward to looking into your web page for a second time.

  6. kiko says:

    It is true that the button “like” appears but when I click the page bouttom fb is “TomatoCart” but I want her to be the society page of the site. Please help me this is urgent.

Leave a Reply

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


× 5 = 40

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