Google Friend Connect and Firefox

-- Vous trouverez la version française de cet article ici --

A common problem with the widget "Google Friend Connect" and its counterpart the Followers gadget is that they often will not display properly with Firefox, it all depends on the complexity of the model ( "template") and HTML used by the presence or not Prototype.js. A fix for those with the problem of incompatibility with Prototype.js was published by Google, but it remains inapplicable for those not using this script, indicating the fact that there is a second source of potential problem between Google Friend Connect and Firefox.

This site serves as a demonstration site for the article "Solving the Google Friend Connect's display problem with Firefox" published on the blog "The Coding Paparazzi" and describing in detail a potential solution to this second problem. The rest of this article here merely give a summary of each of these tests located on the right sidebar; please refer to article mentioned above to get a complete description.  The code described in the full article might seem a little complicated at first but it is indeed relatively simple and can be installed in minutes.  A quick test is also provided which will allow you to verify if this solution will work on your site without the need to modify it first.

All tests in the right column should display properly in Internet Explorer but many do not appear in Firefox 3.5 or with the latest Beta 5 version of Firefox 3.6. Test # 3 with the clause "defer" should s' display properly with Firefox 3.5 but not with Firefox 3.6 beta 5. Some of these tests are divided into two parts. It is normal for parts B nothing at all - except the title - because they contain only javascript code. Titles are posted here to better see the different sections but obviously on a real site, they are omitted.

A- « Google Friend Connect »

    - The original version.

B- « GFC 1 - Comment only »

    - Only one comment, addressed to identify the HTML model ( "template") surrounding the widget or Gadet.

C- "GFC 2 - Prototype.js"

    - Test that I did with prototype.js and to verify that the solution typically provided by Google about JSON does not work in this case. Deactivated here so as not to influence the tests that follow.

D- "GFC 3 - Defer"

    - Test using "defer" to the javascript code. Works with Firefox 3.5 but not with Firefox 3.6 beta 5.

E- "GFC 4a and 4b - Split Code, version 1"

    - First test to separate the <div> gadget / widget javascript code by putting in two different sections but close to each other. (It is normal that the Part B displays laugh at all because it contains only the javascript code.)

F- "GFC 5a and 5b - Split Code, version 2"

     - Second test to separate the <div> javascript code but this time, the section containing the Javascript code has been brought to the very end of the page. Works now with Firefox 3.5 and 3.6 beta 5.

G- "GFC 6a and 6b - Button"

    - The javascript code was placed in a button and you can run it by clicking on it.

    -- Important -- Instead of clicking on the button, you can choose to make a Copy & Paste the code directly into the address bar allowing you to quickly test whether this method will work for your site. In the case of 'IE, you must take care to put all code on one line, but this reduction will be done automatically by Firefox. Note the addition of protocol "j avascript:" at the very beginning and is required.

    To test your own website, you should obviously change the values of "id" and "site" for those of your site:

javascript:google.friendconnect.container['renderMembersGadget']({id:'div-6508336042659712443',site:'10657890614271830163'},skin);

    If you're in the situation where you need to fix for the incompatibility with Prototype.js and you want to test anyway, you simply add the fix for JSON at the beginning:

javascript:window.JSON={parse: function (st) {return st.evalJSON();}, stringify: function(obj) {return Object.toJSON(obj);}}; google.friendconnect.container['renderMembersGadget']({id:'div-6508336042659712443',site:'10657890614271830163'},skin);

If you see the content of your page disappear instead of seeing the Google Friend Connect widget display, then you made a mistake by copying the code above and again, remember that you must change values for "id" and "site" according to those found on your site.

G- « GFC 7 - OnLoad »

    - Test using the window.onload event to run the javascript code.

H- « GFC 8 - artLoadEvent »

    - Test using the function of artLoadEvent Artisteer to run the javascript code.

I- « GFC 9 - artLoadEvent + setTimeout »

    - Test using the event function of artLoadEvent Artisteer to run the javascript code but adding more verification that the javascript code not provide Google Friend Connect has had time to load.

    Even if you do not use Artisteer, you can still use the same code verification in combination with the window.onload event.