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?

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