Google +1 Button recent changes – Annotation



Hello,

Suddenly today I saw Google +1 button to be wider & smaller on my business website. This is not what I had configured.

Notezilla - Google + 1 Button - Inline

I am using the sharrre social media plugin to show the social media buttons. But the problem was not with the plugin.

With further investigation I found that Google +1 button takes ‘size’ and ‘annotation’ parameters as part of its configuration. In order to make the button look like in the below picture, ‘size’ must be set to ‘tall’ and ‘annotation’ to ‘bubble’. Since ‘bubble’ was the default value of annotation, I did not set it explicitly in the configuration. To fix the above, I had to set it explicitly now. May be because Google had changed the default value to ‘inline’? Not sure if this is just an accidental change or an intentional one from Google.

Notezilla - Google + 1 Button - Bubble

Here is the change I made in a call to Sharrre’s plugin function (See line #12). If you are using some other plugin, you would need to look at the options that it provides to configure Google +1 button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  $('#social-media-panel').sharrre({
                share: {
                    googlePlus: true,
                    facebook: true,
                    twitter: true,
                    digg: false,
                    delicious: false,
                    stumbleupon: false,
                    linkedin: false
                },
                buttons: {
                    googlePlus: { size: 'tall', annotation: 'bubble' },
                    facebook: { layout: 'box_count' },
                    twitter: { count: 'vertical' },
                    digg: { type: 'DiggMedium' },
                    delicious: { size: 'tall' },
                    stumbleupon: { layout: '5' },
                    linkedin: { counter: 'top' }
                },
                enableHover: false,
                enableCounter: false,
                enableTracking: true,
                url: socialMediaUrl
            });

Thanks :)