View Single Post
  #1  
Old June 22nd, 2012, 09:12 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default Facebook Like Button - Adding a like button to each product on the category page

In this tutorial I will show you how to add the Facebook Like button to each product on your category pages. To add 1 Like button to your category pages, see this tutorial.

Requirements:
  • You must be using version 3.8 or greater of the Datafeedr plugin.
  • You must be comfortable editing HTML and CSS. The changes in this tutorial may break your layout if you are not familiar with HTML and CSS.

1. Go here: The Factory > Your Store > VIEWS > CATEGORY PAGE > Default

2. Add a new Text Module to the category page view.

3. Click the theme icon ( ) for the new Text Module.

4. Paste the following code into the Text Module (if the following code does not already exist because you did this tutorial):

HTML Code:
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
5. Save the Text Module.

6. Click the theme icon ( ) for the Product list module.

7. Paste the following code where you want the Like button to appear:

HTML Code:
<div class="fb-like" data-href="<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . '/' . $product->site_link); ?>" data-send="true" data-layout="button_count" data-show-faces="true"></div>
NOTE: This code must be placed between the [product.each] and [product.end] tags. If it's placed outside of those tags, this will not work.

ADDITIONAL NOTE: This is a small version of the Like/Send buttons. You can further customize the layout of this button and read how to configure it more here under Step 1 - Get Like Button Code.


8. Save the Product list module.

9. Go here: The Factory > Your Store > VIEWS > PRODUCT DETAIL > Default

10. Follow Steps 7 ~ 10 from this page.

Now a Facebook Like button should appear for every product on your category pages.

You can further configure the Like/Send button by following the tutorial here (under Step 1 - Get Like Button Code): http://developers.facebook.com/docs/.../plugins/like/

Eric