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>

Interfile

Answer 1

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

Cloudlet

Answer 2

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

Microcurie

Answer 3

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.

Griggs

works for me! just put #___plusone_0{ width:72px !important; } in your css – Prestigious

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)

Contumacy

Answer 5

I found that if you're not trying to change the width of the physical button, but just trying to make the width smaller to adjust positioning.

The best way is to set:

#id_of_button { position: relative; left: (whatever works best)px }

Hope that helps.

Tref

Answer 6

The answer here are getting old so I wanted to drop a note on the possibility to align right the content of the google plus one button.

So if like me you are trying to force width to whatever size to align on right forget it and use align="right" instead!

<g:plusone align="right" size="medium"></g:plusone>

More info here: https://developers.google.com/+/web/+1button/

Wain