14

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

6 回答 6

17

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

于 2012-06-11T16:19:27.050 回答
12

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.

于 2011-09-30T08:32:39.427 回答
2

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

于 2011-09-22T14:52:01.890 回答
1

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)

于 2012-01-29T09:55:13.907 回答
1

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.

于 2014-05-19T17:07:12.293 回答
0

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/

于 2016-10-29T16:45:43.777 回答