Add the Facebook Like Button to your Zen Cart store

Share via Twitter

Implementing Facebook social plugins can be a great way of promoting your online store to the 500 million people on Facebook, or at least a small slice

Before we get started, you might like to check out:

Here are the step-by-step instructions to add the Facebook Page Like Button to your Zen Cart store.

The Facebook Part

From the Facebook Developers website, navigate to the Like Box page (http://developers.facebook.com/docs/reference/plugins/like).
The Like Button can be customised to suit your Zen Cart store.
URL to Like: Leave this blank as Facebook will use the current page by default
Layout Style: There are three styles to choose from -

Standard displays social text to the right of the button and friends’ profile photos below.
Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos)

Button_count displays the total number of likes to the right of the button.
Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.

Box_count displays the total number of likes above the button.
Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.

Show Faces: Select whether you wish the profile pictures of the friends of users that have ‘Liked’ your page to be displayed. Profile photos are shown in the standard layout only.
Width: Set your desired width, keeping in mind the minimum width required for your selected layout style.
Verb to display: Select from like or recommend.
Font: Select from the available fonts or leave blank for the default.
Color Scheme: Select from light or dark to suit your Zen Cart store design
When you have your preferred settings, click the Get Code button. On the popscreen you will see that there are two code boxes. In this example we are going to use the code from the second XFBML box. Highlight the contents of this box and select Ctrl-C to copy (or right-click and select Copy).
Paste this code into a txt file and save to use later.

The Zen Cart Part

Firstly, we need to set up Zen Cart to define via the Open Graph Protocol how your page will be represented on Facebook. This is achieved through a series of meta tags that Facebook looks for in the header section of the page with the Like button.

Open the html_header.php file located in the includes/templates/template_default/common directory.

Locate this line of code (on line 43 for me):

<html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?>>

and update it to the following:

<html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?> xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">

Next, locate this line of code:

<title><?php echo META_TAG_TITLE; ?></title>

and insert the following code directly after:

<meta property="og:title" content="<?php echo META_TAG_FACEBOOK; ?>" />
<meta property="og:type" content="product" />
<meta property="og:url" content="<?php echo $canonicalLink; ?>" />
<meta property="og:description" content="<?php echo $meta_products_description; ?>" />
<meta property="og:site_name" content="<?php echo STORE_NAME; ?>" />
<meta property="fb:admins" content="ENTER YOUR FACEBOOK ADMIN ID HERE" />
<?php
  if (isset($_GET['products_id'])) { // use products_image if products_id exists
    $facebook_image = $db->Execute("select p.products_image from " . TABLE_PRODUCTS . " p where products_id='" . (int)$_GET['products_id'] . "'");
    $fb_image = HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_IMAGES . $facebook_image->fields['products_image'];
  }
  if ($fb_image == '') { // if no products image, use the default image if enabled
   $fb_image = 'http://www.store.com/includes/templates/template_default/images/logo.gif';
  }
  if ($fb_image != '') {
?>
<meta property="og:image" content="<?php echo $fb_image; ?>" />
<?php
  }
?>

Let’s have a look at each of the 7 meta tags we have set.
1. og:titleThe title property represents the title of the page the user has clicked the ‘Like’ button on. In most cases the og:title property would be set to use the same as the page title as set in the <head> section of the page. For a product page of a Zen Cart store the default page title is set to use Product Name [Product Model] – Price : Title, Tagline. I personally think this is a bit much and so prefer to set up a specific define, META_TAG_FACEBOOK, to use for Facebook. However, you may prefer to use META_TAG_TITLE instead.
2. og:typeThe type of your object, e.g., “album”, “book” or “product”. See the complete list of supported types on the Facebook Developer site. To keep our implementation relatively simple we are going to use “product” for our Zen Cart store.
3. og:urlThe canonical URL of your object that will be used as its permanent ID. Zen Cart will provide this dynamically if you use $canonicalLink for this property.
4. og:descriptionThe description should be a one to two sentence description of your page and again Zen Cart will provide this dynamically if you use $meta_products_description for this property.
5. og:site_nameA human-readable name for your site. Zen Cart again makes this easy – just use STORE_NAME for your store name to be provided dynamically.
6. og:adminsYou will need to enter your Facebook user ID for this property. This connects your Zen Cart store with your Facebook user ID and will enable you to view statistics about the interaction and engagement Facebook users have had with your store via Facebook Insights.
7. og:imageThis property sets the image that will be shown as a thumbnail in the Facebook News Feed. If you don’t set a specific image to use, Facebook will select an image from the page and this could end up being any image on the page. The code we are using, provided by Numinix, will select the product image if the page is a product page. If not, we can set a generic image to use. I would recommend you use your store’s logo image in this case. Modify the property to include the correct URL or path to your store’s logo image.
Save the modified html_header.php file to your override folder. This will be /includes/templates/CUSTOM/common, where CUSTOM represents the name of your current template folder.
Test your changes so far by visiting a product page and then viewing it’s source. You should see the Facebook Open Graph properties displayed:

Next, we need to make some changes so that our new META_TAG_FACEBOOK is generated.

Download a copy of my modified meta_tags.php file to use.
Using your favourite FTP program, upload this file to includes/modules/CUSTOM/ where CUSTOM represents the name of your current template folder.

And as we are using the XFBML version of the Facebook Like Button in order to take advantage of the additional features, we also need to add support for XFBML to our Zen Cart store. The JavaScript SDK enables you to access all of the features of the Graph API and Dialogs via JavaScript.

Open up tpl_main_page.php file from includes/templates/template_default/common directory. Scroll to the end of the file – the last line will be:
```
</body>
```

Just before this last line, add the following code:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '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>

Save the modified tpl_main_page.php file to your override folder. This will be /includes/templates/CUSTOM/ where CUSTOM represents the name of your current template folder.

Finally we get to add the Facebook Like Button to our Zen Cart product pages and any other store pages you wish. For example, if you have EZ pages for helpful product user guides or background stories on how your products are created, these are also great candidates for the Facebook Like button.

1. Open the tpl_product_info_display.php file located in the /includes/templates/template_default/templates/ directory.
2. Find this line:
```

```
3. and insert your XFBML code from the first stage to a new line just below:
```
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like show_faces="false" width="450"></fb:like>
```
4. Save the modified tpl_product_info_display.php file to your override folder. This will be /includes/templates/CUSTOM/templates/ where CUSTOM represents the name of your current template folder.

Now, it’s time to test! Click on the Like button on one of your product pages (both with and without leaving a comment) so you are familiar with how the integration of the Like button works with your Zen Cart store.

Don’t forget to come and visit me on Facebook, especially if you ‘Like’ this tutorial

Free download: Zen Cart Pre-launch Checklist
Are you ready to launch your new online store? The Zen Cart Pre-launch Checklist has been developed to assist Zen Cart store owners preparing to launch their store. Avoid making any of these common mistakes before you go live. Download the Zen Cart Pre-launch Checklist

facebook, facebook like button, online store promotion

This entry was posted on 27 November, 2010, 5:45 pm and is filed under Online Store Marketing and Promotions. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

Zen Cart – The Art of E-Commerce

Zen Cart™ (http://www.zen-cart.com) is a free, user-friendly, open source shopping cart system. It gives web designers and online store owners a robust and customisable electronic storefront that’s easy to keep up-to-date with new features.

Zen Cart provides usable, intuitive and unobtrusive purchase flows right out of the box based on proven industry best-practices.

A powerful feature of Zen Cart is a robust template system that “abstracts” the look-and-feel from the code and logic behind Zen Cart.

#1 by Numinix on 3 December, 2010 - 4:24 pm

We have a module available here for FREE which does exactly what you’ve listed!

http://www.numinix.com/zen-cart-modules/social-networking/facebook-like-button

It also needs this module installed one time to add the meta data:

http://www.numinix.com/zen-cart-modules/social-networking/facebook-open-graph

Enjoy!

Quote

#2 by Aneftaoratos on 5 January, 2011 - 8:53 am

Hi Kerrin,
Thank you for this excellent addon!

Everything works fine except one thing:
I cannot post any link to my facebook wall that comes from my site.
The message from facebook says: “Could not post to Wall:
The message could not be posted to this Wall.”

I can only post links if and only if I uninstall the Facebook like button.
I dont’t understand what is the problem

Can you please help?

#3 by Aneftaoratos on 5 January, 2011 - 9:02 am

Additionally the number of “likes” doesn;t count every product’s click separately.Is it correct or I missed something ?

#4 by kerrin hardy on 3 March, 2011 - 5:57 pm

@Aneftaoratos With regards to the “Could not post to wall” error messages, this could be related to your Facebook security/privacy settings. For example, do you allow other people to post on your wall? This could be the case even though you allow comments to your own posts on your wall.

#5 by lindanewbie on 10 March, 2011 - 12:58 pm

Hi there…After installation, firefox, chrome and safari working great except for IE. I have this problem ‘JSON’ undefined Code:0

After i remove html_header.php there is no more error.
Why is that so?

#6 by kerrin hardy on 3 April, 2011 - 5:51 pm

@lindanewbie – I don’t believe that’s a Zencart issue, rather it’s an issue with Internet Explorer. From what I’ve read it is either a certificate that has got messed up (in this case it might be the Facebook certificate) or that some other software has messed things up (for example DivX – http://winmike.blogspot.com/2011/01/json-is-undefined-error-after-you.html).

You could try deleting the certificates that IE stores and trying your site again.

#7 by Claire on 8 May, 2011 - 10:48 pm

Hi this is great except I get the following error when I try to like something on my zencart site.
You failed to provide a valid list of administrators. You need to supply the administrators using either a “fb:app_id” meta tag or a “fb:admins” meta tag to specify a comma-delimited list of Facebook users.

#8 by Claire on 9 May, 2011 - 4:55 am

I finally figured out how to get my Admin ID from facebook and included it in the page. The only problem now is that when I click like the product picture does not show, instead it posts a picture of my “listing” button from my product info page….Am I doing something wrong?

#9 by kerrin hardy on 13 May, 2011 - 12:54 pm

Claire, have you included this part?
Execute("select p.products_image from " . TABLE_PRODUCTS . " p where products_id='" . (int)$_GET['products_id'] . "'"); $fb_image = HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_IMAGES . $facebook_image->fields['products_image']; } if ($fb_image == '') { // if no products image, use the default image if enabled $fb_image = 'http://www.store.com/includes/templates/template_default/images/logo.gif'; } if ($fb_image != '') { ?> <meta property="og:image" content="" />
in the html_header file?

Basically, this code says to the Facebook code, use the product image if the Like button is on a product page, else use the default image specified. You need to modify this line:
if ($fb_image == '') { // if no products image, use the default image if enabled $fb_image = 'http://www.store.com/includes/templates/template_default/images/logo.gif';
to the correct URL for your store’s logo or alternative default image.

#10 by Got Toast Natural Dog Treats and Cool pet gifts on 11 June, 2011 - 11:38 am

Any idea how to set it to post to the facebook fan page instead of the admin’s personal page? I tried to put the id for the fan page in that I am the owner of however it says its invalid however I am put the admins personal page id it works fine….

Clear as mud?

#11 by kerrin hardy on 13 June, 2011 - 12:38 pm

Have you ‘liked’ your own page? From Facebook: Each listed user must click Like on the URL to be approved as an admin. This is to prevent users being made admins without their consent.

Just to clarify though, when you set up a Facebook Like button on your site, it is for people to Like a page on your site. When someone clicks on the Like button, it increases the number of likes on that page and it also appears on their own wall with something like this (if they also leave a comment).

This is great as all their friends will see that they have liked something on your store.

So, if you are logged in as yourself, and you like a page on your store, that same type of entry will appear on your wall. It just so happens that you are also the Admin. If I clicked Like on one of your product pages it would appear on my wall. It looks like you’ve removed it from your store now, but if you want to put it back I could Like a couple of products to help test the setup.

Hope this helps,
Kerrin

#12 by Zennoob on 29 September, 2011 - 11:44 am

Hi Kerrin,
Great instructions! I tried to put Like button on product page but since I have facebook link button on the right column showing all the time, I decided to just have Like button for the main page (for online store – not each product) by inserting iframe at footer.
Now, I am trying to link/track this like button in my facebook fanpage “Insights” area and I was just wondering, if you could tell me where (which override file) to put facebook in zencart… I’ve got this code at http://www.facebook.com/insights but
I am not sure where to put it. Also, could you tell me if any code should go before and after this so I could properly insert this on my facebook main area and facebook can track my store like button. Any help will be appreciated. Thanks!!

#13 by Zennoob on 5 October, 2011 - 1:24 am

Hi there,
Just in case my post wasn’t clear, I got this code following this instruction (http://www.wisnet.com/noteworthy/using-facebook-insights-to-track-the-like-button-box-and-shares/0/0/447/).

I would like to know where (which file) I could put this meta tag on my zencart store and if I also need something before and after to properly insert this code.

Thanks in advance!

#14 by Andy Foster on 16 November, 2011 - 10:28 pm

HI Kerrin
Thanks for this – but have Facebook altered their like button code stuff? When I ‘get the code’ a different looking box comes up with three separate areas of code for XFBML,
first section telling me to include the javascript SDK in the html ,

the second box telling me to add xmlns:fb=”http://ogp.me/ns/fb#”(as opposed to your code, which reads
xmlns:fb=”http://www.facebook.com/2008/fbml”

and the third box telling me to put this code wherever I want the plugin to appear:

So this 3rd one appears to be half of the last bit of code you mentioned for the tpl_product_info_display.php file Do I need to enter the first or second boxes of code in the same page or in the tpl_header or html_header files?

This is all greek to me, so FB not showing the same code as you have put up is confusing the hell out of me…I think they have altered their like button code since you did this page?
Any help appreicated!
ta
Andy

#15 by tcladin on 12 December, 2011 - 9:31 am

HI Kerrin
i have big trouble with OG.
i put tags in header, but image still missing.
i try use some tool https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fdobretabaky.cz%2Findex.php%3Fmain_page%3Dproduct_info%26cPath%3D28%26products_id%3D83
I changed type from product to website, because product give fatal erros. but still unsuccess with image
than for help

#16 by Emily on 15 February, 2012 - 4:44 pm

Hi Kerrin,

I have same problem as #14 by Andy Foster on 16 November, 2011 – 10:28 pm!!

When I ‘get the code’ a different looking box comes up with three separate areas of code for XFBML,
first section telling me to include the javascript SDK in the html ,

Can you please help!!

#17 by jeff on 17 April, 2012 - 12:47 am

I am getting the following error. “The page failed to provide a valid list of administrators. It needs to specify the administrators using either a “fb:app_id” meta tag, or using a “fb:admins” meta tag to specify a comma-delimited list of Facebook users.”

#18 by Jessica on 25 April, 2012 - 4:03 am

@Jeff, in the code on step 5 “The Zen Cart Part” you need to add your Facebook Admin Id.

#19 by Jessica on 25 April, 2012 - 4:04 am

For those of you having problems recently, I have found a solution, I am not a programmer by any means, but I completed the following steps and was successful.

Follow “The Facebook Part”
When you get to Step 3, the code is now different. When you click “XFBML” There are now 3 boxes of code. You will use all three.

The “Zen Cart Part”

Follow steps 1 and 2.

Step 3: Change the code to the following:

(This code is from the XFBML Box #2)

Follow the remaining steps until you get to:

“2. Just before this last line, add the following code:”

Instead of the code above, enter this code to “tpl_main_page.php”:

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

(This code is from the XFBML Box #1)

And Lastly:

Use the code from Box #3 in “tpl_product_info_display.php”

This was my code:

Note: I didn’t use I just copied and pasted the code from Box #3 into my tpl_product_info_display.php file.

After I followed these steps I checked for errors here:
https://developers.facebook.com/tools/debug

No problems! Hope this helps someone!

#20 by Faith on 22 January, 2013 - 9:00 pm

I’ve tried the steps carefully and it looks good on my webpage. However, it just doesn’t show on my facebook, no where I can find it, neither on news nor profile page.

When I checked my errors at https://developers.facebook.com/tools/debug
it said,
Object Invalid Value: Object at URL ‘http://my webpage’ of type ‘product’ is invalid because the given value ” for property ‘og:url’ could not be parsed as type ‘url’.

What does it mean and how to fix this? Thanks!

#21 by tom on 21 February, 2013 - 12:02 pm

got everything working properly on localhost within a VM, uploaded everything, tested, appeared to work fine, then it would NOT work from any browser that is not inside my local VM!!!
debugging with FB’s debug says it works properly.
but the buttons etc. do not appear…
ANY suggestions??
thank you, tom

#22 by Alex on 18 March, 2013 - 9:13 pm

Hi,

I’ve installed the numinix open graph module which basically does the same thing as you proposed.
The only problem is that in facebook debug none of my urls(www.regatuljocurilor.ro) are parsed although looking at the source code of the pages I can see the new mega data for open graph.

Is there something that I’m missing?

Regards,
Alex

#23 by Gabriel on 29 March, 2013 - 3:33 am

Thanks for the description!

For some reason returns an empty link. Any idea why?

Thanks
gabi

#24 by Kevin on 18 April, 2013 - 1:09 am

Hello Kerrin, I added your mod to zen 1.5.1, I am not getting any errors.

The only problem I have is the Like button does not show up every time. It comes and goes. But once it shows up, it is functional.

Sometime it shows up by a page refresh.

So I don’t know what I have done wrong?