Multiple Commenting System widget for Blogger using jQuery UI

This blog post covers in detail those steps that will help you include a jQuery-UI based multiple commenting box widget to your blogger blogs. jQuery user interfaces are being used extensively as they provide an eloquent user interface and are light weight, ie they are faster to load. Moreover, they are compact and in a small screen area more of controls can be dealt with within its interface. I used the same jQuery-UI and developed a multiple commenting box widget for my blog. Currently I have included the Facebook comments, Blogger comments, and Google+ comments. This post is in continuation with my earlier post, where I described how to add different commenting system except Blogger’s default commenting system. Lately, I figured out a way in which Blogger’s default commenting system can also be used in the widget. And thus, here I am to share my code. If you find my code not working, or you get struck anywhere, feel free to comment and ask your query. You can connect with me on various social media platforms as well. I will feel glad to help you.

Step1 > Make a Facebook App. I hope you already know how to make one. This is required because we need the ‘App id’ for Facebook comment to start working.

Now, in the template editor, paste the following code before </head> :

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  

  <script>

  $(function() {

    $( "#tabs" ).tabs();

  });

  </script>

<meta content='YourFacebookProfileUserID' property='fb:admins'/>

<meta content='YourFacebookAppID' property='fb:app_id'/>

Just enter your Facebook Profile UserID and your App ID in the required place before pasting the code.

Step2 > Go to Blogger’s Edit Html section, and find <div class='comments' id='comments'>. If you click just before <div class='comments' id='comments'> on the template pane, you will find that the code within this <div> tag gets collapsed. This will help us to select the entire content within these tags. 

(the highlighted one in the screenshot is what we will select and paste there the new code)

Now we need to cut this selected content and paste there the code below:

Step3 > Save the template. And refresh your blog. You will find my multiple commenting box instead of Blogger’s default commenting interface. You will get Facebook comments, Blogger’s and Google+ commenting system in this widget. If you wish to add some other commenting system, then that can be done too. Just leave me a message. And will help you out with that.

Note: This widget can be customized to different styles by overriding the default CSS. I am using the same widget with a slightly different styling done by me. The different styling can be done either by altering the default CSS or by explicitly using an inline CSS.