I wanted to have tabbed comment feature on my website. At present, you may find many plugins and widgets for both Blogger and Wordpress blogs. I googled a lot then, but couldn't find anywhere codes for the tabbed commenting system that I wanted. Here is what I did for my blog for providing multiple commenting system. The code is simple and easy to get running.
Below I show you how to have the tabbed comment feature like I have been using here on my website. I divide the whole process into three stages.
1) Copy the code below, and paste it before </head> tag in your page. This code fetches the external jQuery script and CSS that’s necessary for the tabbed configuration functionality and appearance. (click view raw, and then copy)
2) Copy the code below, and paste it where you want the comment system to appear on your page. If you have trouble getting the correct location, you may use Dreamweaver to spot the desired location in the code, or alternatively you may use Firebug (extension for Chrome and Mozilla Firefox browsers).(click view raw, and then copy)
3) In the code above, change ‘Tab1’ to the name of your desired tab. Repeat for other tabs too. I included only three tabs here. You may want to increase the number of tabs as per your need. To do that you would have to just replicate the code for tabs here. I mean, just copy and paste once more for the ‘name’ and ‘content’ section of new tab here, and edit them as you did with the first tab.
Just remove the default content for each tab, and put up there your own.
example:
<!--
<div id="tabs">
<ul><li><a href="#tabs-1">Disqus</a></li><li><a href="#tabs-2">Facebook</a></li><li><a href="#tabs-3">Twitter</a></li></ul>
<div id="tabs-1"> Paste the code for Disqus here </div>
<div id="tabs-2"> Paste the code for Facebook here </div>
<div id="tabs-3"> Paste the code for Twitter here </div>
<a href="http://www.anshulgautam.in/" target="_blank">By Anshul Gautam</a>
</div>
-->
Below I show you how to have the tabbed comment feature like I have been using here on my website. I divide the whole process into three stages.
1) Copy the code below, and paste it before </head> tag in your page. This code fetches the external jQuery script and CSS that’s necessary for the tabbed configuration functionality and appearance. (click view raw, and then copy)
2) Copy the code below, and paste it where you want the comment system to appear on your page. If you have trouble getting the correct location, you may use Dreamweaver to spot the desired location in the code, or alternatively you may use Firebug (extension for Chrome and Mozilla Firefox browsers).(click view raw, and then copy)
3) In the code above, change ‘Tab1’ to the name of your desired tab. Repeat for other tabs too. I included only three tabs here. You may want to increase the number of tabs as per your need. To do that you would have to just replicate the code for tabs here. I mean, just copy and paste once more for the ‘name’ and ‘content’ section of new tab here, and edit them as you did with the first tab.
Just remove the default content for each tab, and put up there your own.
example:
<!--
<div id="tabs">
<ul><li><a href="#tabs-1">Disqus</a></li><li><a href="#tabs-2">Facebook</a></li><li><a href="#tabs-3">Twitter</a></li></ul>
<div id="tabs-1"> Paste the code for Disqus here </div>
<div id="tabs-2"> Paste the code for Facebook here </div>
<div id="tabs-3"> Paste the code for Twitter here </div>
<a href="http://www.anshulgautam.in/" target="_blank">By Anshul Gautam</a>
</div>
-->
Voila! And that’s how the tabbed configuration would start to work. In the ‘content’ section for respective tab you may past the code for facebook comment, or disqus, or IntenseDebate, or whatever you would want. I have been using three tabs, one for Disqus comment, second for Facebook comment, and the last one for Google Plus comments.
This blog post doesn’t disclose codes for Facebook comments and Google Plus comments or Disqus. However, you can get them easily through Google Search.
If you find the information here useful, do ‘share’ and let me have your reviews. I will love to listen to you.
no its not working
ReplyDeleteno its not working
ReplyDelete