Datafeedr Support Forums

Datafeedr Support Forums (/index.php)
-   Tips, Tricks & Tutorials (/forumdisplay.php?f=66)
-   -   Facebook Like Button - Adding a like button to your category pages (/showthread.php?t=7169)

Eric June 22nd, 2012 08:49 AM

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

andrewjg 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 June 22nd, 2012 11:09 AM

Hi
Quote:

Originally Posted by andrewjg (Post 32910)
"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 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 June 22nd, 2012 11:24 AM

Quote:

Originally Posted by andrewjg (Post 32913)
Oh I see, by selecting an image in the Category Properties?

That's correct.

nzcid July 1st, 2012 12:02 AM

Quote:

Originally Posted by Eric (Post 32914)
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 July 1st, 2012 08:48 AM

Quote:

Originally Posted by nzcid (Post 33158)
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.


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

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