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 ResumeDonkey.com, 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 ResumeDonkey.com.

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 http://www.domain.com here, and someone accesses your site as http://domain.com, 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='http://test.domain.com'>My Blog Name</a>", "post":"<a href='http://test.domain.com/post-url/'>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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" <?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>
</div>

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="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" 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; }
</style>

<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>" +
"</span></span>");
}

// Refresh the DOM
FB.XFBML.Host.parseDomTree();
}

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+'@facebook.com'); // Can't get a real one from FB unfortunately. This saves their user id @facebook.com
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();
exdate.setDate(exdate.getDate()+expiredays);
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;
c_end=document.cookie.indexOf(";",c_start);
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");
FB.Connect.ifUserConnected(update_user_details);
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);
}
</script>

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 “user@facebook.com” (their API doesn’t allow you to actually get it, to avoid spam I assume).

Enjoy.

  1. Resume Donkey Integrates Facebook Connect : Resume Donkey

  3. A Tiny City » It’s a Blue Christmas at ATC

  4. Beau Lebens said:

    Hey Logan – good catch. This should be fixed now, if you just update the JavaScript in your page (the last block of code above) then you should be good to go. Cheers.

      • Beau Lebens said:

        With the modified version of the code (above) the user's FB user ID is saved as part of a psuedo-email address. Part of the aim of that was to allow you to output some XFBML that would show their profile-pic. I haven't done it yet, but it should be possible.

        • J. Hai said:

          Could you explain in a little more detail how this could be done? Does it involve modifying this:
          "<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>"
          –where the id of the user who posted the comment is used in place of 'loggedinuser'? If so, what should be used to call up the correct uid? Sorry if my terminology is off; I'm not a PHP developer, just trying to hack something together. Thanks!

          • Beau Lebens said:

            While I haven't actually implemented this anywhere or tried it, yes, that was my theory/plan. The user ID is stored as the "username" component of the email address stored for the comment, so it should be trivial to get that back, and use it as the uid in the <fb:profile-pic> tag. You'd need to look at some of the WordPress-specific functions to see how to get the email address of a comment author, and then get just the uid part from that. If I get a chance I'll post an update with more details.

  5. RLB said:

    Beau, everything looks to work, but when submitted WordPress throws this error: "Error: please fill the required fields (name, email)." How do I get around this with a facebook comment?

    • RLB said:

      Nevermind, I had another form on the page, which the name and e-mail was being dumped in too.

  6. powersitedesign said:

    Do you have this running somewhere I am not seeing? Sorry, I glanced around on the page looking for a connect icon or something? I had to use my intensedebate account. Just curious, really interested in taking a look at what you put together. Thanks,

    • powersitedesign said:

      Very Nice! I really like how smoothly it worked, and not to mention the convenience of having it under the post. Do you also have a way to incorporate it in the sidebar as a widget w/ your solution? Just curios. Thanks, and great job!

      • Beau Lebens said:

        Well I haven't needed to do that, but it shouldn't be too hard to duplicate most of the code above into the sidebar somewhere. Doing it as a true widget would require creating a WP plugin though, which was actually something I was trying to avoid, since it seemed like overkill for this.

  8. Cotton Rohrscheib - Blog Archive » Beau Lebens Facebook Connect

  9. Sean said:

    So when I go into create the one line story template, I copy and paste your exact code, then I get the following error:
    Supplied template data does not cover the following tokens [blog, post] needed for template '{*actor*} commented on the {*blog*} post {*post*}.'

    Any ideas?

  10. Rebecca said:

    Hi,

    I'm really hoping that you can help me. I've spent several hours now trying to make this work. First, I tried to add the code from the FB Wiki and got the following message – –

    Invalid Argument
    The Facebook Connect cross-domain receiver URL (http://modite.com/blog/2008/11/20/careers-are-lik…must have the application's callback url (http://www.modite.com/blog)as a prefix. You can configure the callback url in the application's settings

    Then I took all that code out and tried to follow your instructions. It seemed to work and I logged into FB and hit connect and nothing happened. Now when I go to the comments section and try to click on the FB Connect icon nothing happens.

    I'm not super savvy, but I think I'm doing everything right… I'm trying to get this implemented by Monday and any advice/input you have would be great.

    Thanks so much!

  11. Rebecca said:

    Awesome! That worked. But now when I'm connected with Facebook, my comment box disappears along with the name/email/website box. Any ideas?

    Thanks!

  12. Beau Lebens said:

    That's because of where you've put the comment-user-details DIV. Everything inside that DIV will disappear/be hidden, so you only want it wrapped around the fb:login-button and the fields that the user would otherwise fill in (name/email/url). Also make sure it's not outside the FORM tag as that could prevent comments from being submitted properly.

  13. Rebecca said:

    Haha, each time I get a little bit closer but then something else comes up. So, I changed the DIV tags and that made the Name/Email/Website box disappear and the FB logged in user appear. Very cool. Except now when I try to type in a comment as a FB user, and click submit, a WordPress page comes up and says –

    Error: please fill the required fields (name, email).

  14. Beau Lebens said:

    Logan (and Rebecca) – I believe the problem you're seeing is because of duplicate IDs within your document. The Javascript code that handles the FB Connect comments has to grab some details and update the hidden comment form right before it's submitted so that WordPress can get the details it needs. It does that based on the ID of the form fields (<input name="something" id="something">).

    In your cases, you have other elements/tags on the page that have the same ID has these form fields (name, url, email) and so when the JS tries to update them, it fails, and so WP complains that those values weren't filled out properly. Technically, it's invalid markup to have more than one element on a page with the same ID, so you should locate and rename the other ones, and that should fix the problem.

    Hope that works – good luck!

    • Patrick said:

      Hi there! I am almost there as well, but am having the same issue as Logan and Rebecca. And I have checked for duplicate tag IDs on the page…nothing. Any other potential causes of this error?

          • Rebecca said:

            Actually, that totally worked for me in Firefox, but when I tried it in IE a pop up box says:

            "Internet Explorer cannot open the site
            http://modite.com/blog/2009/01/07/why-generation-…

            Operation Aborted"

            The comment does still post, but the user is directed back to a "Internet Explorer cannot display the webpage" page after clikcing ok. Any ideas why this would be different in IE?

            A box pops up briefly in Firefox too when submitting a comment but goes away right away and doesn't interfere.

  15. Designer&Developer » Five Easy Steps to Integrate Facebook Connect with your Blog

  16. Ace said:

    i did exactly as u said. but when i enter my facebook detais, i get this error

    XML-RPC server accepts POST requests only.

    what should I do?

    • Beau Lebens said:

      I don't know I'm afraid Ace. I haven't seen that error before. Are you able to take a screenshot of it perhaps (including the entire screen so I can see the URL you're viewing)?

      • Ace said:

        hey, got it to work with Firefox n chrome.
        but, IE 6 and 7 gives me error. screenshot link below. (the error comes when i submit my comment when logged in with facebook profile)
        http://media.share.ovi.com/m1/original/0600/b44d8…

        and, i cant seem to get the facebook profile picture to come next to the comment, rather a gravatar shows up. how to fix this.

        thnx..
        site: s60blog.com

        • Beau Lebens said:

          It seems like the Internet Explorer bug/problem is probably related to this bug: http://blogs.msdn.com/ie/archive/2008/04/23/what-…

          If that's the case, then it sounds like the fix is to move the JavaScript so that it doesn't appear within the element it's attempting to modify. It's hard to debug exactly what's going on in your blog because you have the other FBConnect plugin enabled. On a guess, I'd say be sure that you DON'T put the JavaScript code INSIDE the id="comment-user-details" DIV. It needs to appear after that DIV (specifically, after the </div> tag).

          As a side note, I saw that you have 2 xmlns:fb attributes on your HTML tag. You should remove one of them. I think it's probably coming from the plugin you have installed.

          Showing the profile picture against a comment was discussed in a previous thread (http://beaulebens.com/2008/12/implementing-…but requires some PHP coding and theme modification. I haven't put together a code snippet to show how to do this, so it's "an exercise for the reader" as they say.

          Hope that helps.

          • Ace said:

            Yes, thats the error in IE 6 and IE 7.
            I have tweaked the sociable fb community plugin now, but it too gives me the same problem with ie7 n 7. and im pretty sure it happens only after u submit ur comment when logged in with your facebook credentials and surprisingly the comment is posted but the page gets aborted. what i feel is that the publish this comment to facebook profile may be causing an issue, but i can't seem to turn it off…
            if you can think of a quick solution then please help me.
            now ill go and give it a try in windows 7 ie 8 beta.
            thnx

          • Beau Lebens said:

            At the very least, you’re missing the Facebook XML Namespace (xmlns:fb) from your html tag. Please check over the instructions again just to check you got each step done.

  18. Morgan said:

    Thanks Beau – the implementation is really slick and well done. I really like it a lot and the extra exposure via Facebook is a big plus. You rocked it!

  19. beaulebens said:

    Glad to help out Morgan, and it was a bit of a learning experience as well. There's a few hoops to jump through, but I can see most of it is security/scaling related, so makes sense. I think the way we've done it makes a lot of sense for blogs in particular – it stays out of the way except for the place where it's actually useful 🙂

  20. beaulebens said:

    Hmmm I can't think of any reason why 2.7 would be an issue since it's all client-side. Are you testing "live"? If the URL you're testing from doesn't match your FB App config then it might not show up.

    I'll check it on 2.7 and post back here later today or tomorrow.

  21. beaulebens said:

    Unfortunately WordPress is mangling the code that I paste into the post so you're getting code snippets that are incorrect. Sorry everyone. I'm working on how to fix it; hopefully have a solution in place tomorrow.

  23. beaulebens said:

    Wow. Finally (!!!) I got the code to post cleanly in this entry, and have confirmed that if you just follow along and copy-paste things as you go, this should work on another blog (including 2.7, which is what I tested it on).

  25. Logan Leger said:

    Beau, I found a problem with the script today–at least for me. It seems that the JS is putting in the dummy email address even for legitimate commenters who aren't using Facebook Connect.

  26. RLB said:

    Thanks for posting this — it's exactly what I needed for a WordPress blog. Problem is the button won't show, I've checked my code a thousand times — it's exactly how you posted it 🙂

    Do you think maybe this code you posted doesn't work for WordPress 2.7?

    • beaulebens said:

      Hmmm I can't think of any reason why 2.7 would be an issue since it's
      all client-side. Are you testing “live”? If the URL you're testing
      from doesn't match your FB App config then it might not show up.

      I'll check it on 2.7 and post back here later today or tomorrow.

  27. Logan Leger said:

    Beau, I've also tried the code above, but I can't seem to get it working. As RLB, the button isn't showing up in my WP 2.7 blog.

  28. c love said:

    This is great and I love it's implementation – I just need to do some styling once the user is logged in.

    Anyway, do you think you'd ever have a version with the community features – like sociable's? I've tried to put theirs on my blog, but it's not functioning like I want it to. (I don't like how it's connected to the commenting by a check box – your method is much more slick – Also, I don't like how the widget thumbnail stays linked to your 'original' FB created WP profile – if you edit a profile it doesn't update the original imported one – however the widget still links to the original)

    So yeah, I think it would be cool to have the community features with a login button as well as one by the comment fields.

    And once logged in – you'd see the same comment box you have going now and the community 'widget' with options to invite your friends, logout and view WP profiles.

    I don't know. What are your thoughts?

    • Beau Lebens said:

      This was really intended as a lightweight, comments-only solution. To do anything like what you're talking about requires building a plugin and changing the direction of this solution significantly, so no, I probably won't be doing that 🙂

      I'll leave that to people who are using it and seeing benefit from having FB Connect on their site!

  29. c love said:

    I totally understand. I just thought I'd ask. FB has really nailed the user case for the option to forgo the whole 3rd party community aspect and your option is a great example of that. To be honest, I'm not sure how I really feel about the community to begin with…

    I do think it would be cool if FB allowed users to maintain a FB Connect (external – if you will) specific profile, which would allow the user to control what is displayed on WP blogs and elsewhere. Lots of people are hesitant to toss their name around, but that opens up a whole slew of questions I don't want to really bring up!

    Thanks again for the reply

  30. Jeff said:

    Awesome. It works for me in Firefox and Chrome.. but not in IE. The 'Connect with Facebook' button doesn't show in IE for me. Thoughts?
    Also… I don't suppose you could easily modify this to also publish to facebook when you create a story too?
    Nice job!

  33. Beau Lebens said:

    Hi Brandon – that was discussed in the comments here: http://beaulebens.com/2008/12/implementing-…

    Basically you'll need to modify your theme to conditionally check and see if the email address is something like 12345@facebook.com, and then output a FBML tag something like (not tested, and will depend on how your theme works);

    <?php
    echo "<fb:profile-pic uid='" . str_replace('@facebook.com', '', $comment->comment_author_email) . "' facebook-logo='true'></fb:profile-pic>";
    ?>

    In WP 2.7 the commenting system changed though, so depending on how your theme works now, a plugin with a filter would be required.

  34. SDQ said:

    How can i get facebook profile picture next to the name, everything is working great with me, only the profile picture issue does not appear in the avatar, any idea how to get it done?!

  35. brian said:

    hi,

    i got your solution to work more or less, but it's acting really strangely. after logging in to facebook and after posting a comment, the original sign in fields show up again but with my facebook info in them. if i click the fb connect button again, the fields disappear again and my facebook avatar shows up again how it's supposed to. and if i go to another post, it's the same thing with the wordpress fields showing up with my facebook information filled in.

    also, it's not until i visit another page and then revisit the page i commented on that i get the popup that asks me whether or not i want to publish the comment in my newsfeed.

    any advice ?

    thanks a lot,
    brian

  36. brian said:

    hi,

    i got your solution to work more or less, but it's acting really strangely. after logging in to facebook and after posting a comment, the original sign in fields show up again but with my facebook info in them. if i click the fb connect button again, the fields disappear again and my facebook avatar shows up again how it's supposed to. and if i go to another post, it's the same thing with the wordpress fields showing up with my facebook information filled in.

    also, it's not until i visit another page and then revisit the page i commented on that i get the popup that asks me whether or not i want to publish the comment in my newsfeed.

    any advice ?

    thanks a lot,
    brian

  37. Yusuf Motiwala said:

    Great work. I got it working on my blog instantly.

    Just wondering, any simple solution if I have multiple domains pointing to the same blog. Currently FB expects that FB callback URL has to be on same domain and I have to register multiple (duplicate) applications with FB in order to make it working.

    Thanks
    Yusuf

  38. Beau Lebens said:

    Well for SEO purposes, you should ideally never have multiple domains pointing to the same location like that (avoid duplicate content), but if you do, then you could perhaps set up an array of your FB application IDs, then output the correct one based on the value of $_SERVER['HTTP_HOST'] (in PHP). You'd still need to register each possible domain with Facebook though, I don't think there's any way around that.

  40. Beau Lebens said:

    Brian, it sounds like some of the JavaScript isn't being triggered (or isn't working) properly for some reason.

    The part that should handle hiding/showing the detail fields is:

    FB.Connect.ifUserConnected(update_user_details);

    Which tells FB that if you're already connected, then just display your FB info, rather than the normal comment form. The only thing I can think of is that perhaps you need to move the JavaScript code further down within the page? That's a bit of a reach, but I'm afraid I don't know other than that.

  41. Seb2.0 said:

    I have a quick question. Why is it that the JS and CSS won't work when it's placed in the head instead of right on the comments page. Call me old fashioned but I still prefer putting that stuff in my header.

    Thanks

  42. Seb2.0 said:

    I'm not much of a PHP programmer but I wrote function that checks to see if the user is from Facebook and to display their profile pic. If no FB account is detected if then check Gravatar and if nothing is found it just returns false. Please, if there is any way of making it more efficient, please post the modifications:

    function getGravatar() {

    /* $comment->comment_author_email */

    global $post;

    $name = get_comment_author();
    $email = get_comment_author_email();

    $domain = strstr($email, '@');

    /* Check if comment was sent by FB user */
    if ( $domain == "@facebook.com") {
    $fb_id = str_replace('@facebook.com', '', $email);
    $photo_tag = '<fb:profile-pic uid="'.$fb_id.'" facebook-logo="true"></fb:profile-pic>';
    } else {
    /* Check commenter has a Gravatar */
    $hash = md5($email);
    $uri = 'http://www.gravatar.com/avatar/&#039; . $hash . '?d=identicon&r=any&size=50';
    $headers = wp_get_http_headers($uri);

    if (!is_array($headers)) :
    $has_valid_avatar = false;
    elseif (isset($headers["content-disposition"]) ) :
    $photo_tag = '<img src="'.$uri.'" alt="'.$name.'" />';
    else :
    $has_valid_avatar = false;
    endif;
    }

    if ($photo_tag) {
    echo $photo_tag;
    }

    return false;
    }

    • Beau Lebens said:

      Thanks for the code sample Seb, that's something along the lines of how I was expecting to do it. When I get a minute, I'll put together something that hooks into the default get_gravatar() function in WP to optionally load a FB userpic instead.

      Cheers.

  43. Thorsten said:

    This implementation is great. I had to add a fried to my facebook account first otherwise i kept getting errors at the template adding section. Once I did this things worked smoothly. Thanks!

  44. Beau Lebens said:

    Hi Thorsten — that sounds like a weird bug from FB themselves
    perhaps. Curious. If I get a chance, I'm going to drop a PHP function
    on here that will modify get_gravatar() to support Facebook userpics.

  45. jeff-TVQC said:

    great article but ive have the same issue as many Fbconnect work fine with firefox and chrome but the connection button does not appear wit IE 6-7
    my site: tvqc.com

  46. Atanasis said:

    I have a problem. This error has appear in Facebook Connector settings {in Comment templates options} – Fatal error: Cannot use string offset as an array in /home/ikitennt/public_html/TechJump-Project/techjump/wp-content/plugins/fbconnect/fbConnectInterface.php on line 282

  47. Atanasis said:

    Edit: Massage just go away yet, but i have another problem. Facebook button above Comment Form isn't show to me. Have i can to submit my application to directory to work ?

  48. Beau Lebens said:

    It sounds like you've got another Facebook plugin already installed, which will most likely interfere with/break this implementation. This is intended to be used *instead of* a plugin, not *in addition to* a plugin.

  49. Seb2.0 said:

    Does any one know how to change the default language. I implementing the new Comments widget on a French site but it shows up in English. Has internationalization been done yet??

  50. Dave said:

    I've got everything working all all browsers except IE. I've got the right declarations at the top of the page to define xmlns:fb, just can't get the darn button to show up.

    Anyone else have a solution? The usual answer is "add xmlns:fb="http://www.facebook.com/2008/fbml&quot; to your HTML tag and it will magically show up.

    Not workin for me. Firefox, Safari, Chrome – all workin. IE. not a chance.

    Any help is appreciated. Thx.

Comments are closed.