How Add a Google+1 Badge to Your Website
Google+ Badge
Google's new Google+ service is taking
the development world by storm, and why shouldn't it? It's minimalistic UI, use of cutting edge web
techniques, and overall usability make it Google+ one of the more impressive
web applications I've seen in quite a while (I was going to say "since
Google Wave", but that one didn't end up well, did it?) Google+ allows you
to share photos, links, statuses, and much more; consider it a mesh between
Twitter and Facebook.
Google+ will only gain more traction,
meaning that the information we share will be pushed to more and more
people. This presents an excellent
opportunity to promote our websites, much in the way that Twitter and Facebook
have. Let me show you a few different
ways to add the new Google+1 badge to your website.
The Simple HTML
Adding a Google+1 badge is as easy as
adding a few HTML tags:
<!-- one
button, uses canonical link or current URL -->
<g:plusone></g:plusone>
<!--
customized for a specific address -->
<g:plusone
href="http://davidwalsh.name/google-plus-badge"></g:plusone>
<!-- include
the JS file -->
<script src="https://apis.google.com/js/plusone.js"></script>
Provide the g:plusone tag the URL to
share via the HREF attribute (if none is provided, the page's canonical link
will be searched for and used, otherwise the current URL is used) and the
desired size of button via the size attribute.
This tag should be added wherever within the page that you'd like the
button to appear; the SCRIPT tag should be found at the bottom of the
page. If you'd prefer not to dabble with
the HTML yourself, Google provides a Google+1 button builder to do the dirty
work for you. Four button sizes are
currently offered.
You could also use the following HTML5
code to render your button:
<div
class="g-plusone" data-size="standard"
data-count="true"></div>
Your button must have the g-plusone CSS
class and data- attributes for options.
Deferring Loading
The HTML code above will render with the
rest of the page, but what if you want to render a button on your own
schedule? With Google's API, you to
render buttons whenever you'd like:
<!--
one button, uses canonical link or current URL -->
<g:plusone></g:plusone>
<!--
Place this tag in your head or just before your close body tag -->
<script
src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
<!--
Now render! -->
<script>
gapi.plusone.go();
</script>
Using {parsetags: 'explicit'} and
gapi.plusone.go() will turn your g:plusone tags into badges whenever you'd
like. You can also render a specific button with the following JavaScript code:
<script
type="text/javascript"
src="https://apis.google.com/js/plusone.js">
{"parsetags":
"explicit"}
</script>
<script
type="text/javascript">
function renderPlusone() {
gapi.plusone.render("plusone-div");
}
</script>
<body>
<a href="#"
onClick="renderPlusone();">Render the +1 button</a>
<div
id="plusone-div"></div>
</body>
Full API information as well as an
introductory video is available here.
There are a few more small customization options available so check them
out if you're looking to specify language or play with custom rendering.
Don't miss out on another avenue for
sharing your awesome web content with everyone!
Implementing Twitter, Facebook, and Google+1 sharing buttons takes 5
minutes but the amount of traffic you can gain via these referral avenues is
tremendous!
Post a Comment