O'Reilly

Add a Google+1 Badge to Your Website

By on  
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?  No worries -- Google's API allows 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!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Detect DOM Node Insertions with JavaScript and CSS Animations

    I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API....

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • Create a Dynamic Flickr Image Search with the Dojo Toolkit

    The Dojo Toolkit is a treasure chest of great JavaScript classes.  You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo.  You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within...

  • Dynamically Load Stylesheets Using MooTools 1.2

    Theming has become a big part of the Web 2.0 revolution. Luckily, so too has a higher regard for semantics and CSS standards. If you build your pages using good XHTML code, changing a CSS file can make your website look completely different....

Discussion

  1. NIce, thanks :)

  2. Sam

    Awesome, will have to get this on some of my sites then.

    Just a quick one, is there not a valid XHTML way of doing it? I am assuming data-* attributes are not classed as valid xhtml? Especially the namespaced element method.

  3. Chris

    Any idea how i can edit the preview-image and excerpt that is shown in google+? Like the og:image tag in facebook open graph.

    It shows some weird and unrelated images and text from somewhere on the page…

    • Not yet, but I’ll investigate.

    • still trying to solve that too. but did not get any information yet. also, something similar to Facebooks URL Linter would be nice during development. I will post solution here on success.

    • Any update on whether og:image or image_src works for Google Plus? I’m currently pulling out what little hair I have left trying to figure this out.

      I’m also wondering whether Google Plus has a URL/link cache that needs clearing.

    • Sasa

      Try passing page url like this:

      gapi.plusone.render(‘element’, {‘href': ‘example.com’);

    • Did any one find how to over ride unrelated images from page with single image

    • ramya

      Did any one find how to avoid unrelated images from page

  4. Makash

    Yeah awfull !!
    Can I have a g+ invitation please ? ;)

  5. Thank you for this simple explanation.

  6. Oops, you mean a Google +1 badge, not a Google+ badge, right? Google+ is (or will be) about 8 different and bigger things than just the +1 button, but only the +1 button is currently publicly available to site developers.

  7. We used this excellent plugin Plus 1 by Steven Gray for our site eMirror – the world’s only online mirror.
    http://emirror.in/

  8. Thanks mate, your a good egg :)

    Google should really over thought long and hard about profile buttons before launching G+ – i’m rather worried.

  9. Alex

    Thanks David
    One question though what if you needed multiple buttons in one page, for example in a list.
    Is it simply the case of providing different href per button?

  10. Thx for this article, however that’s a pity +1 integration breaks W3C code validity, so I wouldn’t put it on my website ^^

  11. Thanks you for the instructions. Our clients are sure to be asking for this soon, and now I am prepared!

  12. Sven

    Thanks David Walsh.

    Do you know if it is possible to add a Google +1 button with pure html (no javascript)?

  13. Carsten Milkau

    Text is invalid HTML (because only either src oder Text is allowed) and causes a JS error in FF7, as it tries to parse {parseTags: … } as normal JavaScript, which is doomed to fail.
    Maybe you can find a cleaner way to do this, like
    gplusone_options = {…}

    That’d be great!

  14. Carsten Milkau

    Text
    is invalid HTML (because only either src oder Text is allowed) and causes a JS error in FF7, as it tries to parse {parseTags: … } as normal JavaScript, which is doomed to fail. Maybe you can find a cleaner way to do this, like
    gplusone_options = {...};

    That’d be great!

  15. Carsten Milkau

    Waah, wrapped in code-Tags and still stripped -.- Last attempt with entities:

    Causing JS Error:

    <script src="...gplusone..."> Text </script>
    

    Suggested improvement:

    <script src="..."> gplusone_options = {...}; </script>
    <script src="...gplusone..."></script>
  16. Thanks for this, I put a G+ Plus 1 Button on my webcam page. :)

  17. Hi Thanks for the post.
    I added google plus badge to my blog, it works on PCs and laptops..
    when i view my site in mobiles, G+ badge and plus one button are not shown..
    may i know the reason why its not shown?
    I love G+ because it increases your chances to show on top in search engine

  18. Can you tell me how to change we’re word with site name in google plus badge

  19. i wanna put it on floating bar… is it possible

  20. Hello,
    see i’m bit new to this. i have a question, in Webmaster Tools you get different button that to normal +1 button are they both different?

  21. can you plz tell me what is the advantages of google+ button
    and the diffrence of badge and button??

  22. Google+ badge, right? Google+ is (or will be) about 8 different and bigger things than just the +1 button, but only the +1 button is currently publicly available to site developers.Maybe you can find a cleaner way to do this, like
    gplusone_options = {…}

  23. Seems alittle bit complicated just to add the g+1 button to my website. Can’t you get this code from Google’s website?

  24. Very useful script.. i will definitely use one of theses!

  25. Hello,
    I have a static website and i copy pasted this code in the source but its not showing anything on the page.
    i have no programming knowledge so i don’t know what i am doing.

  26. Thank you it works great on my website.

  27. Hi,

    Any one any idea how to get a Google Plus Side Follow Widget which is Vertical in nature and when hover pops a little and then customer can share the site.

    Thanks & regards

  28. The latest badges for Google plus are really nice and fit snuggly in the sidebar.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...