Web Hosting

How to Install Google Friend Connect on WordPress

I saw a question today asking how to install Google Friend Connect on a WordPress blog.

So I figured I’d put together a simple step-by-step guide.

For some reason, most of the stuff Google produces is not at all intuitive.  Good, for sure, intuitive, no!

So here’s how to install GFC:  

Step 1: If you don’t already have a Google account, open one. It’s free, and they have all sorts of interesting stuff you can explore. If you already have a Google account go to step 2.

Step 2: Go to the Google Friend Connect page.

Step 3: Click ‘Set Up a New Site’ – big blue button near the top right.

Step 4: If you’re not logged into your Google account the next screen will be the login screen. Log in.

Step 5: Next screen is the Terms and Conditions. Read and click the ‘I agree to the Google Friend Connect Developer Terms of Service’ button

Step 6: On the next page Click the ‘Set Up a New Site’ Link

Step 7: On the next screen click the ‘Friend Connect for Standard Web Sites’ (As long as you’re setting it up on a WordPress blog or anything other than Blogger)

Step 8: You’ll find yourself back on the previous screen again (a bit of special Google logic, that one 🙂 ), so click ‘Continue’

Step 9: On the next screen enter your blog title and full URL (http:// etc.), and click ‘Continue’

Step 10: On the next screen click the two buttons to copy the files (rpc_relay.html and canvas.html) to your PC. Store them in an easy-to-remember location.  Make a note of the URLs Google displays under each button. It will be the directory in which your blog sits. Click ‘Continue’.

Step 11: Pause your activity here and upload the files ‘rpc_relay.html’ and ‘canvas.html’ to the directory in which your blog is sitting, so that Google can find them at the URLs they gave on the previous screen.

Step 12: Once you’ve uploaded the files go back to your browser and click the ‘Test to Finalise Setup’ button.  As long as Google can find those two files you’ll be told the set up’s complete.

Those steps have prepared your site so that Google knows about it and it can process the GFC widgets.  The next stage is to configure the widgets and paste the code into your blog page or side bar.

Here are the steps for configuring the widgets and installing them on your blog:

Step 1: Once you’ve completed the steps above you’ll see your site listed on the left of the GFC screen. Click on your site name.

Step 2: You’ll see a menu of items on the left. Click on the ‘Members Gadgets’ link. These gadgets are what enable people to join GFC through your site.

Step 3: On the next screen click on ‘Add a Member’s Gadget’

Step 4: On the next screen there are 4 steps. First define the widget size. If you want to use GFC in a sidebar (WordPress bloggers) you’ll need to set a fairly narrow width.  There’s a warning that the minimum width is 200 pixels but the one in the right sidebar on this blog is only 186 pixels, and there were no problems creating it. I just typed the width into the width field.

Then choose your colours and finally click the ‘Generate Code’ button.

Step 5: Copy the code that’s created and paste it into a text widget on your blog, or a page, or wherever you want your GFC gadget to sit.

And that’s it – you’re all done!

Once you’ve got the hang of setting GFC up you’ll be able to play around with the other options (social bar, for example) and find a configuration that you like.

Web Hosting