Tuesday 23 August 2011

Tutorial: How to apply a custom google plus +1 share button

So I needed a custom google+1 button for a website I am developing.. But there wasn't any around! Sure there were custom buttons, icons etc, but no way to implement them. I searched on the interwebz for a tutorial on how to make a custom google +1 share button.


But then I decided I might as well just make it myself.


It was surprisingly easy to be honest, and because of the lack of tutorials out there, I thought I'd write a quicky!


So, How did I turn this:







Into this: 







Well when you see below you'll kick yourself if you haven't already, because it's so simple.


Step 1
Pour yourself a brew, Now this can be either Tea or Coffee dependent on your preference.

Step 2 
The HTML 
<div class="googleplus">
    <div class="googlehider">
        <g:plusone annotation="none"></g:plusone>
        
        <!-- Place this render call where appropriate -->
        <script type="text/javascript">
          window.___gcfg = {lang: 'en-GB'};
        
          (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>
    </div>
    <img src="images/googleplus.png" class="mygoogle" />
</div>
Step 3 
Next, you'll have to get your custom icon, this is the one we are going to replace the original google +1 icon with. (Here's some good ones: http://www.iconfinder.com/search/search/?q=google%20plus
Make sure you name it googleplus.png and place it in your images folder.. - You may need to change the HTML above if your image is named or located elsewhere.


Step 4
The CSS
 
.googleplus {
 position:relative;
    /* - use this to position your share icon on your page -  */
}
.googlehider {
 opacity:0;
 height:30px;
 width:30px;
 position:absolute;
 top:0;
 left:0;
 z-index:3;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter:alpha(opacity=0);
}
.mygoogle {
 position:absolute;
 top:0;
 left:0;
 z-index:2;
 margin-left:6px;
}
Step 5 
Put it all together..

Step 6
Enjoy your freshly made brew.. it should still be warm ;-)

Walla! I hope this helps :-) 

40 comments:

  1. Thanks for posting this code. Doesn't seem to work on IE, have you tested?

    ReplyDelete
  2. Ah yes i have, however i forgot to add in the IE filters, (IE does not take note of opacity)

    the style for googlehider must change to
    .googlehider {
    opacity:0;
    height:30px;
    width:30px;
    position:absolute;
    top:0;
    left:0;
    z-index:3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
    }
    I have updated the original post now..

    thanks for the comment!

    ReplyDelete
  3. Thanks for posting this. I implemented last week and also noticed it doesn't work in IE. I updated the style for googlehider but it's still not working...?

    ReplyDelete
  4. @Anonymous - try clearing your cache (i'd imagine your stylesheet is being cached). As long as you have the opacity, -ms-filter, filter in the right order (as per the stylesheet above) it should work correctly.

    ReplyDelete
  5. Still not working for me for some reason. It works fine in Firefox and all Mac browsers. Could you take a look? http://www.creditnet.com/blog

    Thanks, I appreciate it!

    ReplyDelete
  6. Lisa,

    +1 isn't supported on IE7, but it looks like on IE8 your ready script is failing - I have just double checked on my other sites and they are working for IE8 >

    However I am using the googleplus script from Step 2 - not the one you've used for yours

    ( lines 417-434 of the source code )

    ReplyDelete
  7. Working beautifully in IE8, FF 3.6.23, and Opera 11.451. Thx!

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. The image isn't clickable... err..

    ReplyDelete
  10. @Anonymous - what image isn't clickable?

    Make sure you follow the steps accurately (especially the z-indexing).

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Thanks, this really helped me.. Found a short tutorial out there on how to do it with a facebook button.. But that one didnt work with IE. This one made both the Facebook button and the Google plus button work as intended! Thanks alot!

    Should also add that this worked on Chrome, IE, Firefox and Safari for me!

    ReplyDelete
  13. Thank you. It was exactly what I was looking for.

    ReplyDelete
  14. Thank you, great! Google will not block the page because it violates the guidelines?

    ReplyDelete
  15. Same question....does customizing Facebook and Google+ icons violate guidelines? I know Twitter doesn't care.

    ReplyDelete
  16. Thankyou Danny Hearnah, Good post but here missing counter of plusone.

    ReplyDelete
  17. in regards to violating the guidelines, at the time of posting this I could not see anything on there sharing page that stated you couldn't manipulate it.. but I'm not taking responsibility haha!

    In regards to counter.. if you understand how this works, you could easily manipulate it to include a counter - just select the counter type from the google page and play around a little.. see what you come up with, if there is a high enough demand i will post a custom google+ share with counter

    ReplyDelete
  18. I have to say job well done sir!
    Thank you very much! you saved me quite some time.
    Now would it happen that you know how to add text next to it with the link as well?

    ReplyDelete
  19. Thanks for posting this. It saved my day :-)
    Lars

    ReplyDelete
  20. Before i finished my cup of coffee, it was done! Thanks!

    ReplyDelete
  21. This works great. I think this is really awesome. But yeah, I've been looking all over the place for one that includes the counter. Do you think you can throw that in there too? Great Job!

    ReplyDelete
  22. Thanks, it took me awhile, but I got it to work. It would be great if you could do this for facebook too.

    ReplyDelete
  23. Thanks for a great tutorial. However, I also could not get the share button to work. It is not clickable and I'm getting http code: 400 (bad request). Is it because I'm testing locally on my machine (localhost) and not on a production server??

    ReplyDelete
  24. I think technically, this does violate Google's policy (read: first sentence of the third paragraph under policy http://www.google.com/webmasters/+1/button/policy.html ) But it sounds like they are mostly telling publishers to not do it to intentionally mislead users into clicking on it or an ad.

    I'd be a bit weary of using this technique on professional work, but for personal use, why not?

    ReplyDelete
  25. Thanks... Working fine for me.

    ReplyDelete
  26. Great Tutorial!

    ReplyDelete
  27. Thank You So Much

    ReplyDelete
  28. Hi Danny, great tutorial! I've got it working however I have a css hover effect on mouseover for my replacement Google button which isn't working with your solution, is there a way around this?

    ReplyDelete
  29. In case anyone else wants to use a rollover effect on their g+ button or facebook for that matter all you need to do is apply css:

    .googleplus .googlehider:hover + li a {
    background-position: 0 0;
    }

    ReplyDelete
  30. You're funny, thanks!

    ReplyDelete
  31. Finally find a working tutorial for this... I'm not able to display my g+ icon inline with the other social buttons, though.

    ReplyDelete
  32. This comment has been removed by the author.

    ReplyDelete
  33. surprisingly many posts about this but this is the only one that a) is thorough and b) works. I had to do a little tinkering but again, it works. Thanks much.

    ReplyDelete
  34. Thanks for this, as said by prevoious comments, it's the only one I found that worked.

    ReplyDelete
  35. Hi :) Thanks for this! I am extremely interested in finding a way to use custom icons with counters if you could please upload the scripts for this for all the major social sites I would literally kiss your feet! There is like,.. nothing out there..anywhere, unless you're on wordpress which I'm not xx

    ReplyDelete
  36. Hi, nice job, I was searching how to do a custom icon for g+1 and this code works perfectly. Thanks to share.

    ReplyDelete
  37. This comment has been removed by the author.

    ReplyDelete