Add Google Plus Badge and Icon from Developer site

Add Google Plus Badge and Icon from Developer site

Google Plus developer site

Google Plus is a best innovation of Google service. Generally Google Plus is a social media service Google. After introducing Google Plus a blogger can now easily share their posts through this social media. I think this is a revolutionary changes of Google blogger platform.  Because this integrated with Google blogger account. After introducing Google Plus it was improvising time to time. Already Google Plus profile has change 3 times. And more improvement we can see day by day. Earlier there was an problem about Google Plus badge because this was not looking attractive but some blogger including me developed different customized Google Plus badge but there was problem in browsers compatibility. Some badges work smoothly in Google chrome but some are not in Firefox browsers. So it was a biggest problem who wants to use Google Plus badge into their blog.
Finally Google Product developer has solved this issue. And created a developer page where you can make your Google Plus badge and icon in different style. This is just like Facebook developer pages. Now a blogger can easily add Google plus badge in different style. You would find badge or icon setup on developer pages.  

Now   I will discuss how you can customize the badge and icon widget. Thus you can display your image beside of Google Plus badge.

Google plus badge interface

Google+ User

First of all you have to select Google Plus account. If you have more than one profile pages then select appropriate one.


Here you can choose either Icon or Badge. Chose any one which you would like to add into your blog.


You can select Portrait or Landscape layout for your badge. Portrait is vertical style and landscape is horizontal style.  


By this option you can customize the width of the widget. Generally most blog's sidebar widget is 300px so by default it will be 300px. Change it according to your own blog sidebar.

Color theme

There are only 2 color theme you can choose. Light and dark. Choose any one according to your template color.

Cover photo

If you want to keep your Google Plus cover photo then you can select Enable option otherwise select Disable.


This is generally display your blog description. If you have already added your blog description into your Google Plus profile then it will display. Here is also Enable and Disable option available.


If your blog is in different language then you can select any by using this option. This is just like drop down option so chose according to your blog language.

Google Plus icon
This is the image for Google Plus Icon

landscape badge
Google Plus Landscape Light and Dark Badge 

Google plus dark badgeGoogle Plus light badge
Google Plus Portrait light and dark Badge with tagline

How to Add Code into Google Blogger Template 

For getting the code please visit the Google plus Developer site And customize according to your own.

After customization copy the code and follow the below steps to add it into your blog.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then Select "HTML/JavaScript" Widget.

Step 4 Now Paste the copied code in "HTML/JavaScript" Gadget.

  • Example of the code-

<!-- Place this tag where you want the widget to render. -->
<div class="g-person" data-href="//" data-theme="dark" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = '';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

It is extremely true that Google page rank is now affect by Google Plus follower. So if you have more followers then you have better chances to get higher page rank. So if you haven't yet added Google plus badge or icon add it immediately to increase your Google Plus follower. Because this is more important than Facebook fans. If you face any trouble then feel free to contact with me. I am here to help you and solve your problem. 
Open Comment Box
Abdul Samad says: 9/07/2013

Bro How We Can Add In Wordpress Tell I want to add here ...

Mohammad Fazle Rabbi says: 9/07/2013

Samad it will work on WordPress...not any problem for install it.

Aslam Parvez says: 9/08/2013

nice post bro. so, how to use animated Bullet Points . plz plz help..

Mohammad Fazle Rabbi says: 9/08/2013

Actually you have to find animated bullet image for adding it. But the question is where you want to add bullet point? in Blog post or in sidebar or footer?? I will write an tutorial with details that how to add bullet point in different section blog.Till than keep visiting.

Aslam Parvez says: 9/08/2013


Ankur Upadhyay says: 9/08/2013

You have to add the code from Google Plus in text widget option from Widget screen.

Contact Form


Email *

Message *