How to customize your own Google plus one image

I haven’t posted for quite awhile since I got here in New York and start working for firstborn. I think I will work here as a Web developer but no longer a Flash developer even though my title is a Flash developer when I got hired.

Now let’s cut to the chase – How to customize your own Google+1 image. Well, I am not saying to teach you how to design a Google Plus image that links back to your Google+ profile. I mean the Google+1 button you can create here

The sizes of the button you can create are as following:

Well, it is true that here is no solution to change the image of the button because the image is in the iframe that everything is from the Google. However, if you want to do some adjustment of the image just like this project I made for Sony, I think this post can help you.

As you might notice that, the Google Plus button in that project are all rounded square. Which make it looks better together with the other social icons like the facebook icon and the twitter icon. How did I make it?

First of all, you need to create a new image for the google plus, I created this:

Well, there are some rules to create your customized button:

• You can only design the border of the button.
• You have to leave the rectangle area in the center of your image for the real button.

The image I create above is 20 x 20 with 1 pixel border on left, bottom and right sides and 3 pixels color bar at the top. The clickable area of the button will be at (1,3) with the size 18×16. Therefore, I made the following style sheet and html code:

#container {
  position: relative;
  width: 20px;
  height: 20px;
  background-image: url(button.png);
}
#button-mask{
  position:absolute;
  left: 1px;
  top: 3px;
  width: 18px;
  height: 16px;
  overflow: hidden;
}
#button{
  position:absolute;
  left: -9px;
  top: -6px;
  width: 38px;
  height: 24px;
}

<div id="container">
  <div id="button-mask">
    <div id="button">
      <g:plusone annotation="none" href="http://devblog.edankwan.com/"></g:plusone>
      <!-- Place this render call where appropriate -->
      <script type="text/javascript">
        (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>
  </div>
</div>

I chose the standard size of the button on http://www.google.com/webmasters/+1/button/. Which is 38px by 24px and the “+1″ looks just perfect in that 18×16 clickable area. I simply create a couple of divs to contain the g-tag and teh javascript of the Google Plus 1 button and adjust the position and size of the div. Then using overflow to crop the button to fit in your customized button image. Then it’s done!

Well, it’s not a perfect solution for this issue but since Google doesn’t provide any API for this and sometimes all you want is adjusting the size of the Google Plus button and change the image for a bit. This post might help.

Customized Google Plus 1 Button Demo