Adding The New Facebook Like Button To Your Ecommerce / ShopSite Store

Facebook has recently announced their new “Like” button that can be added to any page. This is BIG NEWS in the Social Media arena, and since Facebook is on the same level as Google in terms of its popularity and use, it would be silly to ignore these new developments.

(See the bottom of this post for an example of the new FB like button that we integrated into our blog.)

How to Add the Facebook Like Button

Facebook provides Detailed Instructions on how to integrate the like button on your site. It’s as easy as adding a few lines of code that uses an Iframe tag to insert the button on any page, product page, blog post, etc… The instructions even have a code generator to provide you with the code.

It’s really that easy…

If you use the “AddThis” feature on your site, we have a blog post detailing integrating AddThis and Facebook as well.

Integrating the FB Like button with ShopSite ®

If you are using the ShopSite ecommerce software for your website, you can easily embed the button and automate it in a custom page/product template. Here are the steps:

  • 1. Go to the FB Instructions page and generate the code you want to display on any one page.
  • 2. Paste this code into your ShopSite template.
  • 3. To automate the page URL for the button on each page, replace the “xxx.html” filename in the FB code with the template tag:
    [– Page.Filename –]
    or for a more information product page, you can use:
    [– PRODUCT.MoreInformationFileName –]

Example:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.your_domain.com%2F[-- PAGE.Filename --]&layout=standard&show_faces=true&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px">
  • 4. If you want to control the title of the page, the name of your website, and an image that is used, add the “meta” elements to the region of your template. i.e.:
<meta property="og:title" content="[-- PAGE.Title --]"/>
<meta property="og:site_name" content="Your Site Name"/>
<meta property="og:image" content="http://www.your_domain.com/media/[-- IMAGE Product.Graphic --]"/>

That’s it. The new Facebook Like button will now appear on all of your ShopSite pages.  :)

Adding the Facebook Like Button to your WordPress Blog Posts

If you want to integrate the like button in your blog posts, you can edit the file “single.php” for your WP theme and add the following code that will automate the page URL in the iframe code:

="http://www.facebook.com/plugins/like.php?href=&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px">

Looking for a web host that understands ecommerce and business hosting?
Check us out today!

17 Comments

  1. Bottomless says:

    Here’s the best WordPress plugin around (full support for Open Graph, translated in 10 languages):
    http://wordpress.org/extend/plugins/like

  2. PowerStream says:

    I have implemented this idea on a couple of pages on our website, but I am now uncertain it is a good idea.

    A customer wrote to me
    complaing about their logo appearing on our web page.

    It turned out that they have facebook blocked at their company
    and replace links to facebook with their logo.

    My worry is that many companies block facebook, would they
    also block my pages that link to facebook’s “like” feature?

    Ouch!

    • Thanks for the real-world feedback. I doubt that your webpages would be blocked if a company/firewall is blocking facebook. It would just block the facebook code on that page from working.

      Since facebook code is on hundreds of thousands of websites these days, it’s very unlikely your website would be blocked for having the code on the page.

      • Baker says:

        Yes, it is true that if a company blocks their employees from accessing facebook.com that installing the FB Like button on your site can block at least the pages of your site that contain the FB button. This is true at least for the XFBML version. We don’t use the iframe version so I don’t know about that.

        This is happening to us and I found this thread in my search for a solution.

  3. Jason says:

    Thank you for the tutorial, extremely helpful. I’ve implemented on all my pages under the Add To Cart area. Example:
    http://www.houseofrave.com/portable-spot-light-battery-operated.html

  4. Dana says:

    Looks like this has become a little easier with Shopsite V10 SP2
    http://www.shopsite.com/templates/cookbook/tips-tags-10sp2.shtml

    We added the tags on our MoreInfo page and this is the result
    http://www.homehealthtesting.com/thyroid-tsh-test-p-37.html

  5. Henry Kelly says:

    I have implemented this as well. i also added the +1 button. This is a great addition to this tutorial.

  6. John says:

    It used to only have the facebook like link on blog pages and posts but now, google + buttons are now popular. I am at owe how social media networks are very influential with blogging.

    By the way. thanks for the tutorial. Keep posting useful articles such as this.

    Regards,
    John E. Schneider
    From Miami Diet Delivery

  7. BOB says:

    I was wondering how to do the Facebook Like Button, then discovered this page. Unfortunately when I clicked on the link:

    Update (4/28) – Ecommerce Developer put together a detailed Like Button Tutorial for Ecommerce Websites.

    I got a 404 error.

Leave a Reply to Rob Mangiafico