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!
Here are a few popular WordPress plugins for the new Facebook Like Button:
http://wordpress.org/extend/plugins/facebook-like-button/
http://wordpress.org/extend/plugins/simple-facebook-connect/
http://wordpress.org/extend/plugins/facebook-like-button-plugin/
Here’s the best WordPress plugin around (full support for Open Graph, translated in 10 languages):
http://wordpress.org/extend/plugins/like
Thanks for the link. Looks to be quite a full featured plugin.
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.
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.
Good to know! If you find out about the iframe version, please report back.
When using iframe, only the iframe is blocked, not the whole page.
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
Looks good Jason! Glad you found the post useful.
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
Thanks Dana for posting the details for ShopSite. Yes, the new tag makes it much easier.
I have implemented this as well. i also added the +1 button. This is a great addition to this tutorial.
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
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.
Thanks for the heads up. We removed the link.