Custom Google +1 icon

Est. Reading Time: 2 minute

I had a hard time finding an answer for this today and thought I’d share the solution. Please see the original article I found that helped me link to original article. My code did turn out to be slightly different given the positioning of the Google +1 in the footer of the Beacon main site but it was based on the code in Danny’s article.

First I needed to find an icon like the one requested. Here are a few more options on where to find good icons:

Now on to the code. I used Googles customize your +1 button to get the google parts of the code I needed.

I first placed this part of the code in the head of the document

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

Then I took Danny’s HTML code and changed it up a bit to include my unique URL and placed it where I wanted it on the HTML page

<div class="googleplus">
<div class="googlehider">
<div class="g-plusone" data-annotation="none" data-href=""></div>
<img src="images/googleplus.png" class="mygoogle" />

Lastly I took Danny’s CSS code and also changed it up a bit so that it worked in the footer of the main Beacon site.

.googleplus {position: relative; display:block; float:left; padding-right:5px; width: 35px; height: 35px;}
.googlehider {opacity:0; height:35px; width:35px; position:absolute; top:0; left:0; z-index:3; visibility: hidden;}
.mygoogle {position:absolute; top:0; left:0; z-index:2; top:1px;}