Quick Fix for the Google Friend Connect Empty Box Syndrome!

If you don’t know what I’m talking about… that’s a good thing! Feel free to simply remember this post is here if you hear a friend that needs it.

However, if you knew EXACTLY what I’m talking about then I have a SOLUTION for you!

Google FriendConnect with Empty Box

This morning I was adding Google’s Friend Connect widget to my wordpress blog when something odd occurred. [See Picture to Right] The widget appeared, but only as an empty outline of a box. Where had all the content gone??

I thought at first this may be due to me being in the process of rebuilding my theme, but quickly ruled that out. I looked closely to see if  maybe the widget code I inserted was larger than the widget area available in my sidebar… but it wasn’t. (Often when that happens the widget sticks out oddly and moves other widgets out of alignment too.)

So, it was off on a great Google hunt for the answer!

While I was not able to find out if the cause is a particular theme or a particular version of WordPress, as many users have had this issue, what I did find was that it was a simple fix!

First you need a little bit of code:  (Dont worry, I’ll show you what to do with it, its easy!) widget bar showing google friend connect code

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

You want to highlight over and copy everything between (and including) the script tags < >. Then you want to go to your widget section in your dashboard, and open the widget that contains the code for the google friend connect. (FYI, this won’t work if your using the Google FriendConnect plugin, you have to be inserting the code in a text/html widget box.) Open the text/html box, as shown in the picture above.

Google Friend connect widget with code snippet inserted

Now, inside that text/html box, in front of the code, before the very first character (usually a < character), you want to hit enter a couple times to make some room. We are going to put that code snippet in front of this google friend connect code block. Once you have made some room, then paste in the code snippet you copied from above. It should look like the picture below. Once it does, be sure to hit (SAVE) on that widget.

Google Friend connect widget properly installed in sidebar

Once you have hit the save button, re-open your website or re-fresh your browser to see your handiwork! It should now look (properly!) like this image!

That’s all you need to do! Please pass this along to anyone you know of that is dealing with a Google FriendConnect setup problem! It may be just what they need!

signature kimberly castleberry

personal note: Great Job, Kim!! Two Thumbs Up! This fixes my smarty issue with Google Friend Connect.

quoted from:just-ask-kim.com


4 thoughts on “Quick Fix for the Google Friend Connect Empty Box Syndrome!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s