Announcement:Materials and articles for ProductCart 5 can be found at our brand new support center.

Create an account to edit articles | See Formatting Syntax for Wiki syntax | We look forward to your contribution!

Adding a Facebook Like Button to your storefront

How a "Like" button can help

Adding a Facebook Like Button to your storefront (e.g. your product pages) allows store visitors that use Facebook to let other Facebook users know that they liked what they found on your online store. Since this helps spread the word about your business, it can help generate additional traffic.

Learn more about the Like Button from the Facebook Developers Web site.

There are two versions of the Like Button code: one that uses an iFrame, and another one - more flexible - that uses the Facebook JavaScript SDK. We recommend using this second version, as it gives you more control on the button.

In either case, adding the Like Button to your ProductCart-powered storefront is quick and easy. Just follow the instructions below.

How to install it on the product details page

You can place the Like Button anywhere you like. You can also place multiple buttons on the same page. In this article, we will focus on showing you how to add the Like Button to the product details page, to the right of the product name, as shown in the image below.

Facebook Like Button added to the product details page

Step 1: Create an Application to get an APP ID

The JavaScript SDK requires that you submit an application ID to Facebook. Don't worry, this only takes a few seconds:

  • Create an application: as the URL, you can just use your domain, but you must place a ”/” at the end (e.g. www.myStore.com/)
  • Save the results in a safe place: you will need the APP ID in Step 2

Step 2: Load the Facebook JavaScript SDK

We will now add the JavaScript SDK to your ProductCart store. In order not to impact page loading time, we recommend using the asynchronous code, which you can find here. We are also pasting it below (current as of November, 2010). Replace “your app id” with your APP ID from Step 1.

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

To add the code to your ProductCart store:

  • Download the file ”inc_footer.asp” from the ”pc” folder using your favorite FTP software
  • Make a backup copy
  • Open the file in Notepad or your favorite HTML editor
  • Paste the code above at the very bottom of the file (remember to replace “your app id” with your APP ID from Step 1)
  • Save the file and upload it back to your Web server

Step 3: Add the Like Button

Now that the Facebook JavaScript SDK is being loaded in your storefront, you can load the Like Button anywhere you want. In this example, we will load it to the right of the product name on the product details page. When customers click on “Like”, the button will automatically “pass” to the customer's Facebook account the current page name.

  • Download the file ”viewPrdCode.asp” from the ”pc” folder using your favorite FTP software
  • Make a backup copy
  • Open the file in Notepad or your favorite HTML editor
  • Locate the code:
    Public Sub pcs_ProductName 
    %>
    <h1><%=pDescription%></h1>
    <%
    End Sub

  • Replace it with:

    Public Sub pcs_ProductName 
    %>
    <div style="float: right; padding-top: 10px;">
    <fb:like layout="button_count" width="50" font="tahoma"></fb:like>
    </div>
    <h1><%=pDescription%></h1>
    <%
    End Sub

  • Save the file and upload it back to your Web server
  • You're done! Load any product details page and the Like Button should be showing. It should look something like this:

Facebook Like Button added to the product details page

Styling the DIV: in the example above we floated the DIV to the right of the product name and added a bit of top padding to it. Of course, you can change this style in any way you wish. It doesn't affect the Like Button itself.

Step 4 (optional): change how it looks and works

There are many attributes that you can use to change the way the button looks and works. In the example above:

  • We set the font to “tahoma”
  • We set the width of the widget to 50 pixels
  • We chose the layout option “button_count”

You can learn about these and other attributes here. Use the configurator to see how the various options change the Like Button, then copy those attributes to the code used above.

Limited technical support

Please remember that in ProductCart technical support is limited to the software “as is”. Therefore, we do not provide technical support on implementing code changes such as the ones described on this page. The support is limited to the documentation itself.


QR Code
QR Code Adding a Facebook Like Button to your storefront (generated for current page)