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

Published On :

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

Google +1 Box : Live on DailyBlogging's Sidebar

After some time, I started coding a Like Box (perhaps a +1 Box/Badge) for Google+ Pages and that looked pretty good to my eyes. It’s basically HTML plus CSS combined together with some absolute positioning of elements.

To start with, I used 3 main elements viz – Google+ Logo, Text+Link to the page & the all important +1 Button.

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="http://www.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 ?

Share :
Tagged as : 3 Comments
About » Has written 231 Post(s) «

I'm a Web Designer/Developer, SEO'er and a Blogger who gives a few Blogging Tips in the form of posts/tutorials. Follow & Subscribe to my Blog if you feel it's worth it.

HostGator
Loader

2 Comments Comments RSS

  1. #

    Hi,

    Thanks for share this nice info for take much more advantage with this nice option.

  2. #

    Your posts are always in Advanced Platform, Thanks for sharing this, Its really very useful :)

Post a Comment

Your email is never published nor shared. Required fields are marked *

Also, use your Real name in the 'Name' field. Comment names with only keywords will be trashed.