How To Add Google Friend Connect To Your WordPress Blog

by Don Campbell on December 3, 2008 · 51 comments

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.

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!

Want more WordPress & Local SEO Tips?

Subscribe to my WordPress and Local SEO newsletter to get weekly tips and tricks delivered directly to your inbox!

{ 10 trackbacks }

smallbusinessbrief.com
December 4, 2008 at 7:53 am
Google Friend Connect
December 4, 2008 at 12:49 pm
Google friendconnect and Wordpress | Wahlqvist
December 4, 2008 at 6:58 pm
Google Friend Connect Makes Your Site More Social | The Expand2Web Blog
December 4, 2008 at 10:06 pm
Claudio Menzani» Archivi Blog » I like Google Friend Connect
December 6, 2008 at 4:11 am
Video: How To Install Google Friend Connect On WordPress | The Expand2Web Blog
December 7, 2008 at 10:16 am
How To Add Google Friend Connect To Your WordPress Blog | The Expand2Web Blog
January 1, 2009 at 12:01 am
How To Add The Google Friend Connect Social Bar To Your WordPress Website | The Expand2Web Blog
February 19, 2009 at 3:20 pm
links for 2009-04-01 | girliegeek
March 31, 2009 at 11:04 pm
Google Friend Connect | INTERNET BUSINESS WITH PURPOSE
May 1, 2009 at 2:54 pm

{ 41 comments… read them below or add one }

1 Don Campbell December 4, 2008 at 1:21 pm

Google Friend Connect is now openly available! Click this link for details on how to get it.

Reply

2 Leo December 4, 2008 at 10:20 pm

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

Reply

3 Don Campbell December 4, 2008 at 10:35 pm

@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.

Reply

4 Dave December 5, 2008 at 6:19 am

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

Reply

5 Don Campbell December 5, 2008 at 7:54 am

@Dave – Great tip. Thanks for your example.

Reply

6 Don Campbell December 6, 2008 at 2:56 pm

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.

Reply

7 Ryan December 7, 2008 at 7:12 am

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.

Reply

8 Don Campbell December 7, 2008 at 10:24 am

@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?

Reply

9 Ryan December 7, 2008 at 5:46 pm

My site is installed under a subdirectory. Is that the problem? Let me try installing them in the base public_html directory.

Reply

10 Ryan December 7, 2008 at 5:53 pm

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 :)

Reply

11 Ryan December 7, 2008 at 6:06 pm

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.

Reply

12 Chad December 8, 2008 at 5:27 am

I just wanted to see if you had the Friend Connect ID hooked into the comments.

Reply

13 Julian Simpson December 8, 2008 at 12:26 pm

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.

Reply

14 Don Campbell December 8, 2008 at 1:43 pm

Thanks Julian!
I joined your Friend Connect community on your blog, it’s working great.

Reply

15 Jens December 9, 2008 at 9:00 am

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…

Reply

16 Don Campbell December 9, 2008 at 1:53 pm

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!

Reply

17 Daggett December 11, 2008 at 4:00 pm

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.

Reply

18 Rick Itzkowich December 14, 2008 at 8:29 am

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.

Reply

19 Don Campbell December 14, 2008 at 11:37 am

@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.

Reply

20 Chris Knowles December 16, 2008 at 2:36 pm

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.

Reply

21 Vik Duggal December 17, 2008 at 12:58 am

Thank you! This was great help. And made it really easy for me to add GFC to my own site.

Vik

Reply

22 John Jantsch - Duct Tape Marketing December 19, 2008 at 7:45 am

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.

Reply

23 Todd Smith December 19, 2008 at 1:27 pm

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

Reply

24 Don Campbell December 19, 2008 at 1:28 pm

@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!

Reply

25 Don Campbell December 19, 2008 at 1:30 pm

@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.

Reply

26 Don Campbell December 19, 2008 at 1:36 pm

@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.

Reply

27 Maggie Lancy December 24, 2008 at 12:07 pm

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

Reply

28 Don Campbell December 24, 2008 at 12:16 pm

@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!

Reply

29 Hank Bailey December 26, 2008 at 4:47 am

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

Reply

30 Don Campbell December 27, 2008 at 12:26 pm

@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!

Reply

31 Soumen Halder December 31, 2008 at 4:31 am

I knew about it but still found yours helpful … thanks …..

Reply

32 ROW January 18, 2009 at 7:50 am

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?

Reply

33 Amy March 19, 2009 at 8:40 pm

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!

Reply

34 SaintSeanzy March 27, 2009 at 4:25 pm

Thank you for this quickie. I’m kinda behind… found you via the wordpress forums.. So again thank you.. Time to get working :D

Reply

35 fwdemails.com April 10, 2009 at 11:29 am

Got it working. Thanks

Reply

36 Internet Business With Purpose May 1, 2009 at 2:59 pm

I found your post so helpful I linked to it from my website. You’ve explained what Google failed to explain.

Thanks

Reply

37 Don Campbell May 1, 2009 at 3:55 pm

@InternetBusinessWithPurpose – Thank you – I appreciate it!

Reply

38 Tech @ InkAPoint May 7, 2009 at 12:08 pm

Nice post buddy.

Reply

39 Akmal Online June 6, 2009 at 9:16 pm

I found your post so helpful I linked to it from my website. Thanx..

Reply

40 Alexdan June 9, 2009 at 6:33 pm

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.

Reply

41 slym June 12, 2009 at 2:35 am

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

Reply

Leave a Comment