As of 28th May 2016, only the most current version of Aarcade themes will receive personal support and updates – read more…

  Back to Top

How do I add Facebook comments to my Big Cartel product page?

Filed in Advanced Customisation

Note that advanced customisation support articles are provided as a courtesy to Aarcade and Big Cartel users. Aarcade does not provide support for advanced customisation. Please read the following related articles:

This article details how to add Facebook comments to your Big Cartel product page using the official Facebook Comments social plugin.

Make sure your custom domain setting is correct

If you have a custom domain applied to your Big Cartel shop, make sure that it is set up correctly before proceeding. If your domain is set up incorrectly, your Facebook Comment box will generate the message Could not retrieve data from URL.

To correctly set up your custom domain, refer to How do I set up a custom domain for my Big Cartel shop?

I do not have an Aarcade theme

If you do not have an Aarcade theme, do not create an x ic after product page as detailed in the next section of this article.

Instead you will need to work out a suitable place within your Product theme page – located in your..

Customize design > Advanced (advanced) – Product

Big Cartel admin area – to manually paste code to, instead of pasting it into a x ic after product page. Contact your theme provider if you need further assistance.

Create an Insert Content page

With an Aarcade standard theme you use the Insert Content method to insert content into your Product page. For Facebook comments, we recommend using the x ic after product page.

So, in this case, the first step is to create a new custom page, as detailed in the support article How do I add a page to my Big Cartel shop?, and name it x ic after product

IMPORTANT

Switch to HTML edit mode before proceeding – refer How do I switch to HTML edit mode?

Inserting the Facebook Comment code

Instructions

Copy all of the code in the code box below and paste it into your new x ic after product page (or Product page if you do not have an Aarcade theme) and save the page by clicking the Save link in your Big Cartel edit controls.

<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 id="fb_comments_wrap">
<div class="fb-comments" data-href="{{ store.url }}{{ page.full_path }}" data-width="470" data-num-posts="10"></div>
</div>

Explanation

From the Facebook Comments social plugin instructions we get the standard 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-comments" data-href="http://example.com" data-width="470" data-num-posts="10"></div>

We want the URL to match the product page automatically, so we combine the Big Cartel Variables store.url and page.full_path to render the full URL of the current product page.

{{ store.url }}{{ page.full_path }}

We then replace http://example.com in the original Facebook code with the above to get:

<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-comments" data-href="{{ store.url }}{{ page.full_path }}" data-width="470" data-num-posts="10"></div>

As a final customisation to the Facebook code, we wrap the .fb-comments div in our own div to allow us maximum control of styling via CSS.

<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 id="fb_comments_wrap">
<div class="fb-comments" data-href="{{ store.url }}{{ page.full_path }}" data-width="470" data-num-posts="10"></div>
</div>

Styling the Facebook comments

Note that the the Facebook Comments social plugin instructions allow options for width, number of posts and color scheme. You can change these options with the tool provided, get your customised Facebook code and then reapply the steps in the Explanation section above before pasting your code into your x ic after product (or Product) page.

Additionally you can add custom styles to the custom style coding area – ref. Where do I add custom style coding in my Big Cartel theme controls? – to fine tune the position of your Facebook comment box. Following is an example of such custom styling that can be used as a starting point:

/* - - - - Set Facebook Comment margins */
#fb_comments_wrap {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center; /* sets position of comment box */
	}
/* - - - - Force Facebook Comment width to be responsive */
#fb_comments_wrap .fb-comments {
 	width: 470px; /* if you changed the default width - change this value to match */
	max-width: 100%;
	} 
#fb_comments_wrap .fb-comments > span,
#fb_comments_wrap .fb-comments > span[style],
#fb_comments_wrap .fb-comments > span > iframe,
#fb_comments_wrap .fb-comments > span > iframe[style] {
	width: 100% !important;
	}

Related articles...