Add the Facebook Like Button to your Zen Cart store


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

  1. From the Facebook Developers website, navigate to the Like Box page (http://developers.facebook.com/docs/reference/plugins/like).
  2. 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)
    image
    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.
    image
    Box_count displays the total number of likes above the button.
    Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
    image

    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

    Facebook Like Box settings

  3. 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).
    image
  4. Paste this code into a txt file and save to use later.

The Zen Cart Part

Zen Cart Product 'Liked' on Facebook with comment

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.

  1. Open the html_header.php file located in the includes/templates/template_default/common directory.
  2. Locate this line of code (on line 43 for me):
    <html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?>>
  3. 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">
  4. Next, locate this line of code:
    <title><?php echo META_TAG_TITLE; ?></title>
  5. 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
      }
    ?>
  6. 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.
  7. 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.
  8. 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:
    Facebook Open Graph Protocol - Zen Cart Store

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

  1. Download a copy of my modified meta_tags.php file to use.
  2. 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.

  1. 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>
  2. 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>
  3. 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:
      <!--eof free ship icon  -->
    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 🙂

, ,


Fatal error: Call to undefined function related_posts() in /home/kh1297/public_html/kerrinhardy.com/wp-content/themes/fusion/single.php on line 134