Add/Install Google+ and Blogger Comments With Blogger

Users can easily comment on your every single post while reading your post or using the Google+ account. Today I'm going to show you how to attach/add Google+ and blogger comments only on blogger platform. It means when any webmaster create a post, he/she shares this post on Google+, So your post also available in Blogger and Google plus. Users/Viewers can comments on your post even on your Google plus share post. As you know Google plus is Google property and it's very powerful for SEO. If any visitors comes to your post from google plus, Google consider that visitors as a organic visitors.

Install-blogger-and-Google-plus-comments

By this way you can increase blog Traffic, Google plus followers and Google plus circle. You can take advantage of the google plus comment system on blogger. You can reply easily of google plus commentator as well as blogger on one platform.

Recommended: How to Make Money on YouTube

How to Integrate Google Plus and Blogger Comments:

To add this installation as simple as possible, We used inline JQuery and CSS, but anybody can change it later. So let's start to adding it.

Step 1. Go to your Blogger Dashboard, Open specific Blog, > then select "Template" and click on "Edit HTML"

Step 2. Clock anywhere on the code and press Ctrl + F to open the search box, Now Find the code below

<b:include data='post' name='post'/>

Step 3. Copy the given below code and paste just <b:include data='post' name='post'/> after it

<b:if cond='data:blog.pageType == "item"'><style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFa8IFVZUs0obKNnNyuisOBCNjRlSfL2umkaz7KnoQNacnGL-jyz2I5LIXvFiAQwd8SvO00gtBPTJvZE9J-5mSb3bv67ehZy6fX3ZBomp8YIllcX_8DgnGjhmgqk1-QhO_4OFi-fZCqxUD/s1600/speech-bubble.png) no-repeat; font-size: 20px; font-family: "Arial Narrow",Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}</style><div class='comments-icons'>Show Comments: <a class='show-hide-comments' href='javascript:void();' onclick='$("#gplus-comments-visibility").slideToggle();$("#comments").hide();'><img class='gplus-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRDnfcugONDco9E7cAvbiBiz3Cy1AAy08hdXHK98DcfjtN6aQm1c7vp0jKip7wbS6-QhCW-Wrg6CcCB7MltcCc9uTe9h6X8sNY_Y-srOyUG7a_RasNnlV8rEbs3dinSWLbySHgpnn5v5v/s1600/google-plus-logo.png' width='35'/></a> OR <a class='show-hide-comments' href='javascript:void();' onclick='$("#comments").slideToggle();$("#gplus-comments-visibility").hide();'><img class='blogger-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0T_UMMk9IouesPpJibuKcB2RE9-yAJICFFFbYYdaGo1BKk6U9VFNaavMcDMk0z6fXNYpsgk41f59rH7bEuHr063K8QIqw2ooWJw6ky6cvU3rU403QtcBPEkYQb4feDT3-LbV-kUrZ3u-/s1600/blogger-logo.png' width='35'/></a></div><div id='gplus-comments-visibility'><div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550'expr:data-href='data:post.url'/></div> </b:if>

Step 4. The code data-width='550' indicate that you can change easily by increasing/decreasing '550' according to your blog size.

Step 5. Now Save your Template, and check your blog to see if you have successfully added this code to blogger

Note: If this code is not working for you it means you must have to put JQuery script in <head> </head> section

Add JQuery script:

Paste the given below code before the </head> tag

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

You have Done. Your reader will enjoy the flexibility that your site provides and you will also get benefit from the inclusive services offered by Google.

Share this post of this site with your friends on social media sites. If you have any Question and any problem feel free to contact me in comment section.

13 Jan 2015