3

I am trying to add the Facebook commenting system to a Squarespace website through code injection. The problem is, Facebook wants a URL address in its code and I only know how to apply a static url (the end result is every comment on the website is showing up in every blog post's comment section)

I need help trying to figure out how I can dynamically pull the individual webpage url into the below code for data-href:

<div class="fb-comments" data-href="http://www.mywebsite.com/blog" data-numposts="5"></div>

I believe Squarespace uses some form of JSON (see dev site: http://developers.squarespace.com/quick-reference/)

None of the solutions provided in this post seemed to work: Facebook comments plugin - same comments on every page

Thank you for your help!

Community
  • 1
  • 1
Chris Newman
  • 63
  • 1
  • 11

2 Answers2

1

What I did:

In the Pages > Blog > Settings > Blog Post Code Injection, added:

<div class="fb-comments" data-href="{permalink}" data-numposts="5"></div>

{permalink} automatically gets the permalink of the blog post.

It's worth noting here that the facebook comments will not only show up on your blog post pages, but it will also show up underneath each blog post in the blog list. I only wanted facebook comments to show up on the blog pages, not on the blog list main page, to prevent facebook comments showing up on the blog list main page I added css:

.blog-list .fb-comments { display: none; }

I was able to see the difference between blog list and blog detail page was that a parent element existed with class .blog-list or .blog-page so the above css will only hide comments in the .blog-list.

joshweir
  • 5,427
  • 3
  • 39
  • 59
1

Brilliant! I've got it all up and running now!!! So excited.

The only other thing I will add for others with this issue is you will also need to add some site-wide code.

Settings > Advanced > Code Injection > Header

<!--FACEBOOK COMMENT SYSTEM-->
<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/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Also, you need to turn off your built-in Squarespace comments so you don't have both showing up in your footer.

Chris Newman
  • 63
  • 1
  • 11