Google Plus +1 Button
I decided to add a Google Plus +1 button to my blog entries. It's down there at the bottom of the article text. I may add 'like' buttons for other social networks later on, but as a G+ user myself, this is the main one that I want to see. Adding the button is a very simple thing to do, and purely for sake of completeness, here is a link to the page that tells how to do it.
I went with the recommended asynchronous load method, which is a yucky hack but what can you do? Right away, I noticed an undesirable side-effect: the page loads, and then a short time later, depending on the speed of your internet connection, the button appears, reflowing content as necessary. If the button is within the viewport, this delayed load is an undesirable distraction as the visitor is trying to read the main content of the page. I decided to try a little hack to mitigate this problem.
The hack is that I simply took a screenshot of the button, erased the number from the box on the right, and added CSS to show this image in place of the real button, until the real button is loaded. I also desaturated the image, to give a visual indication that the button is not active. Here is the fake image (small version of the button):
Fake image: 
Here is the CSS:
.g-plusone {
width: 49px;
height: 15px;
background-image: url(g-plusone-small.png);
}
There are other, perhaps better, ways of dealing with this problem. I could even envision improvements to the code from Google's side that would make for a smoother load. What do you think, readers? Is this a good way to handle this problem, or am I just creating needless complexity? Gee, I really ought to work on that comments section I have been meaning to add to this blog, so that you can respond! Well, I'll be linking this article on Google Plus, so for now, just respond there if you have thoughts to share. Bye now.
