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. You will see a form as shown below and fill it with the required details.
Facebook Comments Plugin Form
- URL to comment on – Enter your Weebly page or blog post URL here. Note 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.
Once you filled the form click on the “Get Code” button to generate the comments box code to be added in your Weebly site. There will be two parts of the code, copy both the parts of the code and paste it in a text editor like Notepad or Notes.
Generate Facebook Comments Box Code
Add Facebook Comment Box in Weebly Page
Login to your Weebly site and select the page you 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 a “Embed” element and past the code generated from Facebook. You can see the look of Facebook comment box directly inside a Weebly editor and publish your site to make the comments box visible to public users.
Facebook Comments Plugin Displayed Inside Weebly Editor
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. The below instructions 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. Below step by step instruction will help you to do this:
- Select “Comment default” option as “Closed” in your Weebly blog settings to disable existing commenting system.
Close Existing Comments System
- Your blog post will still show two messages as “Comments” and “Comments are closed” as shown below:
Comments Closed Message in Weebly
- Go to “Design” tab and click on the button “Edit HTML / CSS”. Paste the below codes in your “main-style.css”.
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:
Hiding Weebly Comments Closed Message
- 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.
Facebook Comments on Weebly Blog Page
Adding Administrator or Moderator
You can add one or more admins to moderate the comments entered the users. Admin can define block listed words and enable comment approval before comments are displayed live. Add the below code in your page’s header section available under “Pages > Advanced 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.
12 Comments
Leave your reply.