The Google+ badge is pretty cool and you can see how it looks on the right sidebar. You can customize the appearance and it rolled out to the public just today. Use this configuration tool to get the badge for your blog which is probably your pride and joy. But I had a few problems with it and so to save you time and effort, here are my tips for adding it.

1. Create a Google+ page name with 10 characters or less

I don’t know if this will be changed later on, but if your Google+ page’s name is more than 10 characters, the badge will read “We’re on” instead of the actual name which you’d like to use. Unfortunately, there’s no way I can make my Google+ blog page’s name less than 10 characters so I’m stuck with the unintuitive message.

I feel there should be a way to change the text to something simple like “I’m on” or “Follow me on” rather than whatever the page name is. As of now, your blog name will appear on the badge only if you can write it in less than 10 characters.

2. Expand your Sidebar to accommodate 300px

Even with all the badge customization options, there’s no way to get the standard badge functionality without having at least 300px width on your sidebar. I use a very customizable theme called Atahualpa which is also free so I was able to play around with the sidebar width, remove the padding for that one widget and keep the margins in tact. You can see that it sticks out ever so slightly on the right compared to the widgets above and below it.

3. Place the Javascript at the footer

You can do as Google says and place the javascript code in the header. But freaks like me like to squeeze as much speed out of my page as possible so I place it in the footer instead.

Note: The <link href=”…” rel=”publisher” /> has to to remain in the header. This will tell Google+ that you’re linking your Google+ page to your website. More on this later.

4. You can still keep your +1 buttons for individual pages

So the rule is this. The “+1″ functionality on your Google+ badge is for your home page only and for your blog overall. So no matter which page your users are on, when they “+1″ the Google+ badge, they’re voting for your blog and not that specific page. I recommend you keep +1 buttons above and below your individual posts to allow users to recommend stand alone posts.

Note: If you’re using the +1 button and the Google+ badge, you have to add the Javascript code only once

5. Link to your Website from your Google+ Page

To complete the circle, go to your Google+ page, click “About” and then “Edit Profile.” Hit the “Recommended Links” page and add your homepage URL to it. So now Google has links to (via the rel=”publisher” link in the header of the blog) and from your website and the Google+ page thus confirming your ownership of both. This will have trickle down benefits later on.

Of course, I have a hosted blog of my own so I can muck around with it as I please. Those using wordpress.com free hosting will be more restricted since I understand that they don’t allow custom javascript insertion (for good reason.) But I think wordpress.com users can already add the +1 button using the Settings->Sharing options in the dashboard. I hear they’re considering adding support for Google+ badges in the future as well, so good luck with that!

Blogger of course should have support for both +1 buttons and Google+ badges right out of the box. You can already mess around with your template and insert it manually.

Google is famous for iterating its products so a lot will probably change in the future and flaws will be wrinkled out. As of now though, I hope this information helps you get started with your Google+ badge and page.

Around a year ago, I had written about my dislike for the Like button and why I wasn’t using it on my site. The end result might be just a small button, but the amount of resources it used was entirely disproportional to what was needed. Around 30 HTTP requests from various sources. Now my hosting plan isn’t fast – which shared hosting is? And I like to keep the number of resources used down to a minimum. For a long time I hoped and prayed that Google would implement an alternative, and my prayers were finally answered.

You should see the implementation on my site right now. Any webmaster can check that the resource usage is minimal. No slow loading times and no no obscene HTTP requests. Just an elegant solution which quietly updates without flashy effects. Just what my site needed.

Thanks Google. I hope more people start using this. And from what I’ve heard, you’re also implementing web analytics around it so I will be able to see which pages are +1′d and when. All good news for me!

The only problem is that the results on the graph seem horribly inaccurate. Not a surprise since it’s mentioned above that the data is of low accuracy. But the times can be really off whack and webmasters like me who spend a lot of time optimizing our sites for speed get frustrated when we’re told that pages on our sites take 11 seconds to load! But I found a way to give Google real data about my site’s speed and that shows in the site performance graph.

Google gets page load speeds from the Google toolbar that some users install on their systems. It’s a very small percentage of Internet users and when one of them visits your site, the toolbar reports back the time taken to load the page if enhanced features are installed. The average page size on the Internet is 320 KB. If a user has a slow dial up connection with 15 KB/s download speeds, your page can take 21 seconds just to transfer the data! Not to mention requests, response time, DNS lookups etc. No wonder some sites with their audience focussed on a particular area report unrealistically high page load speeds with Google’s site performance tool. The low end DSL service provided by AT&T gives around 45-60 KB/s, which means a data transfer time of 7 seconds!

So what can you do as a webmaster? It’s simple really. Give Google better data!

I installed the Google toolbar on my Firefox browser. There’s no toolbar for Chrome which I use exclusively – pretty sad. I then go and visit my website using Firefox. I load several pages letting Google suck up page loads speeds with my reasonably decent Internet connection. I set my website as the home page for Firefox and whenever I open it, the toolbar pings Google and lets them know. After a month of doing this, heres my Webmaster Tools Site Performance improvement:

Improved Site Performance in Webmaster Tools

Pretty decent huh? At least it’s representative of my real page load speeds.

In this tutorial, we’ll see how to do these four things:

Remove the flashy and annoying “Login” buttons
Increase the height of the comment box
Enable and customize the “CommentLuv” plugin for IntenseDebate
Move the “Name” and “Email” fields above the comment box

These tips below should work for everyone. The documentation provided by IntenseDebate leaves much to be desired and I had to use Google Chrome’s “Inspect Element” command to figure out how to achieve the following.

Removing the Login Buttons

Most of our readers are simple people. They get confused by multiple login choices with different colors. Some of them don’t know that it’s optional and ask why they have to login (and sometimes create an account) and enter their Name, Email, URL! You can lose a lot of readers, cause the first rule of designing comment systems is Keep it simple!

Our first job is to hide all the annoying login buttons such as IntenseDebate, WordPress, Twitter, Facebook, and OpenID as well as the “Comment as a Guest, or Login” message. To do that, type the following into your “Custom CSS” section in the “Settings” tab:

.idc-postnav-label { display: none !important; }

.idc-postnav-list { display: none !important; }

Save the CSS, reload your page and confirm that the buttons have vanished.

Increase the Height of the comment box

I never understood why the comment boxes are always so tiny. I like room to type my thoughts without having my last two lines scroll up and vanish. Unfortunately, the “Enable auto-expanding textareas” option doesn’t work. I sent an email to the IntenseDebate support group, but didn’t get any reply, which was a pity since it would be quite a killer feature if it worked. Anyway, increase the height of the comment box to 200px to give your commenters some breathing space:

#idc-container div.idc-text_noresize, #idc-container textarea.idc-text_noresize {height: 200px !important;}

Make sure you disable the “Enable auto-expanding textareas” checkbox.

IntenseDebate doesn’t always link names to your Website!

Some time ago, Automattic – the creators of WordPress – acquired IntenseDebate. Because of this, IntenseDebate got a new “feature.” Anyone who’s signed into their WordPress account is automatically signed into the IntenseDebate commenting system and so they see a “Posting as username” message when they comment on an IntenseDebate enabled site. This sounds great, but the big gaping hole is that after posting the comment, the name of the person links to their IntenseDebate profile instead of their website!

Most people don’t have an IntenseDebate account, but lots of people have a WordPress account. When I comment on someone’s post, I want my name to link back to my website. As of now, if a WordPress logged-in user comments on your IntenseDebate enabled site, their name will link to a blank IntenseDebate profile, leaving other readers no way of knowing who they are, or what their website is. Here’s what it looks like:

Name links to IntenseDebate profile instead of Website

See the link in the red box? That’s what the name of a commentor links to. And most people’s default IntenseDebate profile is blank. The only way for a WordPress Logged in commenter to get their name linked to their own URL is to log out first, then fill in the Name, Email, and URL fields.

No one is going to take that much effort.

There’s no workaround for this. As of now, there’s only one thing I’ve been able to do that somewhat mitigates the effect of this terrible design decision – and that is to activate the “CommentLuv” plugin.

Enable and customize the “CommentLuv” plugin

If you’re using IntenseDebate, you simply have to use the CommentLuv plugin for the reasons given above. What this plugin does, is that it allows commenters to fill out a “URL” field. It then grabs the latest post from the feed of that URL and appends it to the comment. So people who want to find out more about a commenter can click that link to go to their website.

To enable the CommentLuv plugin just go the “plugins” section in your IntenseDebate account and activate it. This will place a small “Site URL” box underneath the comment box. But once again, there’s a big flaw.

CommentLuv Below Box - Immediately pressing "Reply"

For the CommentLuv plugin to work, a user has to type their URL into the box. But after that, they have to click somewhere else for the plugin to retrieve the latest post. By default, the CommentLuv box is below the main comment form and so most users just click “Reply” after typing in their URL. This means that the plugin won’t have the time to go get the latest post and thus won’t work.

The solution is to use CSS to place the CommentLuv section above the comment entry box. This way, users will first fill in their URL and then type in their comments giving the plugin plenty of time to find the latest post and prepare it for insertion. Here’s the CSS to do that:

#IDCommentsNewThread {position: relative !important;padding-top: 80px !important;}
#IDCommentReplyForm1{position: relative !important;padding-top: 80px !important;}

#luv_field_new {left: 0px !important;position: absolute !important;top: 10px !important;}
#luv_field_reply {position: absolute !important;top: 10px !important;left: 0 !important;}

This pads the top of the comment box and the “Reply” box with 80 pixels and positions the CommentLuv primary and reply sections on the top left.

Move the “Name” and “Email” fields above the comment box

Of course, now that the “Site URL” field is above the comment box, we should move the “Name”, “Email” and “URL” fields to to the top as well next to it. Here’s the CSS to achieve just that:

#IDCommentReplyDiv{position: relative !important} /*Prepare reply comment for positioning */
#IDCommentReplyForm2{position: absolute !important; top: 31px !important; left: 200px !important;}
#IDCommentNewThreadForm2 {position: absolute !important; top: 7px !important; left: 175px !important;width: 100% !important;}

These have to work in conjunction with the CSS commands in the previous section.

Hide the “CommentLuv” image and the “IntenseDebate” logo

If you really want to clean up the comment section, this CSS will hide the unnecessary images:

.idc-foot { display: none !important; }
span#mylastpost img:first-of-type { display: none !important; }

Putting it all together

Here is my consolidated CSS put together for easy copy paste:

.idc-postnav-label { display: none !important; }
.idc-postnav-list { display: none !important; }
.idc-foot { display: none !important; }
#idc-container div.idc-text_noresize, #idc-container textarea.idc-text_noresize {height: 200px !important;}/*Pad and prepare new comment and reply comment boxes */

#IDCommentsNewThread {position: relative !important;padding-top: 80px !important;}
#IDCommentReplyForm1{position: relative !important;padding-top: 80px !important;}

#IDCommentReplyDiv{position: relative !important} /*Prepare reply comment for positioning */
#IDCommentReplyForm2{position: absolute !important; top: 31px !important; left: 200px !important;}
#IDCommentNewThreadForm2 {position: absolute !important; top: 7px !important; left: 175px !important;width: 100% !important;}

#luv_field_new {position: absolute !important;top: 10px !important;left: 0 !important;}
#luv_field_reply {position: absolute !important;top: 10px !important;left: 0 !important;}

#all_luv{font-weight:bold !important;} /*Bold the text for comment luv */
span#mylastpost img:first-of-type { display: none !important; }

After making all these changes, here’s what the final result looks like for a non-logged in user:

Cleaned up IntenseDebate form

It’s close enough to the default WordPress comment system for me. Hope this little tutorial helps you out!

But I got a nasty shock when I installed it. It makes at least thirty separate calls to Facebook servers and your site takes forever to finish loading. Any webmaster will tell you that the first step to improving your page speed is to cut down the number of requests to the server. From this perspective, Facebook commits a crime – an unforgivable transgression.

I’ve tried three different ways to install it on WordPress – using the code from Facebook and installing two separate plugins. It doesn’t make a difference. The button is still a resource hog. Here’s a screenshot of the requests from tools.pingdom.com:

Facebook's "Like" Button - the huge number of requests

This shows only a part of the total requests made to Facebook’s servers. Go ahead and test any page which has the button on tools.pingdom.com. You’ll be astonished at how long it takes to load – scroll down to the bottom and it’s pretty obvious what the cause is.

While it’s true that the button starts loading only after the page has begun to render, there’s something just wrong about such an obscene number of calls. It just doesn’t feel right you know what I mean? For those with slow Internet connections, I can imagine their systems working hard just to display the damn thing.

Google is rumored to be developing its own “Like” button in conjunction with Google Me. I’m eagerly waiting for it in the hope that it’ll go easy with the http requests. After all, it’s Google who’s really pushing for faster speeds on the Internet and even going so far as to link the PageRank to it. Come on Google! Give me an alternative to Facebook bloat.

So I finally bit the bullet and ponyed up $59.4 for a year’s worth of hosting at Bluehost. I’d done as much research as possible, but I couldn’t get a definitive guide to which was better. So now that I’m settled into my new place, here’s the lowdown on which hosting plan is the best for a WordPress blog.

Blushost performance vs Go Daddy

The thing that really impressed me about Bluehost was that they throttle the CPU resources of accounts that go over the limit. Now this might seem like a bad thing to you, but it really ends up benefiting everyone. Since I can be sure that the sites of others won’t be eating up resources that are meant for me. Godaddy on the other hand had no indication of how many resources my applications were using. The transparency in Bluehost is amazing. Here’s how it looks in action:

Throttling status in Bluehost's cPanel

You can choose to view the CPU throttling on an hourly, quarter hourly, or minute by minute basis. This allowed me to test which plugins were causing the problem because of the quick feedback. Go Daddy has nothing like this in their economy shared hosting plan.

Minute by minute CPU throttling

As I mentioned above, I also got access to all the error logs which allowed me to identify a few more faulty plugins. Go Daddy didn’t give me this access and the help center guy told me I’d have to upgrade if I wanted to just take a look at what was causing the 503 Internal server errors.

Transferring WordPress from Go Daddy to Bluehost

One truly amazing thing about Bluehost is their temporary URL feature. When you migrate hosts, you need to redirect your DNS entries to the new servers. But before you take that final step, you want to be damn bloody sure your site is working perfectly. You want to preview it and test it in a production environment. But what do you type into your address bar when your domain hasn’t moved yet?

Bluehost makes this easy. When I purchased a new Bluehost account, I got a temporary URL along with the welcome mail. Clicking that, you can access your new hosting account exactly as if your DNS entries were already changed! Go Daddy has a feature like this, though you have to specifically turn it on, but the URL they give you doesn’t allow you to do everything on your site that you would normally do. With Bluehost, the temp URL can set cookies and all the rest. So I took my own sweet time making sure it was working precisely the way I wanted before taking the leap and changing the servers.

Installing WordPress itself was easy. Just a single click, choose the directory and it happens in seconds. When I did the same thing in Go Daddy, it took me half an hour at least with the message “pending installation” staring me in the face. There was no waiting with Bluehost. And when I set up a subdomain for my CDN requirements, it was ready almost instantly. No waiting period at all.

When I wanted to archive my site using Go Daddy’s file manager to transfer it off my account, I found that they only allowed 20 MB to be archived! A pittance. And with several hundreds of files, there was no way I was going to use FTP to transfer it out. So I had to rebuild from scratch. Luckily, with the temporary URL I faced no issues. Later when I tried to use the archive function on Bluehost, I didn’t find any size limitation.

It made me wonder why I put up with Go Daddy’s shoddy service all this time.

Speeding up WordPress on Bluehost

As I was trying this and that to reduce WordPress’s CPU load, I stumbled upon a fantastic way to cut the resource use by a full 50%. It’s called “FastCGI” and it’s disabled by default on Bluehost. Enabling FastCGI in the cPanel configuration reduced my CPU throttling to almost zero! I tested it out for half an hour and was astonished at the performance. There’s no downside to enabling it and the link explains what FastCGI is all about. Again, after doing some research, I found that Go Daddy also supports FastCGI but not for Economy shared hosting plans and they sure as hell don’t make it easy for noobs like me to find it.

I’m sure there are lots of other aspects of the these two hosting providers that I haven’t touched upon, but there were the ones that mattered to me. I hope it’s useful to someone who’s thinking of making a switch.

Chrome’s has inbuilt support for Greasemonkey. I modified an existing userscript that makes it easy to count the words in any textarea. By just selecting the words and pressing “Alt + C” , a popup is displayed with the word and character count. In addition, you can also insert HTML tags by clicking “Ctrl + I” for italics, “Ctrl + B” for bold, and Ctrl+Shift+M to insert a link.

Here’s what it looks like:

Count words in Google Chrome

To learn how to install this Greasemonkey add on, just watch the video I made. It also works for Firefox.

The script has limitations though. It won’t count the words if they’re not in a textbox. Meaning you can’t select text on a page to count the words and characters. If the words are in a rich text box, this won’t work either. If you absolutely need to have that functionality, you might be better off installing the extension instead.

After waking up lazily and taking her time to get ready, she fired up her laptop, connected to her VPN and started doing exactly what she does in the office! Which made me wonder why more people don’t decide to do it. I realize that not all bosses will be happy, but surely that’s a question of their own inability to monitor work? I feel a good manager should be able to ensure that his or her subordinates get their work done no matter where they are.

From where I sit, here are some major advantages:

Working from home

1. Less hassle. No commuting stress
2. Can save hours by not having to travel
3. No money spent on travel
4. Reduces fossil fuel emissions and helps the environment
5. Creates less traffic congestion on the road
6. Can get some more sleep
7. Cheaper for the company. No office to maintain
8. Fewer accidents
9. Potentially more free time to enjoy or spend with your family

It seems like a win-win situation for everyone involved. So I don’t know why more people don’t take it up. Do bosses feel they will lose control? Do they feel that employees will slacken? In these days of virtual conferences, email, and mobile phones, why do we need to sit in a particular place and work? I can understand sales people needing to go out and do their stuff, but the vast majority of administrative staff and desk workers need not.

I feel that management of telcommuting employees will be easy with objectives based management where each person is allocated tasks for the day and deadlines for completion. As long as they meet them, it doesn’t matter where they sit and what they do.

Of course, some people like to go to work. Sometimes I myself miss the hussle and bussle of an office – but for me, the advantages far outweigh the disadvantages. What do you think?

Being a very lazy person, I decided to find an easier way. My final solution works on Firefox and Google Chrome (sorry IE – you suck). This is how I implemented it – and it just takes a few clicks!

This is my URL that’s referred to in the video: http://userscripts.org/scripts/show/81551.

Watch this in full screen and in HD if you can – it’s much clearer.

Update: Steps are different for Firefox and Google chrome. In the video, Google chrome is shown first, and then starting at 1:15, the steps are shown for Firefox.

After this, here are the shortcuts which will work in any textarea in Firefox and Google chrome.

Ctrl+B surrounds selected text with <strong></strong>
Ctrl+I surrounds selected text with <em></em>
Ctrl+Shift+M surrounds selected text with <a href=”"></a> (cursor will be placed within the quotation marks)
Ctrl+U surrounds selected text with <u></u>
Ctrl+S surrounds selected text with <s></s>
Ctrl+P surrounds selected text with <p></p>
Alt+C counts the words and characters in selection. If nothing selected, it counts all the words in the box
Ctrl+2 surrounds selected text with <h2></h2>
Hope you found this as useful as I do. No more manual typing!

After using Firefox for five years, I’ve been fighting it for a while now, but I could hold back no longer. With Chrome supporting Greasemonkey scripts, I was able to replace my beloved Firefox Ubiquity plugins including those which allowed me to quickly surround text with HTML tags for easy blog commenting among other tasks. So here are five reasons why I finally made the switch:

In Chrome, one tab doesn’t hang the others

Switching to Chrome from Firefox

Some sites like Slashdot contain lots of Javascript, CSS and Ajax. The same goes for Gmail. The problem with Firefox is that while these complex pages are loading, it freezes every other tab! It’s very irritating to have to wait seconds while a new Slashdot page opens up. You can’t switch, or type. And since I always open new tabs in the background, I want to be able to continue to do what I want in the meantime. Google Chrome on the other hand runs each tab in a separate process – so no matter how badly one tab misbehaves, the others don’t suffer. I can happily open a new Gmail window in the background and just continue to do what I’m doing until I’m ready to turn my attention to it. Chrome is also blazingly fast – pages are rendered in no time at all and applications just feels snappier.

I can reclaim the “status bar” space

I can’t stand stuff getting between me and the web. That includes bookmark bars, navigation bars, search bars, and finally the status bar. Until I tried Chrome, I never realized how I hated the status bar. To be sure, there are plugins or add ons for Firefox that remove the status bar, but in the first place I don’t like to install too many add ons and second, none of them exactly replicates the status bar behavior in Chrome – namely by:

1. Not being present
2. Showing up when I hover a link – some do, but they show the entire bar instead of just the URL
3. Showing a shortened version of the link
4. Expanding the URL if I hover a little longer

I’m a stickler for space and Chrome’s solution is so elegant and neat that it’s a wonder why other browsers haven’t just copied it outright.

Chrome’s new Web Applications are awesome

One of Chrome 6′s new features is the ability to make web applications. I use some sites like Gmail a lot and would like to keep them open all the time. So by making it a web application, I can have it minimize the space the tab uses, have it open all the while, and also remove the navigation bar, search bar, etc for that app! Here’s what it looks like:

Google Chrome Web App

Ain’t that awesome? I need never close Gmail again. It’s always on the left, can’t be moved, doesn’t interfere with my regular work and allows me to access it at a moment’s notice. I’m told that Firefox 4 is coming out with something of the sort in it’s later Beta versions.

Chrome’s Bookmark Sync

Using a simple Google sign in, I can now synchronize my bookmarks across all Chrome browsers no matter which computer I’m using. One of the motivations for moving to the cloud by using Google Docs and Gmail is so that I have complete flexibility and don’t need to be tied down to any single piece of hardware. Chrome’s bookmark sync also allows me to synchronize my extensions, preferences and themes.

Firefox tried to integrate such a feature earlier and called it “Weave”, but they never got the implementation right – it was buggy, and slow. Google’s got this one down pat. It’s completely seamless and doesn’t necessitate any additional sign ins. Marvelous!

Greasemonkey Integration

Greasemonkey is a simple tool that allows users to do cool stuff with their browsers. For example, if you want to comment on a blog and need to italicize some text, you have to wrap it in “<em></em>” tags. To make it bold, you have to surround the text with “<strong></strong>.” I find this painful. While using Firefox, I wrote a Ubiquity script that would save me from this painful typing. But Google Chrome didn’t have Ubiquity and till now, this was the one thing holding me back from adopting Chrome full time.

But when I found out that Chrome now natively supported Greasemonkey scripts which till now only worked on Firefox, I went and found one that did the same job! True, I had to tweak it before it worked in Chrome, but now if I want to italicize a comment, I just press “Ctrl+I” and if I want to insert a hyperlink, I just press “Ctrl+Shift+M” and the <a> tag is fully formed with the cursor in the right place to paste the URL!

This was the feature that finally tipped me over. And so now I’m officially a Google Chrome user instead of a Firefox user.

Another thing that nudged me over was the fact that Firefox 4′s latest Beta for Linux didn’t have the new look which the Windows version got. I was pissed I and felt I wasn’t being treated on an equal footing. But I’ve used Firefox for so many years now that I won’t hold a grudge. I’m willing to be lured back to Firefox if they improve their speed to a level comparable to Chrome’s. But for now, I bid Firefox good bye and with tears in my eyes, save this post in my shiny new Google Chrome browser…