Add Google+ Badge With Profile Picture And Circles Count In Blogger

Like the official widgets of other social networks, Google also provides the Official Profile Badges for blog or websites through which the visitor or readers can easily add the blog/profile author or owner easily directly from the blog with single click. This is one of the easiest way to build your Google PLUS followers and also to increase the blog traffic. If you are using blogger, they are some built-in Google+ Profile Badges widgets, which you can simply add, but unfortunately they didn't have option to add profile picture with them. Those widgets profile badges can be added for personal blogs, but if you are running a business blog then you should add your profile picture with your Google+ Profile Badge in order to get the people easily recognize you. By default the Google+ Profile Badges, do not have a profile picture, so to make your Google+ Badge look more attractive and beneficial, you can easily add the profile picture with it. This tutorial is about how you can Add Your Profile Picture With Google+ Badge, so let’s start:

Note:- For The PRACTICAL DEMO, see the Google+ Profile Badge Hanging At The Right Side Bar.

1. Log in to your Blogger Dashboard.

2. Go to LAYOUT > ADD A GADGET.

3. In “ADD A GADGET” window, select “HTML/JavaScript” from the list.

4. In “HTML/JavaScript” window, copy and paste the following code:

<script type="text/javascript">
window.___gcfg = {lang: 'en'};
(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>

<div style="background: none;
border-radius: 3px;
border: 1px solid #CCC;
margin: 0px; padding: 10px 10px 5px 10px;
width: 270px;">
<b><span style="color: #333333;
font-family: arial;
font-size: 14px;">
Your Profile/PageName Goes Here In
<a href="Your Google+ Profile/Page URL Goes Here">+1</a> Circles → </span>
</b>
<br />
<div>
<b><br /></b>
<b>
<img align="left" height="54px" src=" Your Profile Picture URL Goes Here"
style="margin-right: 5px;" />

<script type="text/javascript">
window.___gcfg = {lang: 'en'};
(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>
<g:plus height="69" href="Your Google+ Profile/Page URL Goes Here" width="210">
</g:plus>
</b>
</div>
</div>

5. Click “SAVE”.

You are all done. Refresh your blog to see the “Google+ Badge With Profile Picture”.

Customization:

1. Replace “Your Profile/PageName Goes Here” with your own Google+ username or page name.

2. Replace “Your Google+ Profile/Page URL Goes Here” with your own Google+ Profile/Page URL.

Note:-  Get the Profile/Page URL by following the steps below:

• Go to your Google+ profile/page.
• Copy the URL from your browser address bar.

See The Example Below:

3. Update “+1” Circle Count manually as your Google+ Circles updates.

4. Replace “Your Profile Picture URL Goes Here” with your own Picture URL.

That’s All.

Need Help?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)