Facebook Like Button - Adding a like button to each product on the category page

[Eric]

In this tutorial I will show you how to add the Facebook Like button to each product on your category pages. To add 1 Like button to your category pages, see this tutorial.

Requirements:

• You must be using version 3.8 or greater of the Datafeedr plugin.
  
• You must be comfortable editing HTML and CSS. The changes in this tutorial may break your layout if you are not familiar with HTML and CSS.
  

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 (if the following code does not already exist because you did this tutorial):

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

5. Save the Text Module.

6. Click the theme icon ( ) for the Product list module.

7. Paste the following code where you want the Like button to appear:

<div class="fb-like" data-href="<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . '/' . $product->site_link); ?>" data-send="true" data-layout="button_count" data-show-faces="true"></div>

NOTE: This code must be placed between the [product.each] and [product.end] tags. If it's placed outside of those tags, this will not work.

ADDITIONAL NOTE: This is a small version of the Like/Send buttons. You can further customize the layout of this button and read how to configure it more here under Step 1 - Get Like Button Code.

8. Save the Product list module.

9. Go here: The Factory > Your Store > VIEWS > PRODUCT DETAIL > Default

10. Follow Steps 7 ~ 10 from this page.

Now a Facebook Like button should appear for every product 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

[1800HART]

This is cool, and exactly what I want!

But - do I need this? I am wondering what effect it will have loading up each facebook like/send buttons on the server's CPU resources when multiplied by many stores in a multisite environment and affected by how many items are displayed on each category page view. I'm also using that "products per page" and "sort" code on the category views, and some may view 48/page etc. Unfortunately (as you know) next month I have to start thinning out the calls on the MySQL data to ease up on the RAM ... as it occasionally slows up the server and cause timing out errors.

[nzcid]

Originally Posted by 1800HART

This is cool, and exactly what I want!

But - do I need this? I am wondering what effect it will have loading up each facebook like/send buttons on the server's CPU resources when multiplied by many stores in a multisite environment and affected by how many items are displayed on each category page view. I'm also using that "products per page" and "sort" code on the category views, and some may view 48/page etc. Unfortunately (as you know) next month I have to start thinning out the calls on the MySQL data to ease up on the RAM ... as it occasionally slows up the server and cause timing out errors.

Hey Hart

I decided just to have the buttons on the category page at the top just because of the load issue as I use shared servers.

Theme owner was adamant that why they have not built social network buttons in for every page or post (load issue on server), even though plug-ins already exist for this.

So for datafeedr I just use the category buttons for now and wait and see how the use of them progresses. See below.

http://www.chinawholesalectronics.co...wcdma-devices/

For Posts:

I have a plug-in for posts http://www.christsbooks.com/ that I am using on another site.

You can have the buttons show at the top or bottom of the post. Again I will watch to see if there are any issues and see how they are used.

If you wanted use something like that for post in Wp go to Install Plug-in in the search box use "Facebook Like and Send Button" and it will come up with some options.

[1800HART]

Thanks ... nzcid

I'm thinking the same thing now - just to have one FB like of the category at the top of the page - just to help minimize the load CPU resources ... although, maybe in some stores I might try what you are doing (what M.K. was doing) by just linking the details button to the merchant's product URL directly. In that case, the FB like would be very handy.

btw - meant to ask since you changed it all that way - did you notice any immediate improvements linking directly to the merchant instead of your standalone product page first?

HART

[1800HART]

btw - there's a new plugin BY facebook called "Facebook" that has much more options than your currently used "Facebook Like and Send Button" plugin. You might want to check it out. I'm using it on http://PetLvr.com

[nzcid]

Originally Posted by 1800HART

Thanks ... nzcid

I'm thinking the same thing now - just to have one FB like of the category at the top of the page - just to help minimize the load CPU resources ... although, maybe in some stores I might try what you are doing (what M.K. was doing) by just linking the details button to the merchant's product URL directly. In that case, the FB like would be very handy.

btw - meant to ask since you changed it all that way - did you notice any immediate improvements linking directly to the merchant instead of your standalone product page first?

HART

did you notice any immediate improvements linking directly to the merchant instead of your standalone product page first?

Nothing changed really with the customers habits they are still clicking on the buttons but this time of year most are not buying. For that site in June, 59 unique clicks going through to the merchants site. Not much I know and I am working on my traffic but that takes time.

The less clicks a customer has to do the better and if we remember our main focus is to get them to the merchants site, why would we not link the details button directly to the merchants site. We do not get paid by keeping them on our site, we should want them on the merchants site as quickly as possible using our affiliate links.

Been made redundant from August the 3rd so with my few sites I see where I go from there.