Post break

Thursday 16 February 2012

Google Plus 1 custom button tip

Google's Plus 1 Standard button design

How to customise a Google plus 1 button? Whilst trying to sort some social buttons out for a client, we came across an issue with trying to replace the Google Plus 1 standard button. We needed to simply replace the standard look with a customised icon of our own design.

After much trial and error we came across a neat little solution that did some of the work we needed to do. It cleverly disguises the Google icon and overlays it with your own by using simple css.

We thought that we would share this little gem with you!

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
<style>
.custom_gplusone{
overflow: hidden;
background: url(YOUR_CUSTOM_ICON.png) top left no-repeat;
height: 30px;
width: 161px;
position: absolute;
}
.custom_gplusone:hover{
}

.gplusone_hide {
height: 30px;
width: 161px;
overflow: hidden;
position: absolute;
z-index: -1 !important;
}
</style>
</head>
<body>
<div class="custom_gplusone">
</div>
<div class="gplusone_hide">
<g:plusone></g:plusone></div>
</body>

Basically, what we do is to first is to create a div for your custom button to reside in. Then we wrap the 'g:plusone' tag in another div which we shall hide and place below our new customised icon div. It is just a matter then of creating the relative css to reference your new icon and hide the Google standard version.

Make sure you place the Google Javascript in the head tags of your html or within your associated header file, for instance a header.php file.

We hope it helps and it's useful!

No comments:

Post a Comment