Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Tips, Tricks & Tutorials
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
  #1  
Old June 22nd, 2012, 08:49 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 category pages

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
  #2  
Old June 22nd, 2012, 11:06 AM
andrewjg andrewjg is offline
 
Join Date: Jun 2012
Posts: 43
Default

"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.

Last edited by andrewjg : June 22nd, 2012 at 11:07 AM.
  #3  
Old June 22nd, 2012, 11:09 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi
Quote:
Originally Posted by andrewjg View Post
"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
  #4  
Old June 22nd, 2012, 11:23 AM
andrewjg andrewjg is offline
 
Join Date: Jun 2012
Posts: 43
Default

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.
  #5  
Old June 22nd, 2012, 11:24 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Quote:
Originally Posted by andrewjg View Post
Oh I see, by selecting an image in the Category Properties?
That's correct.
  #6  
Old July 1st, 2012, 12:02 AM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
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?
  #7  
Old July 1st, 2012, 08:48 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Quote:
Originally Posted by nzcid View Post
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
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

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


All times are GMT -5. The time now is 02:09 AM.


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