In order to be able to install Friend Connect gadgets on your website, you must first do a bit of setup.

This includes:




* Adding your website in your Friend Connect account (which you can setup at http://www.google.com/friendconnect)
* Installing some special files on your website (in the case of a blogger account, this part is done for you)

SKIP DOWN TO STEP #7 under "Installing the Gadget" section if you have already enabled your site with Friend Connect.


Step 0:
Go to: http://www.google.com/friendconnect (signup if you haven't already done this).. login to your Friend Connect account.


Steps 1-6 Are very straigforward, since the Friend Connect team has made this very easy. You probably don't need this tutorial for that... but its here in case you need it.


Step 1: Click the "Setup a new site" button



Step:2 Pick the type of site you are setting up: a website or a blogger.com account. Click the appropriate link.

(the steps differ a bit, but I will show you how to setup a regular website)



Step: 3 Click continue



Step 4: Provide your site name (used as a nickname) and the site url, click continue.



Step 5: Download the rpc_relay.html and canvas.html files on your site. Likely, if your site url is something like http://www.yourdomain.com, then they need to be accessible via: http://www.yourdomain.com/rpc_relay.html and http://www.yourdomain.com/canvas.html respectively.

Once downloaded from Google and uploaded to your site, click continue.



Step 6: Test your setup. Click the test button.

Friend Connect is going to go visit your site to make sure it can see those rpc_relay.html and canvas.html files. You need to make sure these are setup properly.




Installing the Gadget

Step 7: Click on the "Social Gadgets" link on the left



Step 8: On the "Social Gadgets" page, scroll down and click the "Get Answers gadget >>" link



Step 9: Setup your gadget

Setup your gadget with a minimum 300px width


Step 10: Click the "Generate Code" button.

Step 11: Copy the generated code into your site html page.


You're done!