Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Tips, Tricks & Tutorials
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
Prev Previous Post   Next Post Next
  #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
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Facebook Like Button - Adding a like button to your product detail pages Eric Tips, Tricks & Tutorials 35 November 25th, 2014 10:22 AM
Facebook Like Button - Adding a like button to your store's front page Eric Tips, Tricks & Tutorials 2 March 13th, 2014 06:23 PM
Add Facebook Like Button to Product Detail Page Eric Tips, Tricks & Tutorials 36 November 17th, 2012 04:08 AM
Facebook Like Button - Adding a like button to your category pages Eric Tips, Tricks & Tutorials 6 July 1st, 2012 08:48 AM
Adding a back button to your Product Detail page ayorofrance Tips, Tricks & Tutorials 9 June 2nd, 2011 11:09 AM


All times are GMT -5. The time now is 01:01 PM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.