adjusting width of google plus 1 button

Question

I am trying to figure out how to modify the width of the Google plus 1 button...

In the documentation it says you can set a width.

Currently, when I examine the element using Firebug... it says the width is set to 90px, which I would like to set to 70px... is that possible?

    <!-- Place this tag where you want the +1 button to render -->
    <g:plusone size="medium"></g:plusone>

    <!-- Place this render call where appropriate -->
    <script type="text/javascript">
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>

Answer 1

The ID isn't always the same if you are using more than one button, so you can use this bit of CSS to catch multiple buttons:

[id^=___plusone] { width:72px !important; }

Which applies to all elements that have an Id that starts with ___plusone, which seems to be Google's namespace for the button

Answer 2

Don't know if the iframe id is always the same but if it is you can use css + !important to override the element style. Something like:

/* this overrides 90px to 72px width to +1 button */
#___plusone_0{ width:72px !important; }

Hope it helps.

Answer 3

You can pick from a couple of height settings at the code generator, but you can't pick an arbitrary size value.

Answer 4

I was frustrated by the buttons not all being the same size as well so I managed through css + javascript to get a 32x32 +1 button working. You can get the details here:

http://bashireghbali.com/technology/google-plus-one-button-32x32/

note that on page reload it will not show +1ed state (no callback for that yet unless someone knows of a yet unannounced one)