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

Thanks!

by Francisco Hernández-Marcos on January 5, 2010 at 1:05 pm. #

H’mm it wouldnt let me post – let me try this again

Logged in as <a href="/wp-admin/profile.php > via Facebook.

<!–XHTML: You can use these tags: –>

<input type="hidden" name="comment_post_ID" value="" />

ID); ?>

by Raj Jhaveri on January 5, 2010 at 3:41 pm. #

So I figured out whats wrong – but still don’t know how to fix it. Some reason Facebook connect is not registering an ID in wordpress. So the plugin is not forming a new ID when someone signs in via facebook and the value for the user id is showing up as zero. Please help me to fix this.

Thanks.

by Raj Jhaveri on January 5, 2010 at 11:38 pm. #

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

by Integrate Facebook With Your Blog | Sahil Kotak dot Com on January 7, 2010 at 5:31 am. #

Hi All,

I allways get
“Parse error: syntax error, unexpected T_OBJECT_OPERATOR in /USER/bardocz/bardocz_com/www/wp-content/plugins/wp-facebookconnect/fbconnect.php on line 37″

when trying to activate the plugin.
Tried WP 2.8.x and 2.9.1… no luck…

Any idea?

Thanks, Aron

by Aron Bardocz on January 10, 2010 at 7:17 am. #

testasfd

by test on January 11, 2010 at 10:45 pm. #

Testing facebook connect

by Alex Poon on January 11, 2010 at 10:49 pm. #

testing

by test on January 11, 2010 at 11:42 pm. #

testing facebook connect

by Bosco Cheung on January 11, 2010 at 11:44 pm. #

.

by Peter Bickhofe on January 12, 2010 at 8:09 am. #

[...] Setting Up Facebook Connect for Wordpress na stronie Adama Brecklera Podobał się artykuł? Dołącz do grona stałych czytelników bloga. [...]

by Dodawanie komentarzy do wpisów za pośrednictwem konta na Facebooku on January 17, 2010 at 11:03 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 Integrating Facebook In A WordPress Blog « jawaris indonesia on January 19, 2010 at 12:43 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 Integrating Facebook In A WordPress Blog on January 19, 2010 at 12:54 am. #

Hi Adam,

I’ve a weird encounter with Facebook connect. The user profile picture is not showing on certain conditions.

Profile picture is not showing when view with:-
Windows XP IE7,8
Win7 IE7,8

But when view with Win 7 Firefox, profile picture is shown. For your site, regardless of what OS and browser I’m using, profile picture is shown. Any idea what went wrong? Thanks.

by WS Liang on January 24, 2010 at 8:14 pm. #

[...] Adam Breckler wrote up an installation tutorial: http://www.adambreckler.com/setting-up-facebook-connect-for-wordpress [...]

by WordPress and Facebook Plugin « Sadhas Blog on January 27, 2010 at 9:44 pm. #

This is great, thanks

by Jason on January 29, 2010 at 6:16 pm. #

dsdds

by as on February 1, 2010 at 10:42 am. #

thanks for the plugin

by Charles Sok on February 1, 2010 at 10:31 pm. #

test

by Wcn Wicricnews on February 3, 2010 at 10:55 pm. #

hey adam,
thanks for the instructions. however, i can’t get the fb connect button to show up next to the comments, even though “Connect with your FB account” is visible. i made sure to be logged out of FB and out of the WP admin. the odd thing is that the FB button is actually showing up on the WP-admin login form. any ideas on this one?

by Mason Yarnell on February 6, 2010 at 9:06 pm. #

@mason , that is odd…do you have a live post that is supposed to have the connect button that I can check out?

by Adam Breckler on February 7, 2010 at 9:51 am. #

@adam, yeah, it’s a weird issue. http://www.amplifyprogress.com/wp-admin

by Mason Yarnell on February 7, 2010 at 8:31 pm. #

@mason, are you sure you have you’re connect app set up on facebook and have configured the api key in the wp plugin correctly? Also, it appears as though the following files load in you’re footer instead of in the header where they should, fbconnect.css, FeatureLoader.js.php, fbconnect.js…view the source of this page for an example. Are you calling wp_head() and wp_footer() in you’re header and footer respectively?

by Adam Breckler on February 7, 2010 at 8:51 pm. #

My wordpress has this

I dont know where to add the get_avatar command?

by mike on February 10, 2010 at 12:13 pm. #

< ?php wp_list_comments('avatar_size=35&callback=custom_comment');?>

by mike on February 10, 2010 at 12:14 pm. #

mike, try replacing that with < ?php comments_template(); ?> and then adding < ?php echo get_avatar( $comment, 32 ); ?> to you’re comments.php file.

by Adam Breckler on February 10, 2010 at 12:52 pm. #

Works! thanks.
Now what about some facebook accounts that aren’t creating a user name entry in the wordpress users? and it displays welcome, thasts it

by mike on February 10, 2010 at 10:38 pm. #

Hi folks, I can’t get this to work in WP 2.9.1. I get a Parse error on this line 37 of fbconnect.php:
return fbc_facebook_client()->get_loggedin_user();

Any ideas what I need to tweak?

by Jeffrey Pia on February 11, 2010 at 1:46 pm. #

[...] can follow the tutorial here to know exactly how to go about [...]

by Tools: Useful Facebook Plugins For Your WordPress Blog | Startup Meme - Unofficial Facebook Guide on February 12, 2010 at 11:24 am. #

This does not work in Chrome and this does not display the userr’s facebook name or their avatar it just saids “facebook user” with a facebook silhouette pic. Bummer

by Keith on February 14, 2010 at 5:26 pm. #

Привет!

by Андрей Иванов on February 15, 2010 at 2:12 pm. #

test

by Dasha DWoj on February 17, 2010 at 9:22 am. #

I cannot get this to post back to FB; have the plugin going on WPmu 2.9.1
I get no errors, can get the avatars (for those having issues make sure they are set to show under settings/discussion), it creates users and lets them post but does not offer you to share comment on your wall. I played with app settings, did step 7 forward and backwards (and all the other ones!) – no luck. Any ideas? What else can I change?

by Dasha DWoj on February 19, 2010 at 8:01 am. #

Let me try this… you have great steps of how to do it… hope i can follow how you’ve done this.

by Dlysen Macatangay on February 20, 2010 at 5:22 pm. #

for me not working…

by Arulraj Venni on February 21, 2010 at 12:05 pm. #

just trying

by Kenneth Roelandt on February 22, 2010 at 11:46 pm. #

Awesome plugin!

by Alberto Giorgi on February 25, 2010 at 8:20 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 to your Wordpress CMS or the other way. - - on February 27, 2010 at 8:51 am. #

qwerty
just trying

by Toni Biočić on March 1, 2010 at 4:09 pm. #

Hi, I’m having the same problem as Daria (comment 233)

It’s all installed and working fine for logging in, but comments aren’t posted onto facebook profiles.

I’ve checked all the application settings and all seems fine – is this a facebook bug or an issue with the blog?

currently running latest version of the plug in on wp2.9.2

Andy

by Andy Simpson on March 4, 2010 at 2:49 am. #

am trying to integrate fbconnect in my site[dialoguebox.in] and its 90% fine.the pop up which is coming after the click in f connect button is not closing but redirecting to 404 page….please help me…where i need to do the changes

Thanks
Leo

by Leo on March 9, 2010 at 2:45 am. #

trying again

by Dasha DWoj on March 9, 2010 at 12:52 pm. #

For those who cannot get the comments to post to FB and are using plugin v 1.2:
go into your fbconnect.js file and add

subbutton.onclick = function () {
FBConnect.show_comment_feedform();
return false;
};

right before
this line
comment_form.appendChild(subbutton);

for some reason setAttribute is being stubborn; the version of the plugin on this site uses onclick to assign the action.

by Dasha DWoj on March 10, 2010 at 6:09 am. #

Excelent!

by Efrén Dgz on March 11, 2010 at 9:44 pm. #

Can someone tell me if this is working correctly…It seems to be ok except that I can’t logout after I leave a comment…It also gives me a wordpress username…is this right? Only way to logout is if I click on my name instead of the logout button…confused…any help would be greatly appreciated!

Maybe I’m missing something….

by Ed Muntz on March 22, 2010 at 10:25 am. #

sorry here is my site

http://www.wolverinesocceracademy.com/?p=1173

by Ed Muntz on March 22, 2010 at 10:27 am. #

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

by HOW TO: Integrate Facebook With Your Blog | Top Web Hosts Review Best Web Hosting 2010 on March 22, 2010 at 4:12 pm. #

I have this problem.. at the top of my pages now, it displays this

dir=”ltr” lang=”en-US” xmlns:fb=”http://www.facebook.com/2008/fbml”

I have put the exactly where you showed, in the right place.

by Candy Cook on March 25, 2010 at 8:49 am. #

Put the language attributes call exactly where you showed, that is.

by Candy Cook on March 25, 2010 at 8:50 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 | Top Web Hosts Review Best Web Hosting 2010 on March 25, 2010 at 2:27 pm. #

Leave your comment

Required.

Required. Not published.

If you have one.