Blog Commenting - Facebook Comments

Add Facebook Comments to your SiteWrench blog. 

You can embed Facebook Comments so that they appear on each of your individual blog posts. That way if your users are already logged into Facebook on their device, they will be able to easily leave a comment from their profile. Users can reply to an existing comment, allowing you to have conversational threads within your comment section.

Step 1: Get the code from Facebook Comment Generator

• Go to https://developers.facebook.com/docs/plugins/comments/
• You don’t need to worry about inserting your full URL link
• Adjust the width if desired, but you can leave that blank
• Change the number of visible posts from 5 if you want to increase or decrease
• Select “Get Code” and a pop up window will appear like this

Step 2: Add Facebook’s “Step 3” or 2nd provided code to the Blog page part

• In a separate tab (do not close your Facebook comment generator tab), open the SiteWrench page where your blog is installed and flip to the Settings tab of your Blog page part
• Scroll down to the box that reads “Comment Embed Code” (near the bottom)
  
• Insert the code they provided

<div class="fb-comments" data-numposts="5"></div>

• Keep the tab open, or Save the page part if you think you will leave the browser tab

Step 3: Add some critical code to the Blog page part

• Within the Settings tab of your Blog page part, scroll down to the box that reads “Comment Embed Code”
• Insert this critical script just below what exists already

• <script>

     $(".fb-comments").attr("data-href", document.querySelector('[rel="canonical"]').href);

  </script>

• Keep the tab open, or Save the page part if you think you will leave the browser tab

Step 4: Add the first Facebook code to the Blog page part

• Within the Settings tab of your Blog page part, scroll down to the box that reads “Comment Embed Code”
• Copy the HTML in Step 1 provided by Facebook
• Paste the Step 1 code from Facebook into Comment Embed Code box underneath the critical script that exists already
• Save the Page Part settings

<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12';
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

It will look like this:

Step 5: Check the results

• View the front end of your blog detail post to see how the Facebook comments are working for you.