Another new thing in SFC 1.0 is the new Login and Registration mechanism. The login mechanism in the older SFC worked, but it was slightly buggy and didn’t work very well. The new mechanism works quite well indeed.

Login screen with Facebook popup

For starters, it will auto-connect existing accounts to Facebook, based on matching email addresses. Just Login with your FB credentials, and if you’re using the same email in both sites, then it auto logs you in based on that. Your account gets automatically connected to your Facebook Profile, and this appears in the “Howdy” dropdown as well as on your Profile.

Howdy dropdown

This may seem insecure to some, however the mechanism behind the scenes is that Facebook sets a cookie in your browser, and cryptographically signs it. Your Application Secret is the key used to decode this signature, thus proving it came from your Facebook application, and eliminating the risk of having users log in without your valid credentials.

However, this does point out something everybody should know: Secrets are supposed to be secret. So keep your Facebook Application Secret a real secret. This applies anytime you’re setting up interconnected web applications. Secrets are called that for a reason.

Registration Flow

In order to integrate Login and Registration using Facebook, Facebook came up with what is essentially a flow diagram explaining the steps an app should use to login and register somebody to a third party site.

Facebook's rather complex registration flow diagram

This rather complex looking flowchart shows how a site which has its own login and registration mechanism can implenent Facebook. I’ve followed this chart as best as possible, and thanks to FB’s Registration plugin, it works quite well now. Here’s how it breaks down.

For existing users:

  1. You click the Login button.
  2. You login to Facebook if needed.
  3. If your email on Facebook matches your email in WordPress, you’re logged in and your account is automatically connected.
  4. If your email doesn’t match, then you can log in normally with WordPress instead, and connect your account manually, on the Users->Your Profile screen.

For new users:

  1. You click the Login button.
  2. You login to Facebook if needed.
  3. If no account can be found for you from the login process, you get redirected to the Register page.
  4. There the Facebook register plugin shows up and lets you register for the WordPress site, using your Facebook credentials. All it asks for is a username and to solve a CAPTCHA (to prevent spam registrations).
  5. You get a new WordPress account, already connected to Facebook for you. It even emails you a password.

Registration screen

Some have expressed concern that Facebook seems required for registration. This is not actually the case, because after all, not everybody uses Facebook. One of the nice things about the FB Register plugin is that it has different methods for Facebook connected users vs. non-Facebook connected users. Both types of users can register for the site. Facebook users get some advantages like having their account automatically connected and not having to type in an email address, but the basic process is the same.

For new users not using Facebook:

  1. You click the Register link.
  2. The Facebook register plugin shows up and lets you register for the WordPress site. It will ask for a username and your email address, as per the normal registration process. It does have the CAPTCHA too, and tells you that you can login using Facebook as well, if you want.
  3. You get a new WordPress account, and it emails you a password.

Registration screen

And after logging in and having it recognize you, the user will be automatically connected to their account on their Profile page.

Facebook Connection shown on the Profile Page

If you want to try the new version now, I’ve finally moved it into the normal “trunk” directory on the repository at WordPress.org, so you can download the ZIP file of the plugin here:
http://downloads.wordpress.org/plugin/simple-facebook-connect.zip

Release date: soon. Real soon now. :)

Shortlink:

20 Comments

  1. I cant make this plugin to work on our site.

  2. Hey Otto,

    This seems to be the most elegant integration of the Facebook (login) API that I have seen to date.

    I’m working on a “web app” based on WP, and I haven’t succeeded in allowing my user to login without having to open the auth screen in a new window. Is there a way that your plugin can authenticate login through a self-hosted page or supress the pop-up in some other way?

  3. Hey Otto,

    First off great plugin, been playing around with it, I actually like it better with everything under one plugin.

    One problem I’m having though is that the First Name and Last Name fields are not being populated on my WordPress users area. Is that intentional or is it supposed to?

    Thanks in advance.

  4. Hi Otto

    First of all, thank you this great plugin. I was exactly searching for this. I had it up on my site a while ago, and some quick point I would like to clarify:

    A new visitor who intends to comment a post will initially have the option (checkbox) of posting comments onto Facebook, but after having registered and logged on, he now faces no such option. How do I resolve this?

    Also (I have mentioned to you on twitter earlier), I would like to know if there’s any way I could simplify the registration process – A user account will automatically be created when a visitor signs in via his Facebook account and also retain the option of posting the content of his comments onto Facebook?

    Cheers
    Alex

  5. Hello Otto,
    I love your plugin and find it so helpful, but I can’t find a way to integrate the login and registration with front-end and make custom screens for them !!! could you help me ?

  6. Hi Otto,

    First of all, great work! I’ve been waiting for a user friendly plugin to connect by blog with Facebook for quite a while and must say yours is the best I’ve seen out there. So far everything seems to be working perfectly, however the only issue I am having is that when the comments from my Facebook page are imported to the WordPress page, it doesn’t seem to update the comment count. When I look at a post it will show that there are no comments, however when I click to leave a comment, the comments from Facebook are there.

    Any thoughts?

    Thanks, Bryan

    By the way, I am using WordPress version 3.2.1. The theme is Atahualpa version 3.4.9.

    • That’s intentional. The comment count is only updated on the same page where the comments are actually displayed. This is because it’s too much work to have it go check Facebook’s comments for every post on a multi-post page. If you’re displaying 10 posts, that would be 20 different hits to Facebook, which is slow enough as is. Furthermore, since the comments aren’t even being displayed, they’d be rather pointless hits to boot.

      So I made the decision to not update the comment count except on pages where the comments are actually being displayed, for speed.

  7. Hello Otto!
    This plugin is great. But could be the perfect if you add these enhancements:
    1. Auto Login: Possible if someone has already connected your account with facebook. If you are logged into Facebook and open the page (WordPress CMS) automatically logs on the page. Have full support BuddyPress.
    2. The registration system is also applied in SFC user registration BuddyPress.
    3. Widget login with Facebook.
    4. For now, no more suggestions.
    Good work and Thank You.

  8. Hi Otto,

    Just reading over this, hoping that I understand what’s happening.

    You have the breakdown as follows:

    For existing users:

    You click the Login button.
    You login to Facebook if needed.
    If your email on Facebook matches your email in WordPress, you’re logged in and your account is automatically connected.
    If your email doesn’t match, then you can log in normally with WordPress instead, and connect your account manually, on the Users->Your Profile screen.

    For new users:

    You click the Login button.
    You login to Facebook if needed.
    If no account can be found for you from the login process, you get redirected to the Register page.
    There the Facebook register plugin shows up and lets you register for the WordPress site, using your Facebook credentials. All it asks for is a username and to solve a CAPTCHA (to prevent spam registrations).
    You get a new WordPress account, already connected to Facebook for you. It even emails you a password.

    I’m working locally at the moment. I clicked the “login” button, logged into my account and WordPress automatically created a new account for me with the username of my Facebook UID. I was not taken to a registration page. Personally, this makes way more sense to me, but it doesn’t appear to be following that break down.

    My other question was how difficult would it be to have the login button somewhere in my header, and have the user redirected to the page they are looking at when they login via that button?

    Thank you,

    –d

    • Aha! “Anyone Can Register” must be turned on to get the registration screen! That solves my first issue. Otherwise using login will just automatically create an account. Might be a nice way to do things if you only want users to register for your site using their Facebook accounts!

      –d

      • Sorry, but no, that’s not how it works at all. If “Anyone can register” is disabled, then the registration just doesn’t work at all, period. SFC cannot create accounts using a one-click method, under any circumstances. It can’t auto-create an account using your Facebook UID as the username.

        Are you use you’re using SFC and not some other Facebook plugin? Because SFC doesn’t have the code to do anything you’re describing.

        Also, SFC doesn’t “work locally”, so you can’t be using it on a local test environment to begin with.

        • Hmmm… weird, it definitely created an account… used my Facebook UID as the username… I’ll try to duplicate. I’m also working locally and I’m getting absolutely zero errors for doing so… but I am sure I am using SFC…

          I’m actually working on trying to create a login button that can be put somewhere into the site (sidebar, header, wherever). If I manage to get it working, is there any way I can send you the code to maybe get it added into the SFC plugin?

          Also, I notice your JS initialization of the FB object isn’t using “oath: true”, it’s my understanding that this will be required soon, should this be updated?

          Thanks for the response!

          • It can’t create an account. Not by itself, not automatically. And if the anyone can register is disabled, then the whole sfc-register.php file aborts out right at the top; none of that code loads. If you had this account already, and the emails matched, then it would have connected the existing account. I think that must be what happened.

            SFC doesn’t “create accounts” of any kind, period. Even the register plugin doesn’t create accounts. It just hooks in to the built in WP code, which creates the account through the normal process. SFC doesn’t add users, it lets the core code add the users, then it hooks them up to FB accounts.

            And there’s a bit more to oauth 2 support than just that. However, the trunk version of the code has that oauth support mostly working.

            • Pardon my mistake… I had the account created previously… that’s what it was finding and linking up to (usermeta was fbuid, which is why it was finding the user so easily).

              Still trying to get the login button to work anywhere on the site… Currently I can get the user to the registration screen, and it’s registering them, but then is re-loading the registration screen where I would like them to go to their account or the homepage or something. I’ll figure it out, and if you have time, I’d love your opinion on what I’ve done!

              Thanks!

              –d

  9. I use a theme with a custom login-design. Is there at function to add to get the F-login, as the like buttons sfc_like_function ()?

  10. Hi, I’m trying to use the plugin, but I’m stuck, because I can’t find any widget with the login/register, should this come with the plugin? I already enabled login a register in SFC, and enabled anyone can register on wordpress. Everything seems ok, I just can get the widget with the login/register.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Need to post PHP code? Wrap it in [php] and [/php] tags.