Datafeedr Support Forums

Datafeedr Support Forums (
-   Tips, Tricks & Tutorials (
-   -   Facebook Like Button - Adding a like button to your store's front page (

Eric June 22nd, 2012 08:35 AM

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.

  • 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); = id;
  js.src = "//";
  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:

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="" />
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):


hosfield1010 March 13th, 2014 05:24 PM


I implemented the code above. The FB buttons appear and link to Facebook correctly, but I'm getting the following message:

404 means the file is not found. If you have already uploaded the file then the name may be misspelled or it is in a different folder.

Seems to be with the image link. On my site, I hovered over my logo and copy-pasted the image URL of my logo png file into the script above. Not sure why I'm getting this message.


Eric March 13th, 2014 06:23 PM


It's hard to say without seeing it in action.


All times are GMT -5. The time now is 03:18 AM.

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