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.

What do you think?

Comments on this entry are closed.

  • CanThoBiz Mar 25, 2009 @ 16:29

    Hi there, Thanks for sharing your experience!


    • WealthyDragon Mar 25, 2009 @ 17:33

      Hi Jame,

      You’re very welcome – hope it was useful!



  • slym Jun 12, 2009 @ 18:22

    Hi there, your article really helped me to install GFC on my site. I have recently moved from blogger to wordpress, on blogger task was as easy as making a click but here I have to search around, how to proceed. I was really struck at step 11, when I was not able to understand in which directory I have to upload these two files, so that result is as as per requirement… now good thing is I was able locate and activated GFC on my site. Thanks
    [rq=5271,0,blog][/rq]Problem in sending big files on email? …find solution here

    • WealthyDragon Jun 12, 2009 @ 18:45

      Hi Slym,

      You’re very welcome and I’m delighted it helped!

      I like the way you’ve set up Thesis on your site – it looks very good.



  • Stefan Berg Sep 2, 2009 @ 17:40

    Hi Martin! …
    I tried to follow Googles and now your instructions…. I can upload the HTML and I have a few friends but when You click on the Full View… It says error 404… No page found… I did manage to change the name to on the Canvas page: … But when you click on the 2 frames up right It do not work… No Idea Why …. any Ideas?

    Stefan Berg
    .-= Stefan Berg´s last blog ..Do you know where the best places is to publish your articles and How? =-.

    • WealthyDragon Sep 3, 2009 @ 7:19

      Stefan, hi,

      I’m sorry – I don’t have any ideas as to why that would be. Google themselves won’t be any help either – they’re not big on helping people solve problems.

      You may want to try Googling for ‘Google Friend Connect support’ or ‘Google Friend Connect problems’ or something like that – someone else has probably come across this one before.



  • Lynnette Bonner Sep 15, 2009 @ 15:11

    Hello, I’m trying to add Google Friend connect to my Wordpress self-hosted blog. No matter how I try to do it, a widget box shows up but nothing shows inside of it except the border where GFC should be. The box is blank. Can you tell me what I’m doing wrong?
    .-= Lynnette Bonner´s last blog ..Today I’m in Two Places at Once. 🙂 =-.

    • WealthyDragon Sep 16, 2009 @ 7:44

      Lynnette, hi,

      That’s a great looking blog you have there..! I took a look and GFC is working fine – either you’ve fixed it or it was a temporary glitch with Google – which does happen..!



  • Lynnette Bonner Sep 16, 2009 @ 14:19

    Thanks for the kudos on the blog. 🙂

    I’ve figured out it must be a browser issue. I can see it fine in Chrome, but for IE and FF users I’m hearing that they are not seeing anything in the box. (And my testing is showing the same.) Will keep an eye on GFC to see if they come up with a fix.

    Thanks for taking time to get back to me and let me know you could see it. What browser were you using, if you don’t mind my asking?
    .-= Lynnette Bonner´s last blog ..What Kind of Legacy Will I Leave? =-.