How to customize Google+ badge and adjust width and height


Google introduced the Google+ badge few weeks ago and webmasters have been religiously using them. In this article, I will explain how to customize the Google+ badge to adjust the width and height of the badge to suit your website layout.

Since Google announced the Google+ badge for websites and blogs, many webmasters have been using them everywhere they could. Recently, Google started going very aggressive on promoting Google+ social network by giving some weightage for the number of +1s received for the web pages. this prompted many more webmasters to start using the Google+ badge everywhere they could.

One of the biggest challenges for webmasters is adjusting or changing the height and width of the Google+ badge to suit the layout of their website or blog template.

The current version of Google+ badge does not allow changing the width and height. They have a fixed dimension but comes in 2 flavors - a big one and a small one. Both of they have visual differences and using one for the other is not an alternative. If you look at the Google+ forums, you would see many webmasters asking for the customization feature to change the width and height of Google+ badge.

Many websites are custom developed and so they could change the layout to suit the Google+ badge dimensions, even though it is a big pain to alter the site layout to match a widget they want to use! In many other cases like blog templates, they can't change the template. Those users cannot use Google+ badge just because it does not fit in to the dimensions allowed by their template.

Here is a good solution I recently found at the Google+ platform issue tracker website:

All you have to do is, use some custom styling using CSS to alter the width and height of Google+ badge.

How to change the width and height of Google+ badge using CSS?


To change the width and height of Google+ badge to suit the dimensions allowed by your site layout, you can insert the following CSS style in the header of your web page template:

<style type="text/css">
#___plus_0 iframe {
zoom: 1.0;
-webkit-transform: scale(0.70);
-webkit-transform-origin: 0 0;
-moz-transform: scale(0.70);
-moz-transform-origin: 0 0;
-o-transform: scale(0.70);
-o-transform-origin: 0 0;
}
</style>


You can see the transform properties are used to customize the Google+ badge and reduce the size of the Google+ iframe object. You may adjust the transform values to match your requirement.

To see a demonstration of the real use of the CSS to reduce the height and width of the Google+ badge, take a look at the right side of this site. You can see the dimensions of the badge are changed to appear in a smaller size. A bigger size badge would fit in to this layout, but we are showing a small size Google+ badge for the demonstration of using CSS to reduce the size of the badge.

By changing the transform or zoom factor, you are just making the badge look differently. This may not work correctly in some browsers. So, we should wait for a better solution from Google. Until then, this work around would work for us.

Reference: This solution is provided as a work around in the Google+ platform preview official site http://code.google.com/p/google-plus-platform/issues/detail?id=140#c13

Read How to download all your Facebook data to Google plus?


Related Articles

How Google+ affects SEO and your website's ranking?

Are you a webmaster looking for ways to promote your website through the newly arrived Google+ ? In this article I will discuss how Google+ affects SEO and how Google Plus influence the search engine ranking.

Top five tips for using Google+

This article mentions the top five tips for users of Google+. Explore the features of Google+ with the help of this article and know how to use this latest offering of Google for your personal as well as business purposes

What are the reasons for Google+ traffic decline according to Experian Hitwise data?

This article throws some light on the reason why Google plus after getting huge number of members and consequent high hits is finally showing sign of fatigue in terms of reduced registrations and reduced average time on the site. Read on to know what Hitwise- who tracks website traffic says and what might be its future consequences for Google+

More articles: Google Plus Social Networking Sites

Comments

No responses found. Be the first to comment...


  • 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: