How To Add The Google Friend Connect Social Bar To Your WordPress Website

Google Friend Connect released a new “Social Bar” in addition to the member and social gadgets.

In my post How To Add Google Friend Connect to Your WordPress Blog I showed how you can add the members gadget and wall gadget to your WordPress sidebar using the WordPress Widgets capability.

The New Social Bar

The new Friend Connect Social Bar provides a nice way to add all of this in one narrow strip across the top or bottom of your website.

You’ll see a nice status message of the last member to join your site, or the most recent comment, the ability to expand the list of members, or the list of comments. So it is like the original members gadget plus the wall gadget all in one package.

I’ve added the bar to the bottom of my site, because I thought adding it to the top would be distracting. So far I’m still experimenting, but I like getting back the real estate on my sidebar.

I also feel like it encourages a little more interaction than the other gadgets, but since I’ve just set it up recently that remains to be seen.

How to Add it To Your WordPress Blog

If you want to add the social bar to your WordPress blog, here are the steps:

First, log into your Google Friend Connect account and select Social bar from the left hand menu.

From here you can set things up in three easy steps:

Step 1 – Select Your Options

First, you can select options that determine if the social bar will show up at the top or bottom of your site (I selected bottom), if you want to enable comments (I did), if the comments on the bar apply to your whole site or on a page-by-page basis (I selected whole site) and if you want to pre-fill the comments with some helpful text.

Step 2 – Generate Your HTML

Hit the Generate Code button to create the HTML that you will use to put on your website.

Step 3 – Add Code to Your Site

Now you can add the code to your website. In most WordPress themes, you’ll need to add it to the footer.php (in your themes directory) right before the closing tag on your site. This file typically resides in the wp-content/themes/nameofyourtheme directory.

If you are using the ultra-cool Thesis theme, you can easily add it in the Thesis Options panel here:

That’s it. Now the Social Bar should be showing up as a strip across the top or bottom of your website, depending on the option you selected in Step 2.

Are you using the Friend Connect Social Bar on your website or blog? Are you having any problems setting it up? Let me know!

Update: I am no longer using Google Friend Connect – I strongly suggest you focus your efforts on Google+ instead. Read this article: How Google+ is Different.