TUTORIAL: how to customize and add to blogger/website new google + badge.

I'd love to visit blogger buzz to see if there is something new in blogger. Today I saw a new g+ badge, which looks much better than the standard available in blogger - called google plus followers. Of course, if you don't want to show your followers, only your profile. The advantage of this addition is that you can customize the look to your needs and easily add to your blog or website. Badge is compatible with any type of profile google namely: personal profile, google plus page or community. In this tutorial I will describe all the possible option to customize your badge and how to add it to your blog or site.

1. go to the google developers page and choose profile

In product section find category: websites and then BADGE. Here is direct link to this place: 
https://developers.google.com/+/web/badge/ You can then choose the appropriate profile from the list.
If you are logged in to Blogger or any other Google service, wait a few seconds and the site will automatically detect the user. If you are not are logged in, paste the URL of your profile, g+ page  or community.

Here's how it changes our preview

2. customize your badge

This widget can be prepared in several ways depending on what you want to have: a short snippet, cover image, icon, etc. Here are all the options:

  • features: icon or badge
icon can be in three sizes: small, medium and large. You can also name your icon, or leave it without a signature. This is an example of a icon with custom name:

badge look like this, and also can be customized. About this in a moment :)

  • badge is available in two layouts: landscape and portrait
If you choose landscape, badge will be horizontal. You can adjust the width (max. 450 px), select the color: light (white) and dark (black), or change the language of  'follow' word.

Finally we move to the most important things, the customizing badge in portrait layout.

  • We can adjust the width (max. 450 px, min. 180 px). The height changes proportionally to the specified width. The wider the badge, the longer the length of the tagline.
  • The next step is to choose a color scheme. We can choose between two, light and dark.

  • Have not you noticed something interesting above? :) You can turn off the cover picture (and mix with color theme).

  • Now we can proceed to enable or disable the tagline.

But what if you want to have a tagline, but the current does not fit? We can easily change this in google plus. Go to your google plus profile, then into your ABOUT tab, and edit your STORY. You need to know that what is shown in the badge, it is what you enter in the TAGLINE field, not in INTRODUCTION.

3. Installation

Once you have everything set up the way you want, you can install the widget on your blog. simply copy the code generated under the preview. Go to blogger dashboard, select LAYOUT, and add HTML/Java Script widget. In the new window, paste the code and save it. And your badge is ready! :) Place the widget in their preferred location on the page and enjoy this beautiful widget.

If you do not use blogger, paste the code where you want it in your website. On the google developers site (linked in step 1), you can read about other details such as the attributes of java script and HTML code.

So what do you think of this widget? You're going to use it, or not really? Is the tutorial is clear and explanation everything, or maybe something you do not know? Ask me a question if you have a problem with the installation, or need advice. Hold on tight, my SHINIES. :)

facebook  twitter  pinterest RSS   bloglovin  g+ shop 

1 comment