{"id":1604,"date":"2011-07-09T16:45:20","date_gmt":"2011-07-09T23:45:20","guid":{"rendered":"https:\/\/bryanhadaway.com\/?p=1604"},"modified":"2025-05-22T15:23:26","modified_gmt":"2025-05-22T22:23:26","slug":"google-1-button-script","status":"publish","type":"post","link":"https:\/\/webguy.io\/blog\/google-1-button-script\/","title":{"rendered":"Google +1 Button Script"},"content":{"rendered":"<p><script src=\"https:\/\/apis.google.com\/js\/platform.js\" async defer><\/script><\/p>\n<p><em>If this is the first you&#8217;ve heard of this new Google +1 (Plus One) Button, checkout the <a href=\"https:\/\/developers.google.com\/+\/web\/+1button\/\">official page<\/a>.<\/em><\/p>\n<p>First, add this in between your <em>&lt;head&gt;<\/em> tags:<\/p>\n<pre><code>&lt;script src=&quot;https:\/\/apis.google.com\/js\/platform.js&quot; async defer&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Second, add this just below the <em>&lt;body&gt;<\/em> tag:<\/p>\n<pre><code>&lt;div style=&quot;position:fixed;bottom:0;left:50px;z-index:1&quot;&gt;&lt;g:plusone size=&quot;tall&quot;&gt;&lt;\/g:plusone&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>This will fix the Google +1 Button bottom-left on your pages. It will stay there, fixed, as the page scrolls.<\/p>\n<p>Depending on your styles or preferences, you may want to place the button somewhere else. If you like my suggestion, but it&#8217;s not hugging the bottom of the page perfectly, you can try negative margins: <em>margin-bottom:-3px<\/em>. Or, change the positioning altogether, replacing <em>bottom<\/em> with: <em>top<\/em>, <em>left<\/em>, or <em>right<\/em>.<\/p>\n<p>If you want to center the button exactly you might try something like:<\/p>\n<pre><code>&lt;div style=&quot;position:absolute;top:0;left:50%;margin-left:-25px;z-index:1&quot;&gt;&lt;g:plusone size=&quot;tall&quot;&gt;&lt;\/g:plusone&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>That&#8217;s all if you&#8217;re div-positioning. If you&#8217;ve placed the code directly into your content and not just the body, here are some different positioning tips:<\/p>\n<p>Float Left:<\/p>\n<pre><code>&lt;div style=&quot;float:left&quot;&gt;&lt;g:plusone size=&quot;tall&quot;&gt;&lt;\/g:plusone&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>Float Right:<\/p>\n<pre><code>&lt;div style=&quot;float:right&quot;&gt;&lt;g:plusone size=&quot;tall&quot;&gt;&lt;\/g:plusone&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>Center:<\/p>\n<pre><code>&lt;div style=&quot;text-align:center&quot;&gt;&lt;g:plusone size=&quot;tall&quot;&gt;&lt;\/g:plusone&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>There are also a few different buttons to choose from:<\/p>\n<p>Small:<\/p>\n<pre><code>&lt;g:plusone size=&quot;small&quot;&gt;&lt;\/g:plusone&gt;<\/code><\/pre>\n<p><g:plusone size=\"small\"><\/g:plusone><\/p>\n<p>Medium:<\/p>\n<pre><code>&lt;g:plusone size=&quot;medium&quot;&gt;&lt;\/g:plusone&gt;<\/code><\/pre>\n<p><g:plusone size=\"medium\"><\/g:plusone><\/p>\n<p>Standard:<\/p>\n<pre><code>&lt;g:plusone&gt;&lt;\/g:plusone&gt;<\/code><\/pre>\n<p><g:plusone><\/g:plusone><\/p>\n<p>Tall:<\/p>\n<pre><code>&lt;g:plusone size=&quot;tall&quot;&gt;&lt;\/g:plusone&gt;<\/code><\/pre>\n<p><g:plusone size=\"tall\"><\/g:plusone><\/p>\n<h2>For XHTML \/ HTML5 Strict Websites (for validation)<\/h2>\n<pre><code>&lt;div class=&quot;g-plusone&quot; data-size=&quot;standard&quot; data-count=&quot;true&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n<p><em>Let me know if you need any help in the comments below.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If this is the first you&#8217;ve heard of this new Google +1 (Plus One) Button, checkout the official page. First, add this in between your &lt;head&gt; tags: &lt;script src=&quot;https:\/\/apis.google.com\/js\/platform.js&quot; async defer&gt;&lt;\/script&gt; Second, add this just below the &lt;body&gt; tag: &lt;div style=&quot;position:fixed;bottom:0;left:50px;z-index:1&quot;&gt;&lt;g:plusone size=&quot;tall&quot;&gt;&lt;\/g:plusone&gt;&lt;\/div&gt; This will fix the Google +1 Button bottom-left on your pages. It will <a href=\"https:\/\/webguy.io\/blog\/google-1-button-script\/\" class=\"more-link\">&#8230;<span class=\"screen-reader-text\">  Google +1 Button Script<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39,20,17,4,5],"tags":[239,254,221,208,218,281,250,205,206],"class_list":["post-1604","post","type-post","status-publish","format-standard","hentry","category-code","category-freebies","category-how-to","category-seo","category-web-design","tag-code","tag-css","tag-freebies","tag-google","tag-how-to","tag-html","tag-search-engines","tag-seo","tag-web-design"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts\/1604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/comments?post=1604"}],"version-history":[{"count":0,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts\/1604\/revisions"}],"wp:attachment":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/media?parent=1604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/categories?post=1604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/tags?post=1604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}