HOWTO: Implement Facebook Connect on WordPress (in reality)

2008-12-23: There were a number of problems with the code samples in this post previously due to some WordPress formatting problems. They are all corrected now, and you should be able to follow through this post and get this working on your own blog quite easily.

2008-12-26: Fixed a bug that caused the JS to overwrite details on a non-FB Connect comment as well. Also changed the fake email address that’s stored to include the user’s FB user ID.

In case you’ve been living under a no-technology-news rock for the last few weeks, you’ll know that Facebook Connect was released recently. I had been seeing/hearing a lot about it, including this video at Mashable, showing how to implement FB Connect in 8 minutes. So when my friend Morgan from BlownMortgage asked me if I’d be able to help him implement it on his new resume-editing site, I figured “how hard could it be” and said yes. Although it definitely didn’t take 8 minutes, I got it done, so I thought I’d post some details on the specific approach I used for

Before I rolled my own solution, I took a good look at a few of the existing WordPress options including:

None of these worked quite how Morgan and I had discussed, so I decided to make my own, lightweight solution. Before editing any actual theme files, there’s some prep-work to be done, so:

  1. Log into Facebook and then go and add the Facebook Developers Application
  2. Click the big button at the top right to Set Up a New Application
  3. Enter a name and agree to the terms (you read them all, right?)
  4. On the next page, enter the base URL of your website in the “Callback URL” field. MAKE SURE you use the correct preference for your website as far as www. or no www. is concerned, and preferably enforce that on your website using a plugin or something. If you enter here, and someone accesses your site as, then your FB Connect integration will break and throw a warning about being on the wrong URL.
  5. You can also set some sexy icons/logos to appear in the News Feed of people who comment on your blog, but I’ll let you handle that.
  6. Get a copy of the “API Key” at the top of this page, you’ll need that later.

OK, now we need to register a “template bundle”, which will be used to post updates to the News Feed of people who comment on your blog.

  1. Go to the list of your Facebook Apps and click on the app we just created on the left
  2. Click “Create Feed Template” in the list of links on the right
  3. Make sure your correct App is selected in the box, then click Next
  4. In the “One Line Template” box, paste this exact text
    {*actor*} commented on the {*blog*} post {*post*}.
  5. In the “Sample Template Data” box, paste this (make sure quote marks are still  quotes and not fancy curly-quotes)
    {"blog":"<a href=''>My Blog Name</a>", "post":"<a href=''>Test Post Title</a>"}
  6. Click Update Preview and make sure that you’re happy with the News Feed format (if not, change the One Line Template string)
  7. Click Next
  8. Now click Skip (and ignore/Okay any errors) until you get to the final page and then click “Register Template Bundle”
  9. It will give you a Template Bundle ID, and you’ll want to get a copy of that, because we’ll need it later as well.

OK. Now you’ve got a registered and configured (roughly) App on Facebook, time to get dirty on your own blog. Create a file in the root of your domain and call it “xd_receiver.htm”, then copy the following code into it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<title>Cross-Domain Receiver Page</title>
<script src="" type="text/javascript"></script>

Add the “fb” XML namespace to the header.php file in your theme. Mine ended up looking like this (in PHP):

<html xmlns="" xmlns:fb="" <?php language_attributes(); ?>>

And also drop in a reference to jQuery if you don’t already use it in your theme. It’s bundled with WordPress so you can reference it like this (anywhere before the call to “wp_head()” in your header.php):

<?php wp_enqueue_script('jquery'); ?>

Then you’ll want to edit comments.php (assuming you’re using a relatively normal theme), and make some changes to add the FB Connect button. Find the part where a user would normally enter their name/email/URL and change it to look something like this:

<div id="comment-user-details">
<fb:login-button length="long" onlogin="update_user_details();"></fb:login-button>

<p style="clear:left;"><strong>Or enter your details below:</strong></p>

<p><label for="name">Name <?php if ($req) echo "(required)"; ?></label><br />
<input type="text" name="author" id="name" value="<?php echo $comment_author; ?>" size="50" tabindex="1" /></p>

<p><label for="email">Email Address <?php if ($req) echo "(required)"; ?></label><br />
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="50" tabindex="2" /></p>

<p><label for="url">Website</label><br />
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="50" tabindex="3" /></p>

Just above this block, you should also find the start of the <form> tag for posting a comment, you want to add the “onsubmit” attribute to it so that it looks something like this:

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform" onsubmit="update_form_values();">

The important parts there are that it’s all wrapped in a DIV or SPAN with id=”comment-user-details” and then obviously the <fb:login-button> stuff. Now further down (I went right down to the bottom of the comments.php file actually), add this code:

<script src="" type="text/javascript"></script>
<style type="text/css">
#fb-user { border: 1px dotted #C0C0C0; padding: 5px; display: block; height: 48px; }
#fb-msg { float:left; }
.fb_profile_pic_rendered { margin-right: 5px; }
a.FB_Link img { float: left; }

<script type="text/javascript">
var fb_connect_user = false;
function update_user_details() {
fb_connect_user = true;
// Show their FB details
if (!jQuery('#fb-user').length) {
jQuery('#comment-user-details').hide().after("<span id='fb-user'>" +
"<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>" +
"<span id='fb-msg'><strong>Hi <fb:name uid='loggedinuser' useyou='false'></fb:name>!</strong><br />You are logged in with your Facebook account. " +
"<a href='#' onclick='FB.Connect.logoutAndRedirect(\"<?php the_permalink() ?>\"); return false;'>Logout</a>" +

// Refresh the DOM

function update_form_values() {
if (fb_connect_user) {
profile = jQuery('#fb-user').find('.FB_ElementReady .FB_Link')[1]['href'];
user_id = profile.substring(profile.indexOf('?id=')+4);
jQuery('#url').val(profile); // FB profile URL
jQuery('#email').val(user_id+''); // Can't get a real one from FB unfortunately. This saves their user id
jQuery('#fb-user').find('.FB_ElementReady .FB_Link').each(function(i){ if (i==1) { jQuery('#name').val(jQuery(this).text()); } }); // Gets their name from the DOM
setCookie('fb_connect', 'yes');

function setCookie(c_name,value,expiredays) {
var exdate=new Date();
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

function getCookie(c_name) {
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1) {
c_start=c_start + c_name.length+1;
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
return "";

FB.init("YOUR-FACEBOOK-API-KEY", "/xd_receiver.htm");
if (getCookie('fb_connect') == 'yes') {
setCookie('fb_connect', null);
FB.Connect.showFeedDialog(YOUR-TEMPLATE-BUNDLE-ID, {'blog':'<a href="<?php bloginfo('home') ?>"><?php addslashes(bloginfo('name')) ?></a>', 'post':'<a href="<?php the_permalink() ?>"><?php addslashes(the_title()) ?></a>'}, null, null, null, FB.RequireConnect.promptConnect);

For those of you paying any attention to what you’re copy-pasting, you would have noticed that there are 2 important things you need to replace in that last block of code. Go back now and replace “YOUR-FACEBOOK-API-KEY” and “YOUR-TEMPLATE-BUNDLE-ID” with the appropriate values from the beginning of this process. YOUR-FACEBOOK-API-KEY should be replaced with the 32-character string from the Facebook App config, and should include double-quotes around it in the code above. The YOUR-TEMPLATE-BUNDLE-ID should not have quotes around it.

Save everything and upload it (if you were working offline). If all has gone well, you should now get a FB Connect button on your comments (you need to log out of WordPress to see it), and when you click it, you should connect to FB, then be able to post a comment.

When a Facebook user comments on your blog now, their name will be loaded from Facebook, their profile URL will be used as their URL, and the email address will be recorded as “” (their API doesn’t allow you to actually get it, to avoid spam I assume).


  1. seb2point0 said:

    Do you have any idea why FB connect only initializes when the JS is after the DIV. I mean it's only JS and jQuery. Why won't it work in the head. Call me old fashioned but I like to keep that stuff in the head.

  2. beaulebens said:

    OK – you're old-fashioned 🙂 Actually it's generally better practiceto put code like that at the end of the page, since it can't reliablyoperate (and manipulate the DOM) until after the page has loadedanyway, so there's no point slowing down your initial page load towait for it loading, then have it sit there doing nothing.I didn't know that the FB code specifically didn't work if you loadedit in the head though, it seems odd that they wouldn't just prevent itfrom triggering anything until the DOM was ready.

  3. Two questions for you, Beau (and thanks for the whole tutorial!)

    1st: I'm receiving the following error message when clicking on the "connect to facebook" button:
    Argumento no válido
    The Facebook Connect cross-domain receiver URL (… must have the application's Connect URL ( as a prefix. You can configure the Connect URL in the Preferencias de la Aplicación.

    What does that means, and how can i fix it?

    2nd: About the code that Seb 2.0 wrote, where would it be placed, in case of using it? Does it actually works? If I'm not mistaken, that looks to be into the functions.php file.. or not?

    Thanks again!

  4. beaulebens said:

    Seb's code would be placed in functions.php and then you need to callit within the loop that outputs each comment, in the location that youwant the icon/picture to appear.

  5. tito said:

    thanks Beau for this great tutorial, I actually got it working my blog, but:
    1. i noticed that the FB profil picture does not appear when users leave comments
    2. The story doesnt get published on facebook, .i.e if i leave a comment, and it is approved by the admin, the comment shows up correctly on the blog but it doesnt get published on myt wall.

    Any help would be greatly appreciated. Thanks

  6. Andrew said:

    Hi, I implemented all your code in my comments.php but I'm getting the following error:
    Error: please fill the required fields (name, email).
    I checked for duplicate IDs and changed my id="author" to id="name" but still gets this error.
    Could you help me with this issue? thanks

  7. Beau Lebens said:

    Hi Vlad, I looked in your code and saw that you have

    <div id=”comment-user-details”>

    which at first glance appears correct, but the quote marks are "smart quotes", so it will not work correctly. You'll want to change the quote marks for normal double-quotes (just type them normally). Hopefully that will fix things.

  8. beaulebens said:

    I get a JavaScript error from the Facebook code, so I never even getthe chance to connect or anything :-/I'm afraid I don't know what's going on there.

  9. Andy said:

    Hi Beau.. I have logged in to my facebook account (via fbconnect) then i made a test comment (it turned out my name is 'test') anything wrong with this?

  10. Odelia said:

    Thanks for the code, I implemented it and it works great, both on FF and on IE. The problems is, on IE only (on FF all looks ok) is that it messes up the css. I'm using the Alpha theme. Any quick solution? Thanks

  11. mehmet said:

    Thanks Beau, i tried all those 3 other plugins and all had some problems.. at last i have FB connect on my blog… just up to all those different comments if you can update post about "how to get avatars from facebook" too… 🙂

  12. Gregory said:

    **SECURITY RISK** When you're using this plugin, anyone can post as anyone- all they need to do is get the users ID from Facebook, and use a bookmarklet or Firebug to fill in the hidden fields. It's not a *huge* deal, since anyone can use any email/username they want if anon comments are enabled anyway- however, if you integrate it in with Facebook avatars, it can add some credibility to fake posts.

  13. Hello Beau.

    I found this tutorial from Google and managed to install it on my blog.
    I have the Facebook Connect button appeared on the blog and when I tried it the comment was written successfully. The problem is, I dont have anything on my Facebook News Feed. Do I have anything wrong on the installation?
    Please take a look on . Thank you.


  14. Tony said:

    Hi Beau,
    I've just implemented Facebook connect to my website, but when I test the form and press submit, wordpress returns me with this error:
    "Error: please fill the required fields (name, email)."
    What's wrong?

  15. Aaqib said:

    Hello Beau,

    That really worked. Great post. I wanted to know that if there is any way to show facebook avatars with blog posts that users make. I have been able to show them with the comments, they post. Is there a way for the blog posts too ?


  16. Yasmin said:

    I love the plugin, works great except for the feed. I can't seem to get it to feed comments into facebook. Error console tells me that
    Error: FB.Connect is undefined

    I have the correct API and feed dialogue #, so I am confused as far as what is wrong.


  17. I have a contol question..
    If you hold and moderate comments on a WP blog, does FB connect override that moderation or are they held in the same way? If they are held, then do they stay off a FB feed until approved?

  18. Tribulations, bafouilles et bricoles du 2009-02-24 « Christophe Milet Lifestream

Comments are closed.