User Signup using Facebook Data
Wall Script
Follow Me:
Wednesday, January 12, 2011

User Signup using Facebook Data

Using facebook registration plug-in users can easily sign up on your website using facebook data. With one simple facebook login the form will be filled with user appropriate data. This plug-in is a simple iframe you can place it anywhere on your webpage. You can also add a custom field if facebook doesn’t have.

User Registration using facebook registration plugin

Download Script     Live Demo

Author
Ravi Tamada
Ravi Tamada
Designer Developer & Freelance
Chennai, INDIA
androidhive.info
1. Creating Facebook App

a) First step is to Create a Facebook App.
b) Give a name for the Application and agree the Terms and Conditions.
c) On the Web Site tab give the values for siteURL and site domain
d) Store the App ID and App Secret.

User Registration using facebook registration plugin

2. Designing the Database

Create a table depending upon the fields we required in the registration process.
CREATE TABLE users
(
uid int(11) PRIMARY KEY AUTO_INCREMENT,
fullname varchar(50),
email varchar(50) UNIQUE,
password varchar(50),
gender varchar(6),
dob varchar(16)
);

3. Designing the Registration Form

a) We are using iframe provided to by facebook to display registration form.
b) You all have to do is just replace client_id and redirect_uri with your Facebook App Id and the redirection url.
c) In this tutorial we are designing a form with name, email, password, gender, date of birth and captcha.

registration.php
<iframe allowtransparency="true" frameborder="no" height="600" scrolling="auto" src="http://www.facebook.com/plugins/registration.php?
client_id=183620578322567&
redirect_uri=http://example.com/store_user_data.php?&
fields=[
{"name":"name"},
{"name":"email"},
{"name":"password"},
{"name":"gender"},
{"name":"birthday"},
{"name":"captcha"}
]"
scrolling="auto"
frameborder="no"
style="border: none;"
width="500"
height="600">
</iframe>

The above iframe will render output like this

User Registration using facebook registration plugin
4. Reading and Storing the Callback Data

store_user_data.php
<?php
define('FACEBOOK_APP_ID', 'your_app_id'); // Place your App Id here
define('FACEBOOK_SECRET', 'your_app_secret'); // Place your App Secret Here

// No need to change the function body
function parse_signed_request($signed_request, $secret)
{
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
// decode the data
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);
if (strtoupper($data['algorithm']) !== 'HMAC-SHA256')
{
error_log('Unknown algorithm. Expected HMAC-SHA256');
return null;
}

// check sig
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig)
{
error_log('Bad Signed JSON signature!');
return null;
}
return $data;
}
function base64_url_decode($input)
{
return base64_decode(strtr($input, '-_', '+/'));
}
if ($_REQUEST)
{
$response = parse_signed_request($_REQUEST['signed_request'],
FACEBOOK_SECRET);

$name = $response["registration"]["name"];
$email = $response["registration"]["email"];
$password = $response["registration"]["password"];
$gender = $response["registration"]["gender"];
$dob = $response["registration"]["birthday"];

// Connecting to database
mysql_connect('DATABASE_HOST', 'YOUR_USERNAME', 'YOUR_PASSWORD');
mysql_select_db('YOUR_DATABASE');

// Inserting into users table
$result = mysql_query("INSERT INTO users (name, email, password, gender, dob) VALUES ('$name', '$email', '$password', '$gender', '$dob')");

if($result){
// User successfully stored
}
else
{
// Error in storing
}
}
else
{
echo '$_REQUEST is empty';
}
?>

Adding a custom field
If you want to request user for additional information that facebook may not have then add a custom field in JSON string.

{"name":"phone", "description":"Phone Number", "type":"text"}

User Registration using facebook registration plugin

123 comments:

  1. cool post.we are gonna to implement Registration Plugin

    ReplyDelete
  2. amazing you can do that my bos...
    awesome3x...\m/

    ReplyDelete
  3. Very nice.... iam amazed with this facebook plugin! Never thought of using user's facebook data in a registration form... cool idea :)

    ReplyDelete
  4. btw we don't need to verify the string's right? like mysql_real_escape_string. Facebook do this for us? :)

    ReplyDelete
  5. how can i verify from my database that for example, Username is taken or e-mail is taken using this plugin?

    Thanks in advance!

    ReplyDelete
  6. it is good post. Nice work Ravi

    @bhargavlalo

    ReplyDelete
  7. i get

    "Can't parse fields attribute. Is it a JSON array or CSV list?"

    can anybody explain?
    thanks

    ReplyDelete
  8. It is not a CSV list. You can print the multidimensional array and see all the fields.

    print_r($response);

    ReplyDelete
  9. What programming language are u using to create this plugin?This is really useful

    ReplyDelete
  10. @Singh: We are not creating any plugins. Facebook is providing the plugin we need to read the data with PHP.

    ReplyDelete
  11. Nice post. Ravi could you tell me if I can change the language of this: "Have a Facebook account? Log in to prefill the form below with your profile information.", I need in Spanish. Thank you.

    ReplyDelete
  12. @Fede : Thank You for asking me a Good Question. Try this link

    http://www.facebook.com/editaccount.php?language

    This is not exactly what you needed but it will help after login.

    ReplyDelete
  13. Thank You Very much u kno m finding this almost 2 days @ last i found, Thank GOD Alhamdhulillah , Thank U

    ReplyDelete
  14. Thanks Ravi, I´m going to study. I´ll publish who I discover.

    ReplyDelete
  15. Ravi, sorry. But this is not the solution.

    ReplyDelete
  16. Ravi i dd everything but i cudnt retrieve the profile picture !! giv me a solution !! i tried as several way but i cudnt !! and while u answer these giv in detail PLEASE, coz m not wel experience on these !!
    Thaxx Again !!

    ReplyDelete
  17. Ravi thank you for this article.

    i get the
    "Can't parse fields attribute. Is it a JSON array or CSV list?"

    you say "You can print the multidimensional array and see all the fields."

    im noobie on this stuff.

    where do i place the "print_r($response);"?

    thank you for help.

    ReplyDelete
  18. yeah the reason for the error is just change inside field double quotation to single quotation then it will alright, thats what I do and now its working perfectly...

    Im waiting for the answer any1 kno that hw to insert the profile picture ??

    ReplyDelete
  19. Thanks for useful code and stepwise information you have given. Keep sharing similar stuff.

    ReplyDelete
  20. Great tutorial... Thanks

    ReplyDelete
  21. This doesn't work. I've tried it several times and there is no data being inserted into the users table. store user data file is accessed and page is just blank. I don't know how any of you are getting this to work and I teach PHP MySQL

    ReplyDelete
  22. With firebug it's easy to change email or any other information in hidden fields...

    ReplyDelete
  23. Doesnt work. Ran twice with old app id, new ones, ran with no changes. Doesnt pass data to the db.

    ReplyDelete
  24. Hi,
    Is it necessary that your Facebook application is approved before performing this whole stuff. Or you can do this just by creating a new app from scratch which is not approved yet........

    ReplyDelete
  25. hi, it's possible to save into database the url of profile photo of facebook?

    ReplyDelete
  26. affter am registaring with my demo i am getting a blank page please chek it out on http://webkoot.tk/test/index.html

    ReplyDelete
  27. is their a way to have custom fields but not force a user to enter anything in them?

    For example i want to include custom field business name but not everyione has a business

    ReplyDelete
  28. @Reply to Above:

    Yes you can but you need Client Side Validation. See the below link

    http://developers.facebook.com/docs/plugins/registration/advanced/

    ReplyDelete
  29. nice post..
    thanks for sahring

    ReplyDelete
  30. hi Ravi

    I was trying with your sample code. am getting the following code.
    http://phpstudents.co.in/testfacebook/index.html

    But i have put my correct client id provided to me by facebook.
    Please help me

    ReplyDelete
  31. Hi Ravi,

    I have followed your code and am getting these errors are you able to help at all?

    Undefined index: signed_request in /var/www/vhosts/ridden.it/httpdocs/fb/store_user_data.php

    which is on like 33 which is this line :

    $response = parse_signed_request($_REQUEST['signed_request'],

    and I am alos getting this :

    Undefined offset: 1 in var/www/vhosts/ridden.it/httpdocs/fb/store_user_data.php

    which is on line 8 which is this line:

    list($encoded_sig, $payload) = explode('.', $signed_request, 2);

    Thanks
    Glynn

    ReplyDelete
  32. Hi Ravi,

    This facebook Registration form script is excellent.

    Thanks,
    Satyram.S

    ReplyDelete
  33. script is running , how can i change the background color of iframe , i dont need white ground ? plz help me out ?

    ReplyDelete
  34. script is running , how can i change the background color of iframe , i dont need white ground ? plz help me out ?

    ReplyDelete
  35. @Saurabh

    Iframe third party not in our control.

    ReplyDelete
  36. Nothing being inserted into the database what could be the error?

    ReplyDelete
  37. What if you have your own reg form and want the url to redirect to it?

    Is it any different to read the JSON?

    How do I prefill the form with the response from fb?

    ReplyDelete
  38. Great Post!

    any idea how to use a tab app as the redirect_uri?

    It will redirect but doesn't have the form data in the signed request...?

    Thanks!

    ReplyDelete
  39. i tryed to register on facebook, but i am seeing in the page was please type your email address at the space made for first name, i don,t why please i need help.

    ReplyDelete
  40. how can i do this tutorial with asp.net ??

    ReplyDelete
  41. Hi Ravi,
    What the best way to redirect users after successful insert into the DB? i am getting "Warning: Cannot modify header information - headers already sent by " error when i try to use
    if($result){
    // User successfully stored
    header('Location: http://www.google.com/');
    }
    Can you help please? I check back on this post.

    ReplyDelete
  42. Is there a way to make it save the passwords in md5?

    Thank you.

    ReplyDelete
  43. How do I read fb user_about_me?? It is coming up empty and I can't figure out why.

    ReplyDelete
  44. Thk for tutor.
    How to get user location?
    $location= $response["registration"]["location"];
    result is array...
    please for respone.
    thk

    ReplyDelete
  45. Thank you sooo sooo very much..had been looking for this from 2 weeks...this one really works great :) :) :) :)

    ReplyDelete
  46. hello..i want to set cookies so that the registered users can be detected after login..please provide the session code for that...

    ReplyDelete
  47. I keep getting this, any ideas? "Can't parse fields attribute. Is it a JSON array or CSV list?"

    ReplyDelete
  48. The form is working for me except there is no data being inserted into the users table. I did not modify anything except ma database connection. Any idea???

    ReplyDelete
  49. To all those who are getting a parse error:

    The script should look like this -
    fields="[
    {'name':'name'},
    {'name':'email'},
    {'name':'password'},
    {'name':'gender'},
    {'name':'birthday'},
    {'name':'captcha}
    ]"

    Take note of the double quotes/single quotes and missing double quotes after the FIELDS attribute declaration


    Hope this helps,
    C

    ReplyDelete
  50. Awesome post work for me 100%.

    Thank a lot

    ReplyDelete
  51. i want to add signup and sigh in both facility in my site.

    how can i add this?

    ReplyDelete
  52. i got this type of error.
    can you please solve my problem?

    error is "Can't parse fields attribute. Is it a JSON array
    or CSV list?"

    ReplyDelete
  53. everyone can read your password in db with this script so besecure...

    ReplyDelete
  54. @Irwan said...
    $location= $response["registration"]["location"]["name"];
    try this hope this works.

    ReplyDelete
  55. tenqyu so much.. :)

    ReplyDelete
  56. hello everyone,
    somebody help me
    where exactly can i Add th following custom field following custom field-
    1.type of model,
    2.height,
    3.weight,
    4.haircolor,
    5. bust size
    6.5 photo uploads,to request user for additional information that facebook may not have,please help me with the script.thank you.

    ReplyDelete
  57. can i test this in localhost??

    ReplyDelete
  58. Can't find the data in the database, whatever I do...
    It does print the Array, but further then that I don't get.

    ReplyDelete
  59. THIS:

    CREATE TABLE users
    (
    uid int(11) PRIMARY KEY AUTO_INCREMENT,
    fullname varchar(50),
    email varchar(50) UNIQUE,
    password varchar(50),
    gender varchar(6),
    dob varchar(16)
    );

    Should Be:
    CREATE TABLE users
    (
    uid int(11) PRIMARY KEY AUTO_INCREMENT,
    name varchar(50),
    email varchar(50) UNIQUE,
    password varchar(50),
    gender varchar(6),
    dob varchar(16)
    );
    ----
    'FULLNAME' SHOULD BE 'NAME'

    ReplyDelete
  60. My database requires city , state - How can I pull these out?
    The registration.php works fine for me.

    ReplyDelete
  61. I'm successfully connecting to the mysql database and printing the array works, but it does not store into my database. I've even tried "inTowns" suggestion above. I feel like i'm sooo close! Any help would be Greatly appreciated. Thank you!

    ReplyDelete
  62. Hello, thank you for sharing this script!! I've got the database to work correctly and everything is working awesome

    However, Can you share how to have the form also send a simple email that is not dynamic? I just want to send a thank you message with a link while also retaining their information in the database.

    Thank you!!

    ReplyDelete
  63. I found an error on functions.php line 15. But everything's awesome! Thanks,

    ReplyDelete
  64. Awesome job!! Just what I needed

    ReplyDelete
  65. How can you add a redirect to the homepage after it's stores the data? Can you add that action to the store_data_user.php?

    ReplyDelete
  66. Update: I got it to work where it just posts the signed requests. It won't add to my database though? any ideas?

    ReplyDelete
  67. Very Good but one question how can i get die Facebook_id to update the photo from fb to my space?

    ReplyDelete
  68. this is a good resource

    ReplyDelete
  69. When i register it directs me to store_user_data.php which is a blank page and neither my data is saved in DB

    ReplyDelete
  70. Awesome Awesome Awesome

    ReplyDelete
  71. Dear All,

    Have any body for help me? When I save my FB application then give me "Error,
    sharp-warrior-9347.herokuapp.com must be derived from your Site URL or your Mobile Web URL." Plz advice me, how can save my application

    ReplyDelete
  72. can you please recheck the code's and if possible upload a zip file with the codes

    i am getting an error

    store_user_data.php?. It may be down for maintenance or configured incorrectly.
    Here are some suggestions:
    Reload this webpage later.
    HTTP Error 500 (Internal Server Error): An unexpected condition was encountered while the server was attempting to fulfill the request.

    ReplyDelete
  73. my data is not stored in database, any one help plz

    ReplyDelete
  74. hi, tank you finaly i find a tutorial that's works!

    ReplyDelete
  75. doesnt work on IE. How can I fix it?

    ReplyDelete
  76. it really helped me
    but i wanna know
    wht is the login process
    suppose i registered the site and put the data in the
    databse the way u told
    but then what actually happens when user login/
    i mean
    tht session and the various things we do in normal procedure?
    and how i restrict the pages if usr is not logged in?

    ReplyDelete
  77. Wow. Thank you, this is exactly what I needed. One oint is that I had to change fullname to name and it worked like a charm. :-)

    ReplyDelete
  78. gud articel


    but when i get it page is blank no data printed on callback url

    ReplyDelete
  79. i'm getting the same error as: hafsa.iwe

    I can see the form, but when i submit, callback page does not exist, and it does not store data in DB.

    Any advice?

    Thx!

    ReplyDelete
  80. how to create it in zend framework

    ReplyDelete
  81. Can i use this in my localhost????

    ReplyDelete
  82. Hi..

    I am in confusion..

    Every article i search for facebook users registration in wordpress, i only find creating a seperate table for it.

    Can i ask a little help from you guys..

    I want to create facebook users to register in my website..

    the new user_id to be created for my wordpress should be the email id of the facebook user.

    Instead of creating new user table, cannot we send the facebook user data to wordpress table wp_users.

    Hoping to get a good response for you guys.

    Thank You
    Ratan Thapa
    mail@ratan.com.np
    www.ratan.com.np

    ReplyDelete
  83. helpful......mind blowing man......

    ReplyDelete
  84. hey man great script but i am just having some issues.. when i submit the registeration form i get a blank next page... nothing is saved in my database table either... what could possibly be the error?

    ReplyDelete
  85. Can i have two dynamic dropdowns as custom fields (so both takes data from db, second depands on first dropdown)?
    Renate

    ReplyDelete
  86. hi,good one but i am stuck in one more issue ,....so can u solve this problem

    problem is I want to prefill the sign up form of the site i created i.e i am getting a form from facebook by doing this but,i want only attributes and all other things should be of my choice( i mean look and feel ,like color,background etc)

    so any idea how to implement this

    ReplyDelete
  87. Can't parse fields attribute. Is it a JSON array or CSV list?

    :-(

    help !!!

    ReplyDelete
  88. Hello, what about how to un-suscribe users from my website using Facebook ? it is possible ?

    As I can notice when a user registers and confirms by facebook registration plugin it seems that, Facebook marks as registered to this user. But how can you unmark this user if he wants to unsuscribe ?

    ReplyDelete
  89. not working dear, as on your site it is not redirecting anywhere. same is happening on my site. Please help

    ReplyDelete
  90. This isnt loading form.
    ERROR:
    "Unable to load the registration form for Frostbox. You may have previously blocked this app on Facebook. Go to your Facebook privacy settings to unblock this app. (Error: That 'redirect_uri' isn't allowed for that client_id.)"

    Please help.

    ReplyDelete
  91. Hi Ravi,

    I'm trying to get the script to work. The registration form looks good, but then I get a 404 error when the form is submitted and the redirect goes to the store_user_date.php. Did I miss something? I'd appreciate any help you could offer.

    Best,
    -Jim

    ReplyDelete
  92. i've follow all the instructions above and only change the database part. but why i cannot direct to user_data_info.php after clicking register?please help.

    ReplyDelete
  93. I get the following error;

    Unable to load the registration form for Skalshop. You may have previously blocked this app on Facebook. Go to your Facebook privacy settings to unblock this app. (Error: Can't parse fields attribute. Is it a JSON array or CSV list?)

    I've created a app, and replaced the appid, somehow as soon as I change/remove the redirect_uri (change from default given by Facebook) it all stops working. What could I be doing wrong?

    ReplyDelete
  94. For complete documentation go to

    https://developers.facebook.com/docs/plugins/registration/

    ReplyDelete
  95. Good plugin very useful i like it. thank you..

    ReplyDelete
  96. can I use store_user_data.php for facebook login and how ? Thank you

    ReplyDelete
  97. I tried this, but get:
    Unable to load the registration form for Sportxast Beta Registration. You may have previously blocked this app on Facebook. Go to your Facebook privacy settings to unblock this app. (Error: Can't parse fields attribute. Is it a JSON array or CSV list?)

    ReplyDelete
  98. oh Also, I think this doesn't work in chrome? It's something other than alert box permission because that doesn't seem to make a difference.

    ReplyDelete
  99. Hello
    This is de first (and only) tutorial which helped me to let the register-system work on my website!
    Good work!

    ReplyDelete
  100. Great tutorial. Can you please a code for authenticating a returning user who registered using facebook

    ReplyDelete
  101. Data not stored in database!
    Please help!!

    ReplyDelete
  102. Why do you need to create an app first of all ?
    I need to use this facebook login for some website..

    What should I do ?

    ReplyDelete
  103. tell me for each registration there is new app to get client ID ??

    i want to make lots of registrtion but how , registrtion.html shows my profile(has app) info ,how i can manage

    ReplyDelete
  104. SOLUTION : !!!!
    This isnt working anymore, go here and copy that code guys:

    http://jsfiddle.net/QwdCv/

    ReplyDelete
  105. i am having a page on facebook for my website
    how could i get details of user via facebook without making any app on fb

    jus need the user to like the page and get their details to my registeration page or directly to the database

    ReplyDelete
  106. hey this is what i was searching from last 80hours thank u so much but i m getting small error. i know this error is so silly to ask but i m naive in php so anyone can help me please.
    Undefined index email,password,gender,birthday in .../store_user_data.php in line 37,38,39,40

    ReplyDelete
  107. I am getting an error that is email password and other things are not defined.. so please anyone can help me out please.

    ReplyDelete
  108. can we check it ..in localhost

    ReplyDelete
  109. I don't know why but this is not working for me. Is there any other alternative?

    ReplyDelete
  110. I got the $_REQUEST is empty

    ReplyDelete
  111. I have made application on facebook developer link still I have not got facebook friend list.

    ReplyDelete
  112. nice script its work very usefull
    Thanks

    ReplyDelete
  113. Hello,
    Script is not working..plz help, nothing come on bro

    ReplyDelete
  114. It's not working for me. I have added client id, app id and secret keys, but there is nothing in iframe. I have also checked demo and its also empty. Please resolve this issue.

    ReplyDelete