How to add Google+ page badge on your website (along guidelines for size and color customization)


This article explains how to add the Google+ profile badge on your blog or site along with guidelines for size and color adjustment. Read this article for descriptive illustrations for simple steps to add Google+ page badge on your site

Google recently launched the Google+ pages for businesses and some other purposes. Just a few days ago we discussed how to make pages on Google+ and now we proceed to creating of Google plus page badge and adding that to your site to help people follow you by directly adding you to their Circles from your site. This is just like the Facebook page where people "like" your Facebook page.

  1. To start with process of creating a badge visit the developer page of Google. Here you need to add the serial number of your Google page as shown in figure. If you don't have a Google plus page then you need to first create it. Badge for Google plus

  2. After adding the link you need to select the style of your badge. You will be able to preview the style in in the page itself.

  3. Now select the language you want the text in the badge to show. This should be the same language that you put your post in.

  4. Now select the type of syntax- if you run your website on HTML5 (examples of HTML 5 are the latest interfaces of Gmail, Facebook, Yahoo! Mail) then select "HTML5 valid syntax" otherwise select "Asynchronous" for all other site types.

  5. Code for Google plus badge
  6. Now just copy the code and paste it in the "head" location of the code of your site. I have take the example of a blogger blog HTML code to show you how to add the code.

Add code for Google plus badge
You are done, you badge should look something like in the image shown below
Sample Google plus page badge

How to adjust the size (length and width) and color of the Google+ badge


Google just released the attribute tags to be used in your Google plus badge code to adjust its size settings along with color settings to help you manage the color of the badge to best suit your site theme. The attributes parameters can be added to Google+ badge tag or can be assigned as key/value pairs in a call to gapi.plus.render
If you are using tag for Google plus badge then here are the attributes to use:
  • href: To be used to mention the URL of the Google+ page associated with your company brand or blog.

  • width: integer value, minimum of 100 for a badge of height 131px and 170 for a height of 69px

  • height: set the height either to 69 or 131. The default height value of the badge is 131px<. If you add any other value the badge will not show up correctly./li>
  • theme/color: Here we are stuck with only two options of light or dark. The default is “light” but if your background is dark it is suggested to change the attribute value to “dark”.

How to adjust the size and color of Google+ badge


Related Articles

How to Create your own page on Google Plus

Today Google Plus launched its most awaited feature of page creation for its Google Plus users. Users are rushing to create their own page. For now there is no restriction to create many pages but after creating 5 pages you will be asked to verify yourself.

More articles: Google plus page Google plus page badge Create Google plus badge

Comments

Guest Author: Kyle Schooler20 Nov 2011

an easier way to get to Google Plus is plus.gg



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: