Google Friend Connect is a gadget that allows you to turn your blog into a social community and gives your viewers the opportunity to engage more deeply with your blog content, with each other and with you.
Another great benefit of Google Friend Connect is that it can give your site “social credibility” by displaying photos of all of your sites GFC members, this helps to create trust and an element of site popularity for your new visitors.
How To Add Google Friend Connect To Your WordPress Blog
This guide will teach you how to set up Google Friend Connect on your self-hosted WordPress blog.
Step 1
First of all you will need to go to Google Friend Connect, click on “get started” and sign in with your Google account. If you do not yet have a Google account, click on the image below to get one.
Step 2
When you are signed in, simply click on “Friend Connect for standard websites” link as shown below.
Step 3
On the next sceen, as seen below, click on “continue”.
Step 4
Add your blog title (name of your blog), home page URL (web address of your blog) and “continue”.
Step 5
Download the 2 files as circled below, make sure you remember the location of where you save these files and click “continue”.
Step 6
Once you have rpc_relay.html and canvas.html downloaded, you will need to upload them to your blog’s root directory via an FTP client. If you do not have an FTP client, a popular one is FireFTP which you can download here.
As you can see in the FireFTP screenshot below, firstly log into your blog FTP and click on “public html” which will open up any websites that you have loaded into your FTP account. Once this is done, simply locate the 2 files (from your saved location), then drag and drop both files (rpc_relay.html & canvas.html) onto the website that you are adding Google Friend Connect to (as seen below).
Note: Your FTP setup may look a little different to the screenshot below, if it does, just make sure to upload the 2 files to your root directory.
Step 7
Once you have uploaded both of these files, click on the Google Friend Connect test button, as shown below.
Step 8
OK, now that’s all done, we come to the next important part – Installing the Google Friend Connect gadget onto your wordpress blog. After you have tested your setup, if it has worked correctly, it will take you to the page you see below, click on “get code for members gadget”.
Step 9
On the next screen, you have options to change the size and colour of your Google Friend Connect Gadget, and once you choose your settings, click on “generate code” as shown in the screenshot below.
Step 10
Once “generate code” is clicked, a html code will be displayed, copy and paste that code into a text widget within your WordPress dashboard, as I have done in the screenshot below.
Your new Google Friend Connect Gadget should now be displayed in the blog sidebar of your self-hosted WordPress blog!
Once you have a google account, make sure to come back and join my Google Friend Connect on SeanSEO (at the bottom of the page).
About Sean Rasmussen
Cool! great info, I will add this to my site tomorrow.
Good to hear Jon, using great tools like Google Friend Connect can only help your online presence.
Regards – Sean
Hey Sean, pretty clear and simple steps. Thanks for all the images you have added there…
though whats the benefit of using friend connect??
Hi Harsh,
Glad the post was beneficial for you. As far as the benefits of Google Friend Connect, I have written an article that you may find beneficial at http://seanseo.com/google/google-friend-connect/
Regards – Sean
How come whenever I add it to my blog, it ends up being an empty box with nothing inside.
Any solutions? Thanks
Hi Anna,
I think the problem may be that you are yet to get some members to your GFC. As people join your site through Google Friend Connect, you will start to see their photos appear within the widget. Don’t worry, it can take a bit of time…consider it a work in progress
Regards – Sean
Hello there
Could you please explain to me how to open FireFTP?
I dont know where it is. I downloaded it and add it to firefox…but where is all these things we see in your screenshots?
pls help
Hi Chris,
In firefox, you will find FireFTP by going to the “tools” tab in your browser. Just click on “tools’ then “fireftp”
Regards – Sean
Hi,
I am having problems figuring out how to find where i write the code i have copied?
i can find the widgets category, but where do I add a widget?
Thanks,
A newbie to wordpress..
Hi Henriette,
When you are in the wordpress widgets section, simply add a “text widget” to your sidebar and include the google friendconnect html code into the text widget box. Hope this helps
Remember, this will only work on a self-hosted blog.
Regards – Sean
Thanks ! I succeeded
/Henriette
Great work Henriette, glad it’s all working for you
Regards – Sean
Man, this is crazy. We call tissues – “Kleenex”, packing tape – “Scotch”, photocopy – “Xerox”. And we’re not far from calling the internet – “Google”.
Thanks Sean. Looks pretty straight forward.
I would recommend using FirefoxFTP instead of a client. So much easier
Step by step and easy to follow. You leave no stone unturned Sean.
But how do we get more people to opt in as a friend? Any tips up your sleeve for that one Sean?
Hi Sam,
I think the best place to start is with your friends. I think if you send everyone in your gmail account a message asking them to become a friend of your blog; I’m sure we’d all do it. Then there’s your Facebook friends. The list is endless.
I’ll opt in and I can’t wait for my email.
Wow, what a handy post! Great news is that I got the code, and I didn’t even have to do half of those steps (5-8)!
Good to hear Lina. Everything is easy with detailed instructions
I was only trying to add google friend onto my blog yesterday but couldn’t work out where to put the code. I also had my web address and not my blog address in so obvious nothing happened. If I had read this post first I would have saved myself 2hours of frustration with no results. Thanks Sean.
Okay, have bookmarked this page for when i get a site/blog!
Thanks again for another tip!
Sue
When I put the generated code into the widget, the actual text appears in the widget instead of the friend connect. Any suggestions ?
What type of blog are you installing the widget on Mookxi? I believe it will only work on self hosted blogs, not blogs with .wordpress.com in the URL
Hi Sean
Hey this is really cool, I like it. Have made a date in my diary for Sunday to install it.
Not only is it aesthetically pleasing to the eye, but as you say, it will give my site ‘social credibility’.
Thanks Sean
Blessings
Elly
Hi Sean,
I love the idea of the Google Friend Connect to be installed on my WordPress blog. Having “social credibility” sounds so right for me and my blog.
Thank-you Sean. Your article posts have an abundance of knowledge that gives me the opportunity to have my blog rank up there with the best.