Facebook Like Button - Adding a like button to your category pages

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

In this tutorial I will show you how to add the Facebook Like button to your category pages. This is just for adding a single Like button to the category page, not for adding a Like button to every product on the category page. If you want to add a Like button to every product on a category page, please follow this tutorial.

Requirements:

You must be using version 3.8 or greater of the Datafeedr plugin.
You must have an image or thumbnail for each category in your store.

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

2. Add a new Text Module to the category 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(); ?>" 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="[category.image]" />

Note that in this example, I am sending Facebook my Category Image. If you wish to send Facebook your Category Thumbnail, change [category.image] to [category.thumbnail].

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 category 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

andrewjg · #2 June 22nd, 2012, 11:06 AM

"Liking" the Category page sent no product image to Facebook.

Changing [category.image] to [category.thumbnail] just made it send my Store's logo to Facebook, which doesn't fit.

Please help - thanks.

Eric · #3 June 22nd, 2012, 11:09 AM

Hi

Quote:

Originally Posted by andrewjg

"Liking" the Category page sent no product image to Facebook.

Changing [category.image] to [category.thumbnail] just made it send my Store's logo to Facebook, which doesn't fit.

Have you added either a category image or category thumbnail to each category in your store as per the 2nd requirement mentioned in my first post:

Quote:

You must have an image or thumbnail for each category in your store.

Eric

andrewjg · #4 June 22nd, 2012, 11:23 AM

Oh I see, by selecting an image in the Category Properties?

Fair enough.

I was thinking it would select an image from one of the products that appears on the page.

Eric · #5 June 22nd, 2012, 11:24 AM

Quote:

Originally Posted by andrewjg

Oh I see, by selecting an image in the Category Properties?

That's correct.

nzcid · #6 July 1st, 2012, 12:02 AM

Quote:

Originally Posted by Eric

That's correct.

Question - how would you get the face buttons to appear before and after. At the moment it shows where would put the text module.

If I wanted it to show after the product list would I create another text module and put in after the product list?

Eric · #7 July 1st, 2012, 08:48 AM

Quote:

Originally Posted by nzcid

If I wanted it to show after the product list would I create another text module and put in after the product list?

Yes, that's correct.

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
Facebook Like Button - Adding a like button to your product detail pages	Eric	Tips, Tricks & Tutorials	35	November 25th, 2014 10:22 AM
Facebook Like Button - Adding a like button to your store's front page	Eric	Tips, Tricks & Tutorials	2	March 13th, 2014 06:23 PM
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