View Single Post
  #1  
Old June 22nd, 2012, 08:35 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 store's front page

In this tutorial I will show you how to add the Facebook Like button to your store's front page.

Requirements:
  • You must be using version 3.8 or greater of the Datafeedr plugin
  • You must have an image uploaded to your site to use to represent your store's front page

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

2. Add a new Text Module to the store front 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(true); ?>" 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. Here is where you need the URL to the image you want associated with your store's front page. In this example, I will use this image:

http://yoga-blocks.co/wp-content/uploads/2011/09/yoga-blocks-header.png

You need to paste the following code into the <head> element area (replacing my image URL with your image URL):
HTML Code:
<meta property="og:image" content="http://yoga-blocks.co/wp-content/uploads/2011/09/yoga-blocks-header.png" />
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 store's front page.

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