Adding Google Friend Connect to your WordPress blog is easy. Friend Connect provides a cool way to add another dimension of “community” to your blog or website. I added it to my sidebar as a WordPress Widget, and I’m starting to see side conversations develop, in addition to the comments on individual blog posts. (This site uses the Thesis WordPress Theme.)
It is also nice because people that frequent your site can meet each other, and discover other websites or blogs that like minded people are members of.
How To Add Friend Connect To Your WordPress Blog
On Twitter a lot of people who are saying they’ve been “whitelisted” to be part of the Friend Connect program, so I assume that it will get easier and easier to have access to it. Here are the steps to add Friend Connect to your WordPress Blog.
1. Log into Friend Connect at http://www.google.com/friendconnect/home/
2. Click on the “Set Up A New Site” button. This will walk you through a short process.
3. Upload files - canvas.html and rpc_relay.html to the root directory of your blog.
Note: Google has simplified this step and you no longer need to upload these files. The process will ask you for the name and URL to your website that’s it! (as of Oct 2, 2009)
4. Get the code for the “Members Gadget”
5. Go into WordPress Admin -> Design -> Widgets (this assumes you are using a widget enabled theme.)
6. Create a Text Widget, give it a title, and insert the HTML code into the the Widget.
Now people can join your site as members. They can see other members on your site and meet them. You might want to consider adding some other Friend Connect Gadgets to the site now.
I use the “Wall Gadget” so people can leave comments and start discussions. There aren’t very many Friend Connect gadgets available yet, but the next one I plan to try is the ratings and review Gadget.
Update: Google has released the new Social Bar for Friend Connect. Here is a walk-through of How to Add the Google Friend Connect Social Bar to Your WordPress Website.
What about you – are you experimenting with Friend Connect yet? If so, leave your website url in the comments, or better yet – become a member of this site by Joining in the Friend Connect gadget in the right sidebar!
{ 114 comments… read them below or add one }
Next Comments →
Google Friend Connect is now openly available! Click this link for details on how to get it.
what if using a widget non-enabled theme?
How to set up to enable it to work at the main body of a post or a page?
Thx,
–leo
@Leo – If you are not using a Widget enabled theme, you will have to edit the sidebar.php file of your theme. Or you could put the HTML code snippet on a page or even a post if you wanted to. Just put the editor in HTML mode when you create the post or page.
Hey there,
One thing you missed in your article is how to integrate Friend Connect into Pages; for instance, check out our integration over @ http://codekindness.org/blog/2008/12/04/google-friend-connect-and-your-nonprofit-your-site-on-wordpress
… Basically, you need to edit the HTML of the page w/ the visual editor off; and in some cases, may actually need to place the JS in a directory for include.
Cheers,
–Dave / CK
http://www.codekindness.org
@Dave – Great tip. Thanks for your example.
A couple of quick updates:
1) If you are using a sidebar enabled theme, but are not using widgets and have customized your sidebar.php, adding a widget may make that disappear. To get it back just remove the widget. You’ll probably want to add the code into the sidebar.php rather than a widget for your blog.
2) Currently there is no way I can find to add Friend Connect to WordPress.com hosted blogs, or blogger either for that matter. You will need to have a self hosted blog to make this work. Those services may come out with a Friend Connect widget at some point in the future.
I’ve uploaded the files and can get to them, but google is having a hard time verifying that they are there. Is anyone else having this problem? I’m hoping it’s a google thing.
@Ryan – is your blog installed in the root directory or under a sub directory? Which directory did you put the canvas.html and rpc_relay.html files in?
My site is installed under a subdirectory. Is that the problem? Let me try installing them in the base public_html directory.
OK, got it to work. When entering the the base url for the website, I don’t put my url (http://oktober5.com), I put the path as it is in the web server, http://scribblous.com/oktober5 since oktober5 is a subdirectory under the main public_html directory.
Thanks for the tip
OK, I spoke too soon. That didn’t work. Once I download the gadget and insert it on my site it tells me the following (instead of actually working):
This gadget is configured incorrectly. Webmaster hint: Please ensure that “Friend Connect Settings – Site URL” matches the URL of this site..
And they’re right–the url I entered and the url of my site are different. I’m stuck once again.
I just wanted to see if you had the Friend Connect ID hooked into the comments.
Don,
Thanks very much for writing this post. It did exactly what it said on the tin, and I’m proud owner of a Friend Connect widget on my blog. You rule.
Thanks Julian!
I joined your Friend Connect community on your blog, it’s working great.
Tried to paste the code into a WP page and widget text box and depending on theme neither, partly or everything worked. In other words, since it sometimes works the code from Google is ok but the WP install handles it differently…
I get a lot of questions from people on how to set this up for other blogging platforms.
I just saw these instructions for setting up Friend Connect on Blogger – I don’t have a blogger account so I can’t try them. But if someone can report back to here to let us know if it works that would be great!
Coming back to this blog late in the conversation because I just got an email update from you where someone else was just asking again how to add GFC to Blogger.
You may have already covered this elsewhere here but just in case just add the Followers Gadget to Blogger. It is and always has been Google Friend Connect.
If you do not know how to FTP to a site on a hosted Domain, watch this video and it will show you how to use the FTP plugin for Firefox and get the files downloaded and FTP’d.
http://www.youtube.com/watch?v=TNWxKniZ-oQ
Don, if you have any questions just ask, I have the solutions and can advise you how to do it right the first time.
Also you do not need to go thru the creation of a Wordpress widget, just copy and paste the JavaScript Google supplies into the sidebar.php file in your Wordpress theme under the “Themes” >> “Editor” link in WordPress admin.
Don’t create a widget file, it just slows Wordpress down to call a function, up pull the file, compile the JavaScript and then write it back to the page. Does not sould like allot of server overheard but it is when you have high traffic. Less widgets the better to get WP to run fast.
I put Google Friend Connect on Sharpie’s blog the day it came out, but now I’m trying to figure out the community functions and opportunity. It feels like there should be a GFC homepage where you can follow your friend’s activities on GFC enabled web sites – oh wait, that’s Orkut! Hmm, so basically the viral features of GFC would work especially well in places where Orkut is popular (e.g. Brazil).
I wish Facebook Connect was OPEN and as easy to use as GFC – but it’s not, so I doubt we’ll implement it even though it has a much stronger following in our markets.
Don,
Thanks for your help with this. I have added the Gadget to both of my blogs. I have a self-hosted one with Wordpress and one with Blogger. You had requested feedback on whether the instructions for adding it to Blogger worked. The answer is YES.
In fact it is far simpler than doing it with Wordpress since you don’t have to upload either of these files (canvas.html and rpc_relay.html ). All you have to do is insert the HTML code into a Blogger Widget and you are set. You can check this out here http://xtraordinaryliving.blogspot.com/
Now, I would appreciate some suggestions as to how I can make use of this feature. Most of the people who are reading my blog are not very computer savvy and I would like to help them get more connected into using social media and interacting with one another.
@Rick – thanks for the comment and for confirming that those instructions work with Blogger!
As for how Friend Connect helps build a community… I think we’re all still experimenting. What I’ve noticed is this: as people join your site, you can click on their picture and see a little bit about them, their website, what other Friend Connect sites they’ve joined, etc. I’ve found a bunch of other interesting sites this way, and many people tell me this is how they found my site.
Also, the Friend Connect Wall Gadget is kind of fun; people tend to leave a different set of comments on a page than the blog comments, plus they can post videos on the wall.
I’m hoping that some other Friend Connect enabled gadgets will start to appear that will encourage interaction in different ways among the community of a site.
I’m not really sure I see the benefits of GFC for a blog – people are interacting *on* your site rather than *with* your site. Surely, as the blog owner, you feel more attached to the comments which are directed at you, rather than the comments in the comment wall which are not.
I really like the idea of being able to sign into sites using an exsiting account (a la OpenID) but that doesn’t seem to be what the intention is for GFC. It seems to be a quick and painless way of adding social features to a site, but blogs are already social by their nature. Otherwise it’s just a promotional tool – or is that the point?
It’s a shame because OpenID is a great idea and to have your Google / Yahoo / AIM or Facebook (Twitter?) account act as a pseudo OpenID account would be extremely useful.
Thank you! This was great help. And made it really easy for me to add GFC to my own site.
Vik
Thanks for this – seems like a battle between a unified connection platform and Facebook Connect is going to make this a disjointed tool in the end.
Just added Friend Connect to my photography blog at your suggestion. Come on over and be the second person to join after me! It think this will be a fun new tool to play with.
http://www.toddsmithphotography.com/transparency/
Hey, by the way… how did you get your Twitip-ID plugin to work so well. Mine is kinda half installed I think. I couldn’t find where to add the necessary code to the comments.php file using Thesis theme. If you can point me in the right direction, that would be awesome.
Thanks, Todd
@Chris – You’ve got some good points there. This is still experimental for me. I like that fact that there are even more conversations on my blog than before, but I do feel like there is something missing in terms of Friend Connect members interacting with each other and with the site directly. I’m betting that people will develop some compelling “social gadgets” that will foster these kind of interactions.
@Vik – That’s great – I checked it out on your site. Nice!
@John Jantsch – You bet.
I agree, it will be interesting to see how this battle between Friend Connect and Facebook Connect plays out.
Thanks for stopping by and commenting. Big fan of your Blog BTW.
@Todd Smith – done! I joined on your blog. Nice site too.
As for installing Twitter-ID in the comments, I followed the steps in this article. But I do have a bug as a result – there is always an extra comment at the end that shows an Anonymous blank entry. I’m planning to dig into that and fix it this weekend.
Hi Don,
I watched your video and I am still confused how to get Google Friend connect on my blog.
When it comes time to download those two snippets plus the root directory??
Could you shed some light?
Thank You
Merry Christmas
Maggie
@Maggie Lancy – thanks for your comment.
The two files, rpc_relay.html and canvas.html need to be downloaded from the Google Friend Connect site (see this image) and then uploaded to the directory where your blog is installed (or the root directory of your website) using an FTP program.
The code snippet (see this image), you need to add to your site in the sidebar Widget, or just in the HTML or a post or a page.
Does this help? If not let me know where you are getting stuck and I’ll try to help you get it working!
Don,
To follow up on Maggie’s question, as I have it myself, I have read where the two files both rpc and canvas need to be downloaded from Google Friend Connect to my site, but when I click them they download to my Mac and I am not sure “how to upload” from here to my Wordpress or other site(s). Take Wordpress for example, if you would do me a huge favor, how do I upload these “download” files now from my computer to Wordpress?
Thanks.
Hank Bailey
@Hank Bailey – thanks for the clarifying question.
You’ll need an FTP client to upload the files. There are a bunch of free ones available for both Windows and Mac.
Your hosting provider should provide you with the userid/password to FTP files to your site. Then use the ftp client to upload the files to the directory your blog is in – like this short video.
This assumes that you are hosting your own WordPress – if your blog is hosted on WordPress.com you won’t be able to upload these files, and won’t be able to install Friend Connect until WordPress.com does something to support this, which I hope they will do someday soon!
Does this help? If not, let me know!
I knew about it but still found yours helpful … thanks …..
For me the gadget is working in the sidebar but not in the wordpress (self-hosted) pages.
What do you think I need to modify?
Hi! Thanks for this article on GFC. However, I am having problems and wondered if you could help me? I have uploaded the two files to the root directory via FTP. (let me double check this to be sure: the root directory is htt://www.girlinparadise.com/ right?) I even installed the GFC plug in to try to get it to work, but google can’t find the files. Any ideas?
Thanks!
Thank you for this quickie. I’m kinda behind… found you via the wordpress forums.. So again thank you.. Time to get working
Got it working. Thanks
I found your post so helpful I linked to it from my website. You’ve explained what Google failed to explain.
Thanks
@InternetBusinessWithPurpose – Thank you – I appreciate it!
Nice post buddy.
I found your post so helpful I linked to it from my website. Thanx..
I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.
Hi Don, your article really helped me to install Google Friend Connect 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…(I might sound silly), now good thing is, I was able locate and activated GFC on my site.
Regarding GFC Social bar, I have found many of the sites where social bar have affected the functionality of the site, I don’t know what could be the problem, many be issue while installing, anyways I amd not trying GFC social bar at this point of time. Thanks
hello i have followed your great advice to a tee but my sidebar is still not showing the service..
I used the text widget option, but is it not worknig because the javascript code needs to be put into sidebar.php?
Thanks in advance
Hi,
I was wondering if anyone knows how to get this working with individual blogs, in a multi-user installation (WPMU) ?
The real issue is that I can’t see how I should upload the two files, so that they point to the root of each blog, eg. http://blogname.com/rpc_relay.html ?
- The WPMU install has Domain Mapping enabled/installed, for the record.
Thx in advance!
Is there any possibility for blogs hosted at wordpress.com, as wordpress.com won’t let you use javascript…
Hi Claude,
Unfortunately you can’t do this with WordPress.com sites right now. But I hope they will include it as an option soon!
Thx dude … This post help me a lot. I’v tryed to instal wordpress plugin but … this works better.
Good Job
Greetings, I’ve been looking around for support on my installation of GFC in my Wordpress 2.8.4 blog (http://irantot.co.cc/).
Somehow I got stuck in step 3, since Google won’t detect my rpc_replay.html (canvas.html was detected, however) of which I’ve had it uploaded to my main/root folder of my website as instructed, thus I couldn’t move to step 4 and get the widget code.
Was it there something wrong with my Wordpress? I’ve been using plenty of widgets (especially the SEO-friendly ones), can these be the cause of the problem I occur? Thank you for your support.
#iR#
@iRHoTeP,
By loading your domain I can see that you have the canvas file FTP’d.
However the RPC file is not. I can see that by adding the file path on to the domain:
http://irantot.co.cc/canvas.html
http://irantot.co.cc/rpc_replay.html
I would also be sure that I used www with the Google FC site, or if you never use it then do not. (maybe not the case with this Domaon) But some of the GFC gadgets do depend on exact domain paths in the URL.
Since the canvas file is found and I can find it and the RPC file is not found and I can’t find it then I would say the file did not get FTP’d to the root of the domain.
From the comment above is this video on exactly how to get the files downloaded and FTP’d correctly.
Then use the free FTP plugin the is in the video to see that the files are in the right place. Then everything should be fine since Google found the canvas file to begin with.
Of course let us know here how this went.
Thank you for your response Mr. Lang,
As you can see, I believe that I’ve uploaded it properly using FTP (both of the files into main folder/root of my host), the files were there in my remote file list, even I changed the file permission/CHMOD it into 777 but nothing changed.
I hope that server lagging would be the only issue so I would return for another try after few hours, but the problem still there up until now.
That’s why I’ve been thinking, are there known file crash upon rpc_replay.html with another file, i.e. incompatible to one of the Wordpress plugins? Thank you very much.
#iR#
File permissions are not an issue, the file is set to simply communicate with Google via JavaScript.
All I can suggest right now is to delete the file on the server and then download a new one, then upload it. If you click the link above that I created to your site you can see it returns a 404, file not found.
What country are you in? All I can think is that the top level domain is blocked. That being co.cc
Never heard of that domain. When you set up the account did you enter the exact domain with http:// and both top level domains? co.cc is what I am talking about.
The thought that a Wordpress plugin is causing problems should not be an issue, but what do you have installed?
Start off by deleting the file, then uploading a fresh one. The fact that it returns a 404 here is the problem, hence it does the same thing to Google so you don’t get the code.
Keep us updated, we will work this out. You may also want to Google search “co.cc blocked google friend connect” and see if there is an issue with the top level domain and Google.
Also to take one possibility off the list, have you opened a FTP client and checked to see that the file IS on the root? Because when you try to navigate to the URL for it, it does come back 404.
http://irantot.co.cc/rpc_replay.html
Click the link and see. That tells me it is not in the root directory. Open your FTP client and check, I bet it is not there. If it was and it was corrupt it would throw a JavaScript error, not a 404.
You are right Chris. I just checked it and got the same thing – the rpc_relay.html file does not exist.
@iRHoTep – re-upload this file to the root of your server and you should be all set.
Thank you for your response again, Mr. Lang.
co.cc is kind of free domain host in which I’m using it for my blog, you could actually Google it to find out more about it.
I also tried to use the original URL (the one without co.cc) and even tried to put the website’s original IP number but also failed. FYI I used two parked domain of co.cc for the single blog we’ve been talking. I also tried on both of those URLs but neither worked.
About the location, well, I’ve checked and double checked the remote location using FTP client and cpanel, the files were there, tidily. And I’ve never had any problem in putting website files inappropriately. So I believe there’s nothing wrong with the location of the file.
Well, since you’ve mentioned it, perhaps the problem lies with the ambiguity of my blog URL (of two co.cc parked domains) but I don’t have any clue on how to fix this and where to start.
#iR#
Two things come to mind now.
If you have parked domains I that could be the problem, but make sure the site you are listing the site under on Google.com/friendconnect is using the live domain, not one of the parked, or redirected domains.
Second, we now know you are using Cpanel, what directory are the file in? In Cpanel I believe it should be public_html but I host on GoDaddy who does not use Cpanel, so maybe Don can confirm that is the correct directory.
The fact we can load the canvas file in our browsers but not the RPC tells us you have something wrong in the file structure.
Also make sure the file was not renamed slightly by the FTP or download process.
Because….
I copied and pasted it from your post above and it is spelled as http://irantot.co.cc/rpc_replay.html when it should be http://irantot.co.cc/rpc_relay.html
So make sure it is named correctly on your server as rpc_relay.html not replay.
Thank you for your response again, Mr. Lang. I’d like to thank to Mr. Campbell too for his response which was delivered in the same time as my previous response.
So I’ve decided to drop one of my addon (not parked domain as previously mentioned, pardon me) domains and to let my blog goes with the single URL of http://irandi.co.cc/ (instead of the previous one).
I’ve also removed the files (rpc_relay and canvas) and re-uploaded it into the root location of my blog using FTP client (the kind of public_html for my blog). But then again, the same problem still persisted (the rpc_relay wasn’t detected; canvas was detected). I’m pretty sure that there were no problems with the files’ naming and location.
I kinda lose my mind now
Thank you for your supports…
#iR#
Hi Don, great tip! I migrated from wordpress.com to wordpress.org to enable Google Friend Connect. I’m happy with what I see. You ROCK!
Hey thanks Victor!
Next Comments →
{ 13 trackbacks }