2 Ways to Integrate Google+ with Blogger Posts

Blogging without social media is out of imagination today, so it becomes necessary for you to promote your contents top social media. And social media share plugins are going to do this work for you. But to know it there are many social media platforms present, but popular and effective among all them are facebook, twitter, stumble upon, and Google+. Among all the above mentioned Google+ is most simple, it's because both Google+ and Blogger are owned by Google so both gets integrated easily.

Today in this tutorial our focus will be on integrating your blog posts properly with Google+ platform. And this can be done in two ways

Way#1

Simple way, you don't need to add any codes, all you need to do is 

login to your blogger account → Blogger dashboard → Layout

and open Blog posts

Screenshot

Now click on edit on lower-right section. And activate it from there

Way#2

Advanced Way is not really advanced, it is also easier method if you follow below given instructions. In this method only Google plus button will be displayed in your blog's posts.

Open Blogger Dashboard → Template → Html editor and search for </body> and add the below given code just before it. (You will find body tag in the extreme bottom of your blogger template)

Javascript

<script type="text/javascript">
  window.___gcfg = {lang: '<data:language/>', parsetags: 'onload'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Now to activate google+ button, search following code in your blog's template
<b:includable id='post' var='post'>
now scroll below in this section searching for
<div class='post-footer'> and add below given code just post-footer section.

Html

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float: none;'>
<div class='g-plusone' data-size='tall' data-annotation='bubble' expr:data-href='data:post.canonicalUrl'></div>
</div>
</b:if>

Customization of Button
Google+ button provide 4 types of standard sized for G+ button. They are

1.  small 
2.  medium 
3.  standard 
4.  tall 

Now what you have to do is, if you want medium button then in Html code find data-size='tall'. And replace tall with medium or other size you want.

After customizations save the template and view the result in your blog's post pages.