If this is the first you’ve heard of this new Google +1 (Plus One) Button, checkout the official page.
First, add this in between your <head> tags:
<script src="https://apis.google.com/js/platform.js" async defer></script>Second, add this just below the <body> tag:
<div style="position:fixed;bottom:0;left:50px;z-index:1"><g:plusone size="tall"></g:plusone></div>This will fix the Google +1 Button bottom-left on your pages. It will stay there, fixed, as the page scrolls.
Depending on your styles or preferences, you may want to place the button somewhere else. If you like my suggestion, but it’s not hugging the bottom of the page perfectly, you can try negative margins: margin-bottom:-3px. Or, change the positioning altogether, replacing bottom with: top, left, or right.
If you want to center the button exactly you might try something like:
<div style="position:absolute;top:0;left:50%;margin-left:-25px;z-index:1"><g:plusone size="tall"></g:plusone></div>That’s all if you’re div-positioning. If you’ve placed the code directly into your content and not just the body, here are some different positioning tips:
Float Left:
<div style="float:left"><g:plusone size="tall"></g:plusone></div>Float Right:
<div style="float:right"><g:plusone size="tall"></g:plusone></div>Center:
<div style="text-align:center"><g:plusone size="tall"></g:plusone></div>There are also a few different buttons to choose from:
Small:
<g:plusone size="small"></g:plusone>Medium:
<g:plusone size="medium"></g:plusone>Standard:
<g:plusone></g:plusone>Tall:
<g:plusone size="tall"></g:plusone>For XHTML / HTML5 Strict Websites (for validation)
<div class="g-plusone" data-size="standard" data-count="true"></div>Let me know if you need any help in the comments below.