Datafeedr Support Forums

Datafeedr Support Forums (http://www.datafeedr.com/forums/index.php)
-   Tips, Tricks & Tutorials (http://www.datafeedr.com/forums/forumdisplay.php?f=66)
-   -   Facebook Like Button - Adding a like button to your store's front page (http://www.datafeedr.com/forums/showthread.php?t=7167)

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.

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

hosfield1010 March 13th, 2014 05:24 PM

Hi,

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

404 - PAGE NOT FOUND
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.

Thanks!

Eric March 13th, 2014 06:23 PM

Hi,

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

Eric


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

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