Add Facebook Comments Plugin to Weebly Site or Blog

Weebly offers a commenting system with very limited features which is a big drawback for bloggers not to choose Weebly for blogging. Since Weebly allows to modify source HTML/CSS, it is easy task to add comments to pages and blog posts by disabling the existing commenting system. Facebook provides a comments box plugin which can be easily integrated to your Weebly site. The advantage of Facebook plugin is that the activity feed can be posted directly on the commenter’s personal news feed or Facebook Page’s timeline. Here we discuss step by step process of how to add Facebook comments plugin to Weebly site or blog page.

Getting Facebook Comment Box Code

Login to your Facebook account and then click here go to Facebook comments plugin page. Scroll down to “Comments Plugin Code Generator” section. You will see a form as shown below and fill it with the required details.

• URL to comment on – Enter your Weebly page or blog post URL here. Note that Facebook allows you to generate the code specific to particular URL only. If you want to add comment box on multiple pages then generate the code for each individual URL separately.
• Width – Choose the width of your comment box. This should be equal to the main container box of you Weebly layout for a better alignment.
• Number of Posts – This is a number of comments to be shown be default when a page is loaded. The minimum value is 1.
• Color Scheme – Choose light or dark according to your Weebly theme’s color (this option was removed in the latest version).

Once you filled the form, click on the “Get Code” button to generate the comments box code to be added in your Weebly site. Go to “JavaScript SDK” tab where you can find two parts of the code (step 1 & step 2). Copy both the parts of the code and paste it in a text editor like Notepad or TextEdit.

Add Facebook Comment Box in Weebly Page

Login to your Weebly site and select the page for which you have generated Facebook comment box code. Ensure to select the same page as you used in the above step or else the comment box will not be displayed. Drag and drop an “Embed Code” element and past the code generated from Facebook. You can see the look of Facebook comment box directly inside the Weebly editor and publish your site to make the comments box visible to public users.

Add Facebook Comment Box in Weebly Blog Post

Weebly announced default integration of Facebook and Disqus commenting on blog posts. You can choose this option from your blog settings without adding any codes. However, if you do not want to use the default Facebook comment, then follow the below steps to disable that and use the code from Facebook Social Plugins website. The below instructions are also hold good if you want to install any other commenting systems like Livefyre.

It is a tricky task to remove the existing commenting system and enable Facebook comments plugin.

• Select “Comment default” option as “Closed” in your Weebly blog settings to disable existing commenting system.

• Your blog post will still show two messages as “Comments” and “Comments are closed” as shown below:

• Go to “Theme” tab and click on the button “Edit HTML / CSS”. Paste the below codes in your “main.less” or “main-style.css” file.

h2#commentAreaTitle {display:none;}

.blog-notice-comments-closed {
display : none;
}

These are the tags generally used in all Weebly themes. Check out your Weebly theme in case if this is not working.

• It will look like below (main.less file will be available under “Styles” section in the latest code editor).

• Now that the Weebly commenting system will be completely disabled. Edit the blog post and add the Facebook comments plugin code using “Embed” element. You can also add divider and title elements to display the comments as shown in the picture below.

Adding Administrator or Moderator

You can add one or more admins to moderate the comments entered by the users. Admin can define blocklisted words and enable comment approval before comments are displayed live. Add the below code in your page’s header section available under “Pages > Select Your Page > SEO Settings > Header Code.

<meta property="fb:admins" content="Your Facebook User ID}"/>

 Facebook user id can be find using this URL – https://graph.facebook.com/username (replace username with your Facebook login id). If you want to add multiple administrator then add each ids separated by comma as shown below:

<meta property="fb:admins" content="ID1,ID2,ID3"/>

Administrators can directly moderate the comments with in the comments box or using a separate dashboard if you used app id instead of your Facebook id.