How To Create Custom Google+ One Share Button

Last week when I was talking with one of my mates he explained me the importance of Google+ One button. Ever since he explained I thought of giving it a try on my blog. Unfortunately Google+ doesn’t have custom URL button like Facebook and Twitter. Alright so I went on to search for it and lucky found an awesome piece of tutorial from Bob Belderbos on this blog.

create custom Google Plus One button

Before I start sharing his piece of work, let me tell you about some related sources for custom Google+ share button.

Google+ bookmarklet from Aj Batac

Custom Google+ button from Alex Moss

I do recommend reading both of the above resources to get a clear idea of Google+ custom share button.

Custom Google+ Share Button

The mechanism used by Bel is somewhat similar to Facebook Like button. He used javascript to define height & width for the popup box and to grab the actual URL of that web page.

You can see the implementation of custom Google+ share button on the left hand side.

<a href="
  javascript:(
    function(){
    var w=480;var h=380;
    var x=Number((window.screen.width-w)/2);
    var y=Number((window.screen.height-h)/2);
    window.open('https://plusone.google.com/_/ 1/confirm?hl=en&url=' encodeURIComponent(location.href) '
      &title=' encodeURIComponent(document.title),'','width=' w ',height=' h ',left=' x ',top=' y ',
      scrollbars=no');
      })();">
  Share to Google </a>

Now if you want to add your own custom image for the Google+ use this code below

<a href="
  javascript:(
    function(){
    var w=480;var h=380;
    var x=Number((window.screen.width-w)/2);
    var y=Number((window.screen.height-h)/2);
    window.open('https://plusone.google.com/_/ 1/confirm?hl=en&url=' encodeURIComponent(location.href) '
      &title=' encodeURIComponent(document.title),'','width=' w ',height=' h ',left=' x ',top=' y ',
      scrollbars=no');
      })();" style="background: url(/ENTER THE IMAGE PATH/googleplus.png) no-repeat;">
  Share to Google </a>

Thats it. Thanks to Bel for sharing the code.

Follow us on Google+ for more updates.

January 6, 2012. This entry was posted in Tutorials and tagged , , , , . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

9 Responses so far!

  1. nice howto about google plus
    thanks :)

  2. Thanks :) I wish more custom buttons or plugins were available

  3. Even though Google+ says you “publicly gave +1″ this is not the case – check in the +1 tab of your Google+ profile! What works indeed ist sharing. But giving +1 is more important to me than sharing!

  4. Exactly, it works for “sharing” not for +1.

    Thanks anyway, but wish there was a way to give +1

  5. your code examples miss “+” and don’t work

  6. GET url for google plus confirm doesn’t work as expected anymore – it used to work for g+ though

  7. is there any way to add a comment by deafult on the window in the text box that says “add a comment”?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>