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.
