View Single Post
  #1  
Old June 22nd, 2012, 08:49 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 your category pages

In this tutorial I will show you how to add the Facebook Like button to your category pages. This is just for adding a single Like button to the category page, not for adding a Like button to every product on the category page. If you want to add a Like button to every product on a category page, please follow this tutorial.

Requirements:
  • You must be using version 3.8 or greater of the Datafeedr plugin.
  • You must have an image or thumbnail for each category in your store.

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:
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>

<div class="fb-like" data-href="<?php echo datafeedr_tools()->current_url(); ?>" data-send="true" data-width="450" data-show-faces="true"></div>
5. Save the Text Module.

6. Go to the View menu. From the drop down list, choose "View <head> Elements".



7. Paste the following code into the <head> element area:
HTML Code:
<meta property="og:image" content="[category.image]" />
Note that in this example, I am sending Facebook my Category Image. If you wish to send Facebook your Category Thumbnail, change [category.image] to [category.thumbnail].

8. Save.

9. Go here: WordPress Admin Area > Tools > Datafeedr

10. Click the [Update Settings Only] button.

Now a Facebook Like button should appear 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