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.
Update (4/28) – Ecommerce Developer put together a detailed Like Button Tutorial for Ecommerce Websites.
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 --]
<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"></iframe>
- 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 <head> 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:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&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"></iframe>