Fix Empty Blue Google Friend Connect (GFC) Bar in WordPress

Google Friend Connect (GFC) is a great tool to build a community around a website. Last week, I thought it was finally time I got cracking on my wife’s website. The website is getting good traction and I can see from Google Analytics stats that the number of returning visitors is increasing. I thought it was the ideal time to integrate GFC. I followed the standard procedure as stated on Google’s Friend Connect Page – setting preferences, generating the code and integrating it into the wordpress theme – but all I got was an Empty Blue Bar.

My default browser is Firefox (3.5). However when I opened the site in Chrome and IE, the GFC bar showed up without any issues! It was hard to believe that GFC would have a browser specific issue and that too Firefox which is one of the two recommended browsers by Google. I tried googling the issue but couldn’t find anything relevant.

I figured GFC must be conflicting with one of the many plugins that are installed on the website. I tried deactivating a few plugins, which I thought might conflict but I still got the empty blue bar. So finally, I had to resort to the lengthy procedure – disable all plugins, check whether GFC works (it did!), activate the plugins one by one and check which� one causes GFC to break.

After activating 15 odd plugins, I found the culprit -� Collapsing Archives. Collapsing archives uses Javascript (JS) to make the Archive links in the sidebar collapsible by year and/or month. The javascript uses the fabulous Script.aculo.us JS Framework which in turn is based on the Prototype JS Framework. I ‘un-enqueued’ the JS files one by one and until I found that prototype.js broke GFC.

A quick google search for “GFC prototype” lead me to this GFC forum thread. A Google employee states (third post) that a bug in prototype causes it to interfere with the Native JSON parser in Firefox 3.5 and leads to the GFC-prototype conflict.

He had pasted a code snippet which was supposedly the fix and was to be added just above the GFC code.

<script>
window.JSON = {
parse: function(st){
return st.evalJSON();
},
stringify: function(obj){
return Object.toJSON(obj);
}
};
</script>

I quickly added the code snippet just above the GFC code, and voila it worked! Essentially, the code instructs the browser to use the Prototype JSON parser instead of the Native JSON parser.