View Single Post
  #1  
Old June 22nd, 2012, 08:43 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 product detail pages

In this tutorial I will show you how to add the Facebook Like button to your product detail pages.

Requirements:
  • You must be using version 3.8 or greater of the Datafeedr plugin

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

2. Add a new Text Module to the product detail 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="http://<?php echo $_SERVER['HTTP_HOST']; ?>[product.image tag='0']" />
<meta property="og:title" content="[product.name]" />
Note that in this example, we are passing the full size image to Facebook. If you wish to pass the thumbnail to Facebook, you should change [product.image tag='0'] to [product.thumbnail tag='0'].

Additionally, if you are not masking the image URLs and you are not hosting them locally (ie. you are displaying product images directly from the merchant's site), you need to remove the following code from the previous snippet:
HTML Code:
http://<?php echo $_SERVER['HTTP_HOST']; ?>
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 product detail 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