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. You will see a form as shown below and fill it with the required details.

Facebook Comments Plugin Form
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.
Related:  7 Ways to Optimize Images in WordPress to Improve Page Loading Speed

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
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
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
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
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:
Related:  Top 4 Free Forum Plugins for WordPress
Hiding Weebly Comments Closed Message
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
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.

Recommended Articles:

11 thoughts on “Add Facebook Comments Plugin to Weebly Site or Blog”

  1. Blog commenting is absolutely one of the easiest way to get backlinks to a new or old website as long as you commented with great and relevant feedback about the article or posts. Blog commenting is an inbound links that helps to gain more links pointing to your site. It is also one of the SEO methods to be used.

    Reply
  2. I was looking to add that plugin over my gaming blog but was unable. I tried other sites to get some ideas but this page in particular has an easy and step by step solution. Even a new comer can easily set it up.

    Thanks Webnots Staff for this.

    Reply
  3. Any idea how to get notifications for the facebook system comments? I love that it’s automated, but I can’t seem to get a notice anywhere of comments. :-//

    Reply
    • Neither can I. Just chatted with a rep who said there’s no way to receive notifications through Weebly right now. I’ve tried tweaking the HTML, but that hasn’t worked either. I’ll keep trying and let you know if I figure something out, though!

      Reply
      • I was able to do it… I had to apply for an app id, attach it to the website and add that to the header code in weebly… :)

        I’m not sure though if it’s working 100% correctly, but it does work…

        Reply
  4. Weebly has updated their commenting system and now they support Facebook and Disqus. You don’t have to code to add them because it’s already on their feature. Though still beta, these updates will keep us moving and improving.

    Nice Tutorial though, but now things has gone automatic.

    Reply
    • Yeah thats right, but that is only for Blogs. The explained process remains same for Pages and any commenting systems other than Facebook and Disqus.

      Reply

Leave a Comment