Latest TweetsVerify any search engine or visitor via CLI Forward-Reverse Lookup perishablepress.com/cli-forwar…
Perishable Press

Add Google+ Share Button to Any Site

[ Google+ Share Button
g+ Share button
Word on the streets is that the new Google+ Share button is the best way yet to benefit from Google’s myriad social-media services and all-important search-engine. And Google makes it SO easy to add the new Share button to your website. This article explains what it is, where it fits in with all the other social-Google stuff, and of course how to add the g+ Share button to any site.

What is Google Share?

If this was Google’s only social-media project, Share would be a no-brainer: it’s for sharing stuff on Google+. But it’s not. With the new Share button, there’s Google, iGoogle, Google+, Google+ +1, and now, Google+ Share. Huh? That’s a lot of plus signs and “ooh” sounds.. Whatever, here’s an overview/recap for the confused masses (approx chronological order):

  1. Google bookmarking using your account profile
  2. iGoogle add links and content to your startpage
  3. Google+ alternative to Facebook
  4. Google +1 similar to Facebook’s “Like”, but for search results
  5. Google+ Share makes it really easy to share stuff on Google+ (see #3)

..and for the visually inclined:

[ Google's social-media projects ]

What’s it all mean? Far from me to explain it all, but I can tell you honestly that I’ve paid little attention to any of Google’s social-media services until now. From what I can tell, for Google 5th time’s a charm — g+ Share brings one-click content sharing with the world’s most influential search engine. Plus the wizardz at Google have made it absolutely drop-dead easy. Sound good? Here’s how to set it up on your site in a matter of minutes..

How to add the Google+ Share button to your site

To get going with the g+ Share buttons, copy/paste the following code anywhere in your HTML file:

<script src="https://apis.google.com/js/plusone.js"></script>
<g:plus action="share" annotation="bubble"></g:plus>

Done. Visit your web page in a browser and you should see the Share button displayed like so:

[ Example of Google+ Share button ]

That’s really all there is to it. Once you’ve got the Share button on your pages, visitors can quickly and easily share your content with their circles (public and/or private), friends, and just about anyone else using Google. When the visitor hovers over the button, a simple popup box displays this (if logged-in to their Google+ account):

[ Share button popup on mouseover/hover (logged in) ]

..or, if the user is not logged in to any Google account, the popup will display a simple “Share this on Google+” message. If an unlogged user clicks the button, they are invited to sign up for a Google+ account. If the user is already logged in, clicking the Share button results in a popup box similar to this:

[ popup after user clicks the Share button (logged in) ]

..and then Google does its thing and takes over from there. It’s seductively simple — something worth checking out at least once before loving it or moving on to the next. Typically I’m not a huge social-media buff, but this one’s fun, easy, and worth it.

How to customize the Google+ Share button

The previous “quick-n-dirty” method for adding the Share button is great to get things rolling, but eventually you may decide that some customization is in order. Using the official g+ Share dev page with some help from +1 Button dev page, here are some examples showing how to customize and implement the Google+ Share button.

Easy way for basic customizing

For easy & basic customizing, visit the g+ Share dev page and play with the Share-button generator. Currently, you can only specify the Annotation, Size, and Language, but it may be enough to get the job done.

Asynchronous JavaScript loading

This is the method I’m using here at Perishable Press, with the Share buttons displayed beneath the title on single posts only (see beneath the title of this post for an example).

<g:plus action="share" annotation="none"></g:plus>
<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>

In addition to the asynchronous loading, this example also disables the “Share this on Google+” annotation to keep things super-simple. Here are some of the other tag attributes for the Share button:

  • href — URL to share (default = current page)
  • annotation — inline, bubble, vertical-bubble, or none (default = bubble)
  • width — maximum width for the button (no default)
  • height — exact height of the button (default = 20)
  • align — left or right (default: left)
  • expandTo — top, right, bottom, left (default = empty list)
  • onstartinteraction — function(jsonParam) (no default)
  • onendinteraction — function(jsonParam (no default)

For more information on this and other parameters and attributes, visit the Share dev page.

Add the Google+ Share button to WordPress

With WordPress, adding the Share button works the same way: just add the code anywhere in your theme template files and done. If you only want to display the Share button on single posts (as mentioned previously), move the chunk of JavaScript code to the footer (just before the closing </body> tag), and wrap it with a WP conditional tag:

<?php if(is_single()) { ?>
<!-- put the Share-button JavaScript here -->
<?php } ?>

WordPress conditional tags enable you to display the button just about any type of pageview — single-posts, archive views, pages, and more. Once the JavaScript is optimally configured, add the following code snippet wherever you would like to display the button:

<g:plus action="share" annotation="none"></g:plus>

And in case you were wondering about displaying multiple Share buttons, say, on your home page, go right ahead — should work just fine.

How to style the Share button with CSS

One minor annoyance I encountered while implementing the Share button is that it’s impossible to style the contents of an <iframe> with CSS. And that’s exactly how the Share button is displayed on your site — using a LOT of markup all rolled up into a convenient <iframe>. As an example, here’s the markup generated for the Share button on a recent post

<div id="___plus_0" 
     style="height: 20px; 
     display: inline-block; 
     text-indent: 0pt; 
     margin: 0pt; 
     padding: 0pt; 
     background: none repeat scroll 0% 0% transparent; 
     border-style: none; 
     float: none; 
     line-height: normal; 
     font-size: 1px; 
     vertical-align: baseline; 
     width: 59px;">

	<iframe width="100%" 
		scrolling="no" 
		frameborder="0" 
		src="https://plusone.google.com/_/+1/sharebutton?plusShare=true&amp;url=http%3A%2F%2Fperishablepress.com%2Fblank-space-whitespace-character-htaccess%2F&amp;size=badge&amp;height=20&amp;action=share&amp;annotation=none&amp;hl=en-US&amp;jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fgapi%2F__features__%2Frt%3Dj%2Fver%3DqSmw0ZimOMA.en.%2Fsv%3D1%2Fam%3D!ZYKB1uRfgCaIKcjORg%2Fd%3D1%2Frs%3DAItRSTNFI795jiXRZoeKYjOooBGIFuZw-g#id=I1_1335943291567&amp;parent=http%3A%2F%2Fperishablepress.com&amp;rpctoken=123318742&amp;_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart" 
		name="I1_1335943291567" 
		id="I1_1335943291567" 
		vspace="0" 
		tabindex="0" 
		style="position: static; 
		       top: 0pt; 
		       width: 59px; 
		       margin: 0px; 
		       border-style: none; 
		       height: 20px; 
		       left: 0pt; 
		       visibility: visible;" 
		marginwidth="0" 
		marginheight="0" 
		hspace="0" 
		allowtransparency="true" 
		title="+Share"/>
</div>

That’s a big chunk, containing lots of inline styles on both the inline frame and the parent <div> container. It’s also relatively “hookless” — no obvious classes for CSS styling, not to mention it can be difficult to override inline styles and next to impossible to style the contents of the <iframe>, which involves even more code that we won’t get into here. But if you’re savvy with your browser, there are ways (e.g., Firebug) of getting in there and inspecting things in excruciating detail.

The easiest modular approach that I could muster is simply wrapping the Share tag/element with a parent <div class="gplus"> (block-level) or <span class="gplus"> (inline), and then style with CSS as needed (or as much as possible). Here is an example:

<span class="gplus"><g:plus action="share" annotation="none"></g:plus></span>

So virtually nil control over the actual Share button, but the parent .gplus makes it easy to tweak the location of the button with something like this:

.gplus { position: relative; top: 5px; }

The .gplus (or whatever) hook makes it easier to fine-tune position, background color, additional borders, or whatever gels with the design.

Notes & stuff

Some potentially useful bits when working with Share buttons..

  • How is the share URL determined? — 1) explicit href attribute on share tag, 2) <link rel="canonical" href="http://www.example.com">, or 3) document.location.href
  • Placement of the JavaScript/share-tag? — the JavaScript is recommended placed directly after the share tag (markup), but it may be placed anywhere on the page (footer, header, body).

I also noticed that pages containing the Share button seemed to reload the page occasionally as I was testing things and logging in and out of my Google+ account. It looks like this behavior helps determine the contents of the popup/modal window. Not sure how that works without looking into it, so if anyone knows more about that, shout it out. For more of the “details” involved with Share, check the FAQs.

Update

Looking closer at the differences between Share and +1 buttons:

  • Share button: share with select groups of people (public or private); no +1 option available directly in popup window; no +1 option available for the actual article anywhere, but you can +1 your share post (as seen in your Google+ account).
  • +1 button: share with select groups of people (public or private); clicking the button “plus-one’s” it and your +1 vote is counted publicly; you also have option to share right there in the popup window; you can also +1 your share post (as seen in Google+ account).

Based on this, it looks like Share is for sharing only, but +1 is for both sharing and adding +1 for the article. So now I’m checking out both: Share button before the article, and +1 after.. will report in a month or so as to the effectiveness or not of each one — stay tuned.

Jeff Starr
About the Author Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
Archives
22 responses
  1. Actually I don’t see your share button close to the title of the post, or anywhere else in the page. Can you clarify exactly where it should be? Maybe there’s something wrong with my Firefox. :P

  2. Jeff Starr

    I just checked with Fx 10 and it’s displayed just beneath the title and to the left of the meta info (“Posted by..”) – let me know if it’s not there..

    • Sorry, I have to apologize… Looks like I had an AdBlock Plus filter set up to hide floated iframes linking to Google, in order to prevent “in-post” ads. :P

  3. I’ll be honest and say I find the whole Google social media/sharing suite thing very confusing… someone’s made a real error in using such an indistinct naming system.

    That aside, do you promise in a month or two’s time to report back on the possible uplift to visitor numbers?

    Cheers
    I

    • Jeff Starr

      Sure, just remind me in a month or so with a comment and I’ll report whatever stats are relevant.. I’m interested as to its effectiveness as well. I mean, it looks great and is easy to use, but if nobody uses it, then it’s just as easy to remove. Note that I opted to place the button before articles instead of grouping it with the other social-media buttons at the end. We’ll see how it goes :)

  4. still don’t really get the difference as this is the same the g+1 button does. Or did they change that behavior after introducing the g+Share button?

  5. Google just pulled a Facebook by implementing additional buttons. Now site owners have to decide which is more valuable to them. It’s not an easy decision.

  6. I too see no such button – and I suspect that It is because I also have ad blocking on by default. I would think that many (if not most) use the same blocking settings because whatever I’ve got is just the “default” settings. Agree that there’s a disconnect here because this isn’t really an ad – per se. But, I’m not willing to endure ads just so I can see ‘share’ buttons. Isn’t there a different method or setting or something?

    • Mine was not a default setting, it was a rule I added and forgot about. :)

    • Jeff Starr

      I would hope Google would be savvy enough to avoid getting snared by the various ad-blockers’ default settings.. Either way though it’s fine with me if people don’t see the Share button, just wanted to try it out.. as long as the article content is visible it’s all good.

  7. Thanks for the post and especially for explaining all those google + things in the very beginning of your post. I really liked it because I’ve been wondering for white a while now what the actual difference is. :)

  8. Hi— Terrific site.. Find your articles interesting and helpful… Very well written… Here’s my problem: I have a website that uses Yahoo Site Solution.. For some reason, it won’t directly accept the javascript code when adding Facebook or Google plugins… (Facebook offers an “Iframe” option, which seems to work… Google does not )…
    Anyway, I’ve spent weeks trying to figure out an answer (and I’ve read tons of blogs) — no success.. then, I discovered your site and noticed your iFrame example… When I copied that code, Yahoo Site Solutions Widget accepted the code; the Google Plus icon appeared! A huge victory… However, it doesn’t work…
    So, here’s my question: how can I add Google buttons to Yahoo Site Solution? Is there an “IFrame code I can use” (that is similar to Facebook Developer’s code)….
    If you have any ideas or need more details, let me know.. *** As mentioned, your information is the ONLY source that has come close to getting a google plus button on my site… Thanks, Lance..
    PS: I have another site that uses sitebuilder.. mrmathmechanic.com I easily added Google Plus One to that site…
    PPS: I’m a complete novice — slowly learning WordPress, javascript, etc…

  9. Pantho Bihosh June 22, 2012 @ 9:58 am

    Hi,

    Thanks for your nice help. Just I have added the share button to my website homepage to follow your instruction. Thank you so much.

  10. Hi, and thanks a million for all the information you are sharing with the rest of us. It’s worth a hug!

    I am bulding a multilingual e-commerce platform, so I wonder: How do I get G+ to understand multiple languages without having a G+ button for each one of them?

    Regards from Sweden

    • Jeff Starr

      I wish I could help with that but honestly I don’t know about configuring G+ for multilingual setups.. I thought Google detected the language automatically?

  11. Hi Jeff, I just tried to buy the book. I am no friend of paypal so I wonder if there’s another way to buy it?
    Regards

  12. dave larbalestier December 12, 2012 @ 12:32 pm

    i want to remove google +share from my system, how do i remove it ?????

[ Comments are closed for this post ]