How to Create a Facebook like ‘Like Box’ for Google+ Pages

Earlier this month, the much awaited Google+ pages were launched. Many bloggers including me, were excited about this new engaging, promotion tool. The blogging community looks forward for every opportunity to promote their brand, posts, etc. So it’s difficult to question the excitement levels within us.
Today it’s almost 3 weeks and I particularly haven’t seen anything unusual happening with this Google+ pages. Facebook pages still rule despite of the fact that Google+ was able to attract millions within hours. But that attraction unfortunately (for Google) didn’t turn into activity.
Talking about Google+, I seldom visit it on a daily basis very unlike Facebook. So where exactly did the Google+ think-tank fall short ? My answer to that would be pretty short and simple. Unfriendly-ness shown towards the page admins who are eager to promote their Google+ pages.
I say unfriendly-ness because if you see their Google+ Page Badge creation center then you’ll find that it lacks the variety of options provided by it’s arch rival(s). So I played around with their custom code and tried various things to overwrite the default options.
But this badge loads in an iframe and hence it’s difficult to overwrite some of the basic elements like width, background color, etc.

Google +1 Box Code

First download the Google+ Logo [LINK]. I re-sized the original version (to 40×40 px) so that it looks identical to the Facebook Like Box image. Then navigate to the Google+  Button page and grab the code from there.
Note that I’ve used 170px as the width of the G+ button. You can choose any width which fits with your blog’s sidebar. Also, I’ve used the HTML5 Syntax and not the javascript one. So don’t be surprised to see any code change if you are copy-pasting an older code.
Without much writing, let me present the codes, starting with HTML.(*)

<div id="gplus_wrapper"><a id="gplus_logo" href="https://plus.google.com/106906685072561914204" title="DailyBlogging on Google+" target="_blank"><img src="gplus-40.png" alt="G+" width="40px" height="40px"></a>
<div id="follow_page"><a href="https://plus.google.com/106906685072561914204" title="DailyBlogging on Google+" target="_blank"><strong>DailyBlogging</strong> on Google+</a></div>
<div id="gplus_site"><div class="g-plusone" data-annotation="inline" data-width="170" data-href="https://dailyblogging.org"></div></div></div>

Now the important CSS styling should be used as mentioned below. If you know the intricacies of CSS, then you are free to change any piece of it.

.custom #gplus_wrapper {
position: relative;
width: 21.2em;
height: 4em;
}
.custom #gplus_logo {
float: left;
width: 40px;
height: 40px;
margin: 0.4em 0 0 0.85em;
}
.custom #follow_page {
margin-left: 4.62em;
}
.custom #gplus_site {
position: absolute;
width: 160px;
height: 24px;
left: 4.75em;
top: 1.8em;
}

* Make sure that you change anything & everything related to DailyBlogging to your blog’s name, link, page. Frankly speaking I haven’t tested this code once again as it works perfectly on DailyBlogging. So let me know specifically if you find any error using the comment’s section.
I hope this piece of code will help you in creating a Google +1 Box for your blog’s page. I wish I had the desire to build online tools so that I could’ve presented this code in a much friendly-er form. But never-mind, some one else could do it or perhaps Google itself would come up with it.
Did you like the idea of the +1 Box ?