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 }
{ 41 comments… read them below or add one }
← Previous 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!
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