This post will explain the Social Commenting Systems, a WeCodeArt Blogger Template feature. I tried and Achieved, of course, to make a fast loading Blogger Template. Having many commenting systems use a lot of javascript files and this can cause your blog to load slowly. We all know how slow some custom blogger templates are. The PROBLEM with this templates is that they use Bloggers built in JS files for commenting system and sometimes, making a custom HTML markup for this can cause the file to load slow and can also cause some JS errors. This is not the case with this template.

Everything is loaded properly and even with some enhancements such as loading iframe.js file (blogger comments) async. Loading the file using async attribute can reduce page load of your blog. Along with these enhancements to the default blogger system, I also added 2 popular commenting systems: Facebook and Disqus Comments.

Ok, first let me explain what enhancements I did to Blogger comments.

1. reduced, improved HTML markup (no code leftover if no comments)
2. comments iframe.js loaded async (faster loading with 1 less blocking JS)
3. display just a form (without full comments HTML when NO comments on posts)
4. added Schema Markup to the comments container
5. comments tabs without JS - just few lines of CSS (new flexbox standard)

The screenshot bellow will display this features and enhancements to the Blogger system when no comments are posted - less HTML, async js and zero javascript errors.

Along with this improvements I also added:

1. Facebook Comments
2. Disqus Comments

Comments are displayed in Flexbox made tabs with posibility to enable/disable them with 1 word change, like: true/false :)

In order to enable or disable a commenting system you need to go to Template > Edit Template HTML.

After this you need to hit CTRL + F and search for "<!--var-enable-Facebook-comment-->" or "<!--var-enable-Disqus-comment-->".

You will find these lines of codes in 2 places. First is for when post has no comments and the 2nd is for when threaded comments are displayed.

A live example of the comments you can see on this blog.