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

How to customize Google+ badge and adjust width and height

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

Post Comment: