5 Tips to Master Google Friend Connect

Jens O. Meiert, February 14, 2009.

This entry is filed under Web Development, Marketing.

I’m a bit euphoric I have to say, as you might even notice when checking this post’s title. I’m absolutely, genuinely excited about Google Friend Connect. Please stay with me while I’m stretching and sharing five cool Friend Connect tips.

Optimize your rpc_relay.html file. Both HTML files that come with Friend Connect don’t necessarily tap their full potential yet. While the canvas.html is quite individual and a file you’ve got to customize to get the most out of, the rpc_relay.html is a file you might very much just download from somewhere. Consider using my rpc_relay.html which is both lean and valid. Or copy the three lines below:
```
<!DOCTYPE html>
<title>Friend Connect</title>
<script src="http://www.google.com/friendconnect/script/rpc_relay.js"></script>
```
If you start feeling a bit different when seeing this style of code, check some of this site’s HTML posts or politely discuss this kind of HTML.
Move the friendconnect.js script as far down the page as you can. The Friend Connect main script file is big, currently about 40 KB. Putting it at the page bottom prevents it from stalling other downloads. The Yahoo guys (maybe meaning Steve) explained that in some detail in their “Best Practices for Speeding Up Your Web Site” (make sure not to fall for @defer though). Here we’re talking about a noticeable performance improvement.
Move the Friend Connect configuration stuff into an external script to improve maintainability. You really don’t want to tote all the skin[] things around. Thanks to amazing help from Keekim I’m confident that I found a solution that doesn’t just improve that for me but might also work for you. Let a scripting amateur explain: … whatever, just check, grab, and modify the initFriendConnect() function out of UITest.com’s (another of my sites) uncompressed script, and add the following to your pages, at the bottom, preferably:
```
<script src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<script>
  initFriendConnect();
</script>
```
Add type="text/javascript" to the script elements if necessary. And please ping me or leave a comment if you’ve got any scripting suggestions and tips. Scripting’s a P3 focus area to me, and I’m not nearly as good with that as with other things
If you’re using Friend Connect’s Social Bar, consider locating it at the bottom. Two reasons for this recommendation: It’s less obtrusive than at the top (unless you want exactly that and call it prominent), yet it’s always visible (as opposed to the top variant). I didn’t do any usability tests for that, but my experience tells me that it’s better the bottom way, despite the probability that 1-5 % of your visitors might not immediately see the Social Bar.
Don’t forget to hide your Friend Connect real estate in print. My sites’ Friend Connect containers are called “social-core”, so I’m hiding them by adding #social-core { display: none; } within the @media print blocks of respective style sheets. The simplest way to write a print style sheet comes to my mind right now, but I don’t find a way to neatly include it in this tip … never mind.

While I did manage to get some of my Friend Connect and Social Bar affection under control with this article, gently moving aside any last perfectionist concern, I hope that at least one of these tips means some inspiration for you. Needless to say, feel free to join me on this site at any time. To speak Friend Connect.

Enjoy the most popular posts, probably including:

Comments

On February 15, 2009, 2:28 CET, -=}{oT~dEv1L 666=- said:

Hey, I’m new to the Social Bar thingy and I need help in something:

1. Making the bar black to fit into my sie’s colour so it’ll be less intrusive.
2. Remove the “Google Friend Connect” thing. I hate having ‘branded’ stuff on my site - other than the video games I talk about on my site.

Please help!
On February 15, 2009, 9:52 CET, Jens Meiert said:

-=}{oT~dEv1L 666=-, both would require some “hacking” I think, whereas I don’t have the (scripting-related) tenacity to look into this.

For the World’s Highest Website I at least tried to change the appearance of the Social Bar, however it looks like the configuration just applies to the “fly-outs”, so I ended up using the default style, only customizing the styling on the canvas.html. Maybe that works for you, too, while ignoring the Friend Connect thing?
On February 15, 2009, 10:24 CET, -=}{oT~dEv1L 666=- said:

I have tried that myself too, but I don’t mind the colour of those flyouts as they are just simpe flyouts. The light blue bar on a black background is very distracting.
On February 15, 2009, 12:36 CET, Francesco said:

This is so cool. I had to add Friend Connect immediately to my page after reading this article and testing it.
On February 15, 2009, 19:21 CET, Jens Meiert said:

Welcome Francesco

For what it’s worth, I decided to (temporarily) hide the Social Bar in IE 6 due to layout issues. To do that I went for any solution that was close and just added && window.XMLHttpRequest to the if statement that checks for the Friend Connect script. Also, I had to take preemptive measures against an IE 7 layout issue (more related to my sites than to Friend Connect). Additional IE tests and fixes pending. Just as any updates to Friend Connect, eventually.
On February 16, 2009, 14:28 CET, Jonas said:

Hi Jens, I understand why you are so excited. GFC seems to be an intelligent approach to make the net (even more) social. And it is convenient to add to a website.

BUT: I don’t think we need even more Google cookies and tracking. I suggest people stay away from this.

Regards - The DataPrivacyGuy
On February 16, 2009, 15:02 CET, Jens Meiert said:

Jonas, I think the terms are quite transparent.
On February 18, 2009, 23:15 CET, Jonas said:

Thing is,…terms change from time to time. Latest example: Facebook.
On February 20, 2009, 17:02 CET, parker said:

how can i syncronize members login details from google friend connect with my website DB,so that i can authenticate them against their details in my database to allow them perform so task?
On February 22, 2009, 16:46 CET, Sam said:

This is great! Thanks so much. Hope it will continue.

you can get interesting post about web usability and technology on my Web Usability Blog.
On April 28, 2009, 9:34 CEST, Mike Marzio said:

Same Google Friend Connect on my site AND on my Blogger blog - -Possible?

I know this might not be exactly the right place to ask this question, but I’ve been googling the solution without success for 2 days and I’m beginning to go nuts.

It’s a simple question - I have GFC on my site
http://www.real-english.com/
It works fine.

I want to have the same Google Friend Connect on my new Blogger Blog
http://the-original-real-english.blogspot.com/
WITH my existing members. But when I add the widget to Blogger in the normal way, I am the only member. The other 400 members are not present.

I tried copying my “successful code” used on my site to Blogger, and that didn’t work, so I tried tweaking the code in an attempt to understand the error message
“We’re sorry…
This gadget is configured incorrectly. Webmaster hint: Please ensure that “Friend Connect Settings - Home URL” matches the URL of this site.”

Any ideas? Boy, would I be grateful!

Mike Marzio
On April 28, 2009, 17:00 CEST, Jens Meiert said:

Mike, I think that unfortunately, that is not possible – a GFC “installation” is site-specific, so to speak.
On November 30, 2009, 1:58 CET, ansia said:

thanks for sharing this usefull information.

Jens Meiert

5 Tips to Master Google Friend Connect

Read More

Comments

Leave a Comment