18 December, 2008

The Horrors of Installing Facebook Connect


Although it’s been a number of weeks since I integrated Google’s Friend Connect on EricHerboso.com, I never bothered to write about it because it was by far the easiest install EVER.  Installing it literally consisted of going to Google’s web site, hitting a few buttons, typing in a few characters, and then it was over.  Google made things super easy.

Installing Facebook Connect, on the other hand, has been an immense pain.  Every step I took in getting it to work has been a step lined in tears of sweat.  Everything that could possibly go wrong has in fact gone wrong, and it was the most irritating install ever.  Horrifyingly, on my second attempt, I even followed an inane video entitled “Add Facebook Connect to your blog in 8 minutes!“.  And while following their directions were not hard, it took more like 45 minutes, and at the end of it, it didn’t work at all.  Which is severely fucked up, since the video was literally posted only three days earlier.  (The sticking point was their usage of uid=’loggedinuser’ — it turns out that ‘loggedinuser’ cannot be called by uid through xfbml.  Which makes the entire video pointless.)


I also tried a custom installation by modifying some code I found at a spanish-only site.  It was a terrible mess by the time I got through with it, and has since been removed completely.  (I don’t speak spanish.)
But today, during my lunch hour at work (okay, I used 1.75 hours), I finally got facebook connect to work on my WordPress install.  And it’s all thanks to some helpful code supplied by Adam Hupp.  You can see a partial documentation of it on the facebook developer’s wiki.  (I’ve already edited a few bits in the Q&A session and plan on fleshing out the article a bit more later on to clarify some of the more complicated parts used to customize how facebook connects to wordpress.)

Anyway, thanks to Adam Hupp, it’s now a pretty seamless installation procedure.  Just follow the directions at http://wiki.developers.facebook.com/index.php?title=WP-FBConnect if you want to add it to your own wordpress installation and you’ll see what I mean.

So please try out the new system.  If you’re already logged in on my blog, log yourself out and come back to this page.  You should see a ‘log in with facebook’ button right above the comment section.  You can log in that way, or, alternatively, if you’re already logged in to facebook, you should see a box in the top right of your screen that asks you if you want to log in with facebook.  Either login method should get you set up, and then all you have to do is enter in a comment and it should connect directly to your facebook account.

However, there a few caveats.

First, it breaks in IE.  After numerous investigations, I’ve come to find out that this is an issue on facebook’s end, and not an issue with the code I currently have on my site.  Facebook connect does not currently work in IE no matter how you try to make it work.  I think this is an xfbml issue, though I may be wrong.

Second, it’s fussy in firefox.  It doesn’t seem to like the way the code is being executed.  Sometimes it works right away, and sometimes it logs meout unexpectedly for no apparent reason.  I can’t seem to find the error here, even though I’ve combed through everything.  If you’re using firefox, and it won’t let you login, try refreshing the page.  It should work then.

These browser issues aside, it works perfectly in Chrome / Safari.  So if you really want to see it work seamlessly, I suggest opening this page in one of those browsers.  I know that’s a terrible way of getting code to work, but it’ll have to do for now.  I’ll let someone else do the legwork on figuring out what’s causing the firefox issue and get it fixed as soon as I see the corrected code posted online.

Anyway, please leave a comment and help me test to see if this works.  Oh, and let me know what browser you used to post the comment with, too.

Be well.

13 comments:

  1. Hey Eric, your IE problems occur because the html tag is missing an xmlns:fb declaration. This should be added by default by the languages_attributes Wordpress filter. Make sure that appears in your header.php file. Mine looks like this:

    <html xmlns=”http://www.w3.org/1999/xhtml” >

    I’ll update the wiki with this info.

    ReplyDelete
    Replies
    1. Sorry, that got mangled. Take a look at the html tag declaration in the default theme here:

      http://trac.wordpress.org/browser/trunk/wp-content/themes/default/header.php

      Delete
    2. Thanks for the code help, Adam! Now the facebook connect integration works perfectly in IE. You’re a godsend!

      Delete
  2. Great article Eric, I have the same firefox issues though with the other facebook connect WP plugin from the developers wiki. I found your post in a search for a solution. I’ve tried to install the plugin you are using several times but can not get it to install for the life of me. I copied the plugin files and put them into a directory which I uploaded to my site. Do you know of a place where I could download a zipped version of that plugin?

    ReplyDelete
    Replies
    1. Norm, I don’t use Subversion either, so applied the plugin in the same way that you’re trying to and have had success. Make sure that everything in the folder you’re uploading is in exactly the same place as on the subversion site, and that everything still has the same file extension.

      Also that you’re putting it in the plugin directory of your site.

      Eric, thanks for this post, it helped me quite a bit! Did you find a way round the Firefox problems? Everytime I try to log in using Firefox on my site (www.simonkmiller.com) I’m signed out almost immediately.

      Delete
    2. Norm: Simon’s advice is actually the method I used to grab those files. Just save every file you see in /wp-fbconnect/ and make double sure that the extension for each one is correct. When I right-clicked and chose ’save as…’ for fbconnect.js, my computer’s default was to save it as fbconnect.txt. You’ll need to manually correct this. And ensure that every folder is created exactly as it appears at http://svn.facebook.com/svnroot/platform/plugins/wp-fbconnect/.

      Simon: I can’t seem to get rid of the firefox problems, either. But in my experience, the error goes away if you just refresh the page once after you’ve signed in with facebook. This makes it especially frustrating. I’m thinking that a possible particularly janky fix for this would be to add in a js call to refresh the page after you finish signing in. But I don’t know. Seems like an extreme method of fixing it. More on this later.

      Delete
    3. I tried copying it about three times, double checking over and over and also used the svn command in terminal to copy the directory to my computer. Each time I try to activate the plugin I get this error:
      Parse error: parse error, unexpected T_OBJECT_OPERATOR in /home/content/n/o/r/nora/html/wp-content/plugins/wp-fbconnect/fbconnect.php on line 38

      Delete
    4. Norm: I could be wrong, but I think this might be because you aren’t using PHP 5. Are you using PHP 4 or 5?

      Adam’s plugin requires php 5 to work correctly.

      Delete
    5. Yep, that’s the issue, upgraded to 5 and it installed just fine. I appreciate your help. One more question. As an existing user on my blog, how do do I link my facebook account to my wordpress account? If I am logged in the connect button does not appear (a known issue) but if I click it when not logged in a new user is created in my wordpress instead of linking to my admin account. How did you deal with this?

      Delete
    6. I don’t see an easy way of addressing the problem you’re talking about. Basically how I’ve dealt with this is to just have two accounts: my admin account and my facebook account. I suppose you could grant your facebook account posting privileges if you really wanted to make it the main account, but that’s too drastic a step for me.

      Delete
  3. Eric can I be cheeky and ask another question please? How did you get the Facebook avatars to display? i can’t work out how to make that happen. Cheers!

    ReplyDelete
  4. I agree it is really a pain

    ReplyDelete
  5. facebook connect seem to be in a friendly relationship with Murphy xD
    i’m still stuck with button issue in IE for a few days now :(

    ReplyDelete