So I needed a custom google plus +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:

oldplus

Into this:

newplus
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>
 </div>
 
 <img src="images/googleplus.png" class="mygoogle" />
</div>

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

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 over atย IconFinderย )
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 ๐Ÿ™‚