How do I add Facebook comments to my product page?

Posted On // Leave a Comment

If you have the Facebook "Like" button enabled for your products, you may also wish to have the comment system enabled as well. Please note that as this code was working at the time of writing, future updates may require you to customize the code.



1.) Login to your store's control panel.

2.) Click on Design.

2012-03-21_1616.png

3.) Click the Browse Tempalte Files button.

2012-03-21_1616_001.png

4.) Now, find HTMLHead.html in the top left box and click on it.

2012-03-21_1617.png

5.) Scroll down to just before the tag and paste the code below.

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

2012-03-21_1617_001.png

6.) Click Save.

2012-03-21_1617_002.png

7.) Now, scroll down to product.html in the bottom left box.

2012-03-21_1618.png

8.) Paste the following code exactly where you want the comments to appear (We recommend to paste the code in the middle column, LayoutColumn2, just before .)

<div data-href="%%GLOBAL_CurrentProductLink%%" data-num-posts="10" data-width="470"></div>

For those of you who have a dark theme based store, you can use the following code in order to display the comments.

<div data-href="%%GLOBAL_CurrentProductLink%%" data-num-posts="10" data-width="470" data-colorscheme="dark"></div>

2012-03-21_1619.png

9.) Click Save.

2012-03-21_1619_001.png


Now, you should have Facebook's comment system on your product pages.

2012-03-21_1620.png

0 comments:

Post a Comment