Setting Up Facebook Connect for Wordpress

by adam on February 23, 2009

These steps are needed to prepare your wordpress blog for facebook connect integration using the WP-FBConnect Plugin. The plugin is documented here and you can download it here. The implementation is pretty simple, but there are some caveats as follows.

Step 1:

Add the language attributes wp function to your header(s). The plugin will add the following lanuage attribute for you “xmlns:fb=”http://www.facebook.com/2008/fbml”.

<html xmlns="http://www.w3.org/1999/xhtml"
<?php language_attributes(); ?>>

Step 2:

Call wp_head in your header(s)

<?php wp_head(); ?>

Step 3:

Call wp_footer in your footer.php

<?php wp_footer(); ?>

Step 4:

Call the login function from your comments.php. Use the ‘do_action’ hook so that if you disable the plugin, it is not called.

<?php do_action('fbc_display_login_button')  ?>

Step 5 (optional):

Call the following code in your comments.php if it doesn’t already exist. It will display the facebook commenter’s profile pic or an empty gravatar/avatar if left by a regular user, ‘32′ is the size of the avatar you would like to display.

<?php echo get_avatar( $comment, 32 ); ?>

Step 6 (optional):

Call this function if you are using WP-Supercache or another caching plugin. You need to make sure that the “YOURAPIKEY_user” cookie isn’t cached. Replace YOURAPIKEY with your unique developer api key.

<?php
function fbc_supercache($cachestr){

if(isset($_COOKIE["YOURAPIKEY_user"]) )
$cachestr .= $_COOKIE["YOURAPIKEY_user"];

return $cachestr;
}

add_cacheaction('wp_cache_get_cookies_values', 'fbc_supercache');
?>

Step 7 (optional):

Some versions of wordpress will need a bit of a hack to fbconnect.js. Change the following on line 93.

if (comment_text.trim().length === 0) {

to:

if (comment_text.length === 0) {

Note:I am not the developer of this plugin. Full credit goes to Adam Hupp for creating it.

335 comments • Tagged as: facebook
Share on Twitter, Facebook, Delicious, Digg, Reddit

335 comments

Candace,

It appears as though you haven’t closed your html tag.
Don’t forget the closing “>”

-Adam

by Adam Breckler on March 25, 2010 at 2:35 pm. #

[...] pictures. However, it has not been updated since the beginning of the year. Still, there is a nice tutorial by the developer Adam [...]

by Wooden Foundations Blog Thingo › How To Integrate Facebook With WordPress on March 28, 2010 at 9:17 pm. #

[...] avatar show up (with a Facebook designation) on your site. Check out Adam Breckler’s excellent tutorial for more help with this [...]

by Integrating Facebook with your Blog | AlexVerse on April 4, 2010 at 6:31 pm. #

testing

by Mohd Fadzly on April 5, 2010 at 6:04 am. #

Thanks for your tutorial Adam, that was very helpful. I’ve run in to a weird problem, whenever anyone uses Facebook Connect, the page goes into something like an infinite loop and keeps on reloading itself. I’ve tried placing FB Connect all over the comment section, but the continuous reloads won’t stop. Could you help me with this problem please?

by Paul on April 6, 2010 at 4:30 am. #

Sorry for the crazy comment up there… figured it out

by Paul on April 6, 2010 at 11:43 am. #

Hi man,

In my site not work. if you go on mmilano.com, go into a post -> connect.

If you stay into post, facebook is not login but if you go to home page and after you go back to post it works!

Can you help me?

by Francesco Langiulli on April 8, 2010 at 10:35 am. #

OK!! I have fixed. I have removed facebook fan widget!

To get around this i’ll use an iframe.

by Francesco Langiulli on April 8, 2010 at 11:58 pm. #

This works out well, huh?

by Darin Cassler on April 11, 2010 at 9:51 pm. #

Prueba

by Diario Orenses on April 11, 2010 at 10:01 pm. #

Good plugin man. I’ll try it.
Thank you.

by Mitesh Tandel on April 19, 2010 at 3:15 am. #

Cheers for the article… Been having trouble setting it up so will try this!

by Mike Mikalis-Dj on April 19, 2010 at 3:41 am. #

The plugin works perfectly in all browsers except IE. Fconnect button and the avatars does not show.

In the other browsers I want the avatar to be 60px. The “dummy” avatar resizes to 60 but the actual facebook avatar is stil 32.

Please help!

by Marius Hesleskaug on April 21, 2010 at 3:56 am. #

will this post the comment to my FB news feed ? I’ll go Homer if it doesn’t … D’OH!

by Amir Mahmoud on April 25, 2010 at 4:30 am. #

test

by Petter Tingvoldli on April 27, 2010 at 9:47 am. #

test

by Fabian Moya on April 27, 2010 at 3:08 pm. #

NICE!!

by Gustavo Zimbron on April 28, 2010 at 2:23 pm. #

your a pikey

lol

by Chris Shipton on April 29, 2010 at 9:04 am. #

Great Tutorial

by Klaus Estaban on May 2, 2010 at 7:02 am. #

Everything is working great except, if I hit log out under comments, it takes me to the wordpress admin logout. And my comments are not showing under my profile.

by Mr. Haynes on May 2, 2010 at 7:33 am. #

Also, it looks like I have to keep approving the comments each time, though I have enable approve only once.

by Mr. Haynes on May 2, 2010 at 7:41 am. #

As usual.. facebook adds a lot of code – NON VALID code. Is it so hard to follow web standard ? I deactivated this plugin.. sorry.. not for me.

by Kent on May 3, 2010 at 8:12 am. #

recommended to all

by Sawangpong Muadphet on May 7, 2010 at 11:15 am. #

hihi

by Sebastiaan van der Lans on May 7, 2010 at 3:54 pm. #

i am using thesis them and everything working fine but no avatar show up any thesis user here?

by Santel Phin on May 10, 2010 at 4:39 am. #

Thanks for this !

by Ouranos Pandora on May 10, 2010 at 8:27 am. #

I am getting a parse error when I try to activate the plugin also.

Parse error: parse error, unexpected T_OBJECT_OPERATOR in /home/content/f/u/s/fuszftp/html/fuszionimages/_fuszionsite/wp-content/plugins/wp-facebookconnect/fbconnect.php on line 37

Anyone know how to fix this?

by Jason on May 12, 2010 at 6:09 am. #

i am testing on my site but cannot get avatar to work
here is my link to test http://khmerbird.com/editorial/i-was-busy-with-facebook-connect.html

by Santel Phin on May 18, 2010 at 2:49 am. #

[...] pictures. However, it has not been updated since the beginning of the year. Still, there is a nice tutorial by the developer Adam [...]

by How To Integrate Facebook With WordPress | BRIAN SCOTT GERBER on May 22, 2010 at 3:21 pm. #

Big help, thx!

by Biter on May 27, 2010 at 2:29 pm. #

Cool! I’m going to give this a go. Messing around with Disqus at the moment on http://www.braselector.co.uk but it’s kind of clunky (Serendipidy blog doesn’t support Facebook) but the new area at http://discounts.braselector.co.uk is Wordpress

by Marketwire Ltd on May 30, 2010 at 4:06 am. #

Hi,
Can anyone here tell me how to change the font color of the comments and the Like status once the whole connecting is done?

by Bilal M. Wir on June 16, 2010 at 2:38 am. #

I’ve installed this and got it working

On the comments page, even after a person has logged in with their Facebook credential, the ‘Connect with your Facebook Account’ and Facebook logo still shows even though it appears to have done a page refresh.

If I do a proper page refresh (using F5 on the keyboard) then the text and Facebook logo disappear which makes me think it’s not doing a proper refresh when you first login.

Is this happening to other people or not? Is there a way to fix this?

by Charles on June 18, 2010 at 5:30 am. #

[...] pictures. However, it has not been updated since the beginning of the year. Still, there is a nice tutorial by the developer Adam [...]

by How To Integrate Facebook With WordPress | speakeasy on June 20, 2010 at 8:03 pm. #

interesante

by ed on June 23, 2010 at 8:31 pm. #

can anyone help me? i’m trying to use the plugin im my website but is not working. on the theme that i’m using is not working put on the wp-admin is working, can any one help me?

by George on July 5, 2010 at 9:40 pm. #

How to logout!

by TBS on July 15, 2010 at 2:20 pm. #

Hi, I fixed the plugin not working on IE (on my own theme) by adding

on the header. This fixed the avatar not showing up.
I am currently trying too find the font settings for the plugin. Can anyone tell me how to change my font. Thanks.

by Andy on July 19, 2010 at 2:26 pm. #

Hi,

I am having 2 issues.
1. http://somesite.com/wordpress/wp-content/plugins/wp-fbconnect/fbconnect.js (with my site address) is inaccessible (what should i change in htaccess ?)
2. When someone authenticate the application, the page stuck in indefinite redirection loop. Is it cuz of connect url or something ?

by Mark on August 2, 2010 at 2:48 am. #