Add Google+ Share Button to Any Site

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:

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:

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):

..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:

..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 g+ 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&url=http%3A%2F%2Fperishablepress.com%2Fblank-space-whitespace-character-htaccess%2F&size=badge&height=20&action=share&annotation=none&hl=en-US&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&parent=http%3A%2F%2Fperishablepress.com&rpctoken=123318742&_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.

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.