Google Friend Connect

07 January, 2009

Recently Google released to the world one if its latest technologies, Friend Connect. Friend Connect is a bunch of code snippets or applications you can add to your page that your users can use on your site. All the backend stuff is hosted by Google so you do not need to worry about maintaining them or how they work.

Today we will take a look at what Google Friend Connect has to offer and a how to get these applications on your site.

Google calls each application a gadget. At this stage, Google offers five gadgets (one of which is a sign-in gadget), and two other options may cover at a later date - a custom gadget and an API demonstration gadget.

Getting the gadgets is simple.

First, go to the Friend Connect site: http://www.google.com/friendconnect/.
Then, click the "Set up a new site" button.
Log in if you need to and you will be shown an overview of the four steps necessary to get your gadget. Click "Continue".
Enter the required information on the next screen (site name and home URL), and click "Continue".
You will have to download a couple of files now and upload them to your webserver. This is so Google can identify your site. Once these files are uploaded to your site, click "Continue".
Finally, click the "Test to finalize setup" button and Google will look for the files on your site.

All going well, you will now be ready to add some Google Friend Connect gadgets to your site.

Members Gadget

The first of the five gadgets we will look at, and the one we will do the most in-depth write up of, is the Members Gadget. Below is an example of Google's Members Gadget.

And here is a look at the code Google Friend Connect provided us with to create this gadget:

var skin = {};

skin['HEIGHT'] = '385';

skin['BORDER_COLOR'] = '#cccccc';

skin['ENDCAP_BG_COLOR'] = '#e0ecff';

skin['ENDCAP_TEXT_COLOR'] = '#333333';

skin['ENDCAP_LINK_COLOR'] = '#0000cc';

skin['ALTERNATE_BG_COLOR'] = #'ffffff';

skin['CONTENT_BG_COLOR'] = '#ffffff';

skin['CONTENT_LINK_COLOR'] = '#0000cc';

skin['CONTENT_TEXT_COLOR'] = '#333333';

skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';

skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';

skin['CONTENT_HEADLINE_COLOR'] = '#333333';

google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);

google.friendconnect.container.renderMembersGadget(

{ id: 'div-1231142266864',

site: '17435192789115407428'},

skin);

</script>

And there is it. Simple. As you can see, the majority of this code is for the customisable appearance you want on your gadget. Google sets all this up when you enter the colours you want in the initial stages of choosing your gadget. So, if you want to change the appearance of the gadget, rather than going back through the Google Friend Connect site you can do it yourself through your own code. We have left all the colours default for this example.

The Members Gadget simply logs "members" of your site and shows who is registered (through Friend Connect) with your site.

Sign In Gadget

The Sign In Gadget is like the Members Gadget, but not quite as complex. It allows users to sign in and out of your site and interact with the other Friend Connect gadgets (if they require a sign in).

Wall Gadget

The next gadget we will look at is the "Wall Gadget"

Below is an example of the Wall Gadget:

The Wall Gadget is a comments style gadget, where users can add comments about your content. In the options when setting up the Wall Gadget, as well as the usual styling options you can choose to allow user to post YouTube links and/or allow anonymous users to post comments.

The Wall Gadget is a very quick and simple way to get a comments system on your site.

Review/Rate Gadget

Google Friend Connect also offers us a rating gadget:

This gadget allows users rate the content attached to the gadget (as with many of the gadgets available, the scope of the gadget can be set to the site, the page or a specific item. Again, there is the usual customisation available as well as a few specific options.

This gadget can work in place of the Wall Gadget as it allows users to make comments as well.

LameGame Demonstration

The final gadget we look at is the Lame Game Gadget. It is just a demonstration set up by Google to show what sort of custom gadgets people can create to be added to the Friend Connect network. The gadget itself is simple - users simply click a button to get their score up and you can measure how many times you have clicked the button in comparison to other users. As they themselves call it, lame.

Click it for a bit of fun, but be careful not to cause yourself an injury...

So there we have it. Google's Friend Connect gadgets in a nut shell. This technology is still in its infancy and it will be interesting to see how it takes off and is used by websites all over The Internet. It is clearly Google making a big move to strengthen itself in the social network scene, which is what the web seems to be all about these days, and them trying to stretch their entire social network to many sites. We think it could be a quite a good idea if it gets picked up by enough people to be useful.

In a way it can be similar to a single sign in, OpenID style of technology.

As for fcOnTheWeb? We will run with the Ratings Gadget on our pages for a while and see what comes of it. We will also set up our Friend Connect Page and place a few gadgets on there and watch it for a while. This is probably not the way the gadgets are supposed to be used (all on one page away from the main site...) but we will address the issue in the future if we think it is necessary.

Get out there and put Google Friend Connect on your site, today. Or tomorrow...

ferrari_chris

Add your comment on this article below:

Sorry, there's an error with your form entries. We really appreciate your comment, so please try again.

Form submitting now...