In this article we are going to learn about facebook login using PHP and Javascript SDK. For using PHP SDK you need to check is your server is cURL enabled. PHP SDK will post the information using PHP cURL. We are using the both PHP, Javascript SDK for avoid page redirecting and stay your website user in the same page withour any redirection using popup.
First goto facebook developers account and create and app there. You will get Appid and Secret Key from there. Download the Facebook PHP SDK, from facebbok developers or github extract that save it to your folder.
Design the login page and include the facebook Javascript SDK:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| window.fbAsyncInit = function() { FB.init({ appId : 'XXXXXXXXXXXX', // replace your app id here channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', status : true, cookie : true, xfbml : true });};(function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref);}(document)); |
include the above script in the index page inside <head> tag,
Create Javascript funtion for facebook login:
1
2
3
4
5
6
7
| function FBLogin(){ FB.login(function(response){ if(response.authResponse){ window.location.href = "actions.php?action=fblogin"; } }, {scope: 'email,user_likes'});} |
Design the button for facebook login:
1
| <img src="facebook-connect.png" alt="Fb Connect" title="Login with facebook" onclick="FBLogin();"/> |
The whole index page will be like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <script type="text/javascript">window.fbAsyncInit = function() { FB.init({ appId : 'XXXXXXXXXXX', // replace your app id here channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', status : true, cookie : true, xfbml : true });};(function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref);}(document));function FBLogin(){ FB.login(function(response){ if(response.authResponse){ window.location.href = "actions.php?action=fblogin"; } }, {scope: 'email,user_likes'});}</script><style>body{ font-family:Arial; color:#333; font-size:14px;}</style></head><body><h1>Asif18 tutorial for facebook ling using php, javascript sdk dymaically</h1><img src="facebook-connect.png" alt="Fb Connect" title="Login with facebook" onclick="FBLogin();"/></body></html> |
By the above you will get a page with dynamic facebook login dialogue box. Next we need to save the user details using PHP SDK
Include the facebook.php file in new actions.php file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| include 'facebook.php'; $appid = "XXXXXXXXXX"; $appsecret = "XXXXXXXXXXXXXXXXXX"; $facebook = new Facebook(array( 'appId' => $appid, 'secret' => $appsecret, 'cookie' => TRUE, )); $fbuser = $facebook->getUser(); if ($fbuser) { try { $user_profile = $facebook->api('/me'); } catch (Exception $e) { echo $e->getMessage(); exit(); } $user_fbid = $fbuser; $user_email = $user_profile["email"]; $user_fnmae = $user_profile["first_name"]; /* Save the user details in your db here */ } } |
Create FB logout function for logout the user directly from facebook:
1
2
3
4
5
| function FBLogout(){ FB.logout(function(response) { window.location.href = "index.php"; });} |
Design and view the user details here:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <style>body{ font-family:Arial; color:#333; font-size:14px;}.mytable{ margin:0 auto; width:600px; border:2px dashed #17A3F7;}a{ color:#0C92BE; cursor:pointer;}</style><table class="mytable"><tr> <td colspan="2" align="left"><h2>Hi <?php echo $user_fnmae; ?>,</h2><a onClick="FBLogout();">Logout</a></td></tr><tr> <td><b>Fb id:<?php echo $user_fbid; ?></b></td> <td valign="top" rowspan="2"><img src="<?php echo $user_image; ?>" height="100"/></td></tr><tr> <td><b>Email:<?php echo $user_email; ?></b></td></tr></table> |
Finally the actions.php file will be like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| include 'facebook.php'; $appid = "XXXXXXXXX"; $appsecret = "XXXXXXXXXXXXXXXXXXXXX"; $facebook = new Facebook(array( 'appId' => $appid, 'secret' => $appsecret, 'cookie' => TRUE, )); $fbuser = $facebook->getUser(); if ($fbuser) { try { $user_profile = $facebook->api('/me'); } catch (Exception $e) { echo $e->getMessage(); exit(); } $user_fbid = $fbuser; $user_email = $user_profile["email"]; $user_fnmae = $user_profile["first_name"]; $check_select = mysql_num_rows(mysql_query("SELECT * FROM `fblogin` WHERE email = '$user_email'")); if($check_select > 0){ mysql_query("INSERT INTO `fblogin` (fb_id, name, email, image, postdate) VALUES ('$user_fbid', '$user_fnmae', '$user_email', '$user_image', '$now')"); } } break;}?><!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Asif18 tutorial about facebook login for mywebsite using php sdk</title><script type="text/javascript">window.fbAsyncInit = function() { FB.init({ appId : 'XXXXXXXX', // replace your app id here channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', status : true, cookie : true, xfbml : true });};(function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref);}(document));function FBLogout(){ FB.logout(function(response) { window.location.href = "index.php"; });}</script><style>body{ font-family:Arial; color:#333; font-size:14px;}.mytable{ margin:0 auto; width:600px; border:2px dashed #17A3F7;}a{ color:#0C92BE; cursor:pointer;}</style></head><body><h1>Asif18 tutorial for facebook ling using php, javascript sdk dymaically</h1><h3>here is the user details, for more details </h3><table class="mytable"><tr> <td colspan="2" align="left"><h2>Hi <?php echo $user_fnmae; ?>,</h2><a onClick="FBLogout();">Logout</a></td></tr><tr> <td><b>Fb id:<?php echo $user_fbid; ?></b></td> <td valign="top" rowspan="2"><img src="<?php echo $user_image; ?>" height="100"/></td></tr><tr> <td><b>Email:<?php echo $user_email; ?></b></td></tr></table></body></html> |
Very useful details given by you here, this publish definitely explains important concepts to its guests. Thanks for continuous to create such amazing content...
ReplyDeleteJoomla Developers Bangalore | Joomla Website Development Bangalore