Facebook Like Button - Adding a like button to your store's front page

Eric · #1 June 22nd, 2012, 08:35 AM

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 · #2 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 · #3 March 13th, 2014, 06:23 PM

Hi,

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

Eric

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Add Facebook Like Button to Product Detail Page	Eric	Tips, Tricks & Tutorials	36	November 17th, 2012 04:08 AM
Facebook "like" button in product detail page	charlesk	Questions	12	June 19th, 2012 09:15 AM
Adding a back button to your Product Detail page	ayorofrance	Tips, Tricks & Tutorials	9	June 2nd, 2011 11:09 AM