{"id":2027,"date":"2016-12-19T19:05:44","date_gmt":"2016-12-19T19:05:44","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2027"},"modified":"2022-11-13T06:37:13","modified_gmt":"2022-11-13T06:37:13","slug":"login-with-facebook-using-javascript-sdk","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/","title":{"rendered":"Login with Facebook using JavaScript SDK"},"content":{"rendered":"<p>Facebook Login is the easiest way to integrate the login system on the website. Facebook Login allows users to log into the web application with their Facebook account without registration on your website. Facebook provides various SDK or API to <b>Login with Facebook<\/b> functionality on the website. But Facebook SDK for JavaScript is the most user-friendly way to integrate Facebook Login on the web page.<\/p>\n<p><b>Facebook JavaScript SDK<\/b> allows the user to sign-in to your website with their Facebook credentials. Using JavaScript SDK, you can implement the user login system with Facebook account on a single page without page refresh. In this example script, we will authenticate the user with Facebook login credentials and fetch the user profile data from Facebook using JavaScript SDK.<\/p>\n<p>Our earlier Facebook API tutorial showed how to <a href=\"http:\/\/www.codexworld.com\/login-with-facebook-using-php\/\">integrate Facebook Login with PHP SDK<\/a> in a web application. In this tutorial, we\u2019ll show you how to implement <b>Login with Facebook using JavaScript<\/b> SDK and store Facebook profile data in the database using jQuery, Ajax, PHP, and MySQL.<\/p>\n<h2>Create Facebook App<\/h2>\n<p>Facebook App ID is required to use JavaScript SDK on the web application. Before getting started to implement Facebook Login with JavaScript API on the website, create an App on <a href=\"https:\/\/developers.facebook.com\/apps\/\" target=\"_blank\" rel=\"noopener noreferrer\">Facebook Developer Dashboard<\/a>.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Are you want a detailed guide to creating Facebook App ID? Follow this step-by-step tutorial \u2013 <a href=\"http:\/\/www.codexworld.com\/create-facebook-app-id-app-secret\/\">How to Create Facebook App, App ID, and App Secret<\/a><\/li>\n<\/ul>\n<h2>Facebook Login with JavaScript<\/h2>\n<p><b>JavScript Code:<\/b><br \/>\nThe following code initializes the JavaScript SDK to integrate the Facebook Login API.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><code>FB.init()<\/code> &#8211; Specify Facebook App ID (appId) and other  SDK configurations.<\/li>\n<li><code>FB.getLoginStatus()<\/code> &#8211; Check whether the user already logged in.<\/li>\n<li><code>fbLogin()<\/code> &#8211; Open a login dialog to login with Facebook account credentials.<\/li>\n<li><code>getFbUserData()<\/code> &#8211; Fetch the user&#8217;s account data from Facebook and display profile info and login status to the user.<\/li>\n<li><code>fbLogout()<\/code> &#8211; Logout the user from their Facebook account.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>.fbAsyncInit = <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ FB JavaScript SDK configuration and setup<\/span>\r\n    FB.init({\r\n      appId      : <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'InsertYourFacebookAppId'<\/span>, <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ FB App ID<\/span>\r\n      cookie     : <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,  <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ enable cookies to allow the server to access the session<\/span>\r\n      xfbml      : <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>,  <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ parse social plugins on this page<\/span>\r\n      version    : <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'v3.2'<\/span> <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ use graph api version 2.8<\/span>\r\n    });\r\n    \r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Check whether the user already logged in<\/span>\r\n    FB.getLoginStatus(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">response<\/span>) <\/span>{\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (response.status === <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'connected'<\/span>) {\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/display user data<\/span>\r\n            getFbUserData();\r\n        }\r\n    });\r\n};\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Load the JavaScript SDK asynchronously<\/span>\r\n(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">d, s, id<\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> js, fjs = d.getElementsByTagName(s)[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>];\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (d.getElementById(id)) <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span>;\r\n    js = d.createElement(s); js.id = id;\r\n    js.src = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"\/\/connect.facebook.net\/en_US\/sdk.js\"<\/span>;\r\n    fjs.parentNode.insertBefore(js, fjs);\r\n}(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'script'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'facebook-jssdk'<\/span>));\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Facebook login with JavaScript SDK<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">fbLogin<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    FB.login(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">response<\/span>) <\/span>{\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (response.authResponse) {\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Get and display the user profile data<\/span>\r\n            getFbUserData();\r\n        } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n            <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'status'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'User cancelled login or did not fully authorize.'<\/span>;\r\n        }\r\n    }, {scope: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'email'<\/span>});\r\n}\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Fetch the user profile data from facebook<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">getFbUserData<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    FB.api(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\/me'<\/span>, {locale: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'en_US'<\/span>, fields: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'id,first_name,last_name,email,link,gender,locale,picture'<\/span>},\r\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">response<\/span>) <\/span>{\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'fbLink'<\/span>).setAttribute(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"onclick\"<\/span>,<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fbLogout()\"<\/span>);\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'fbLink'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Logout from Facebook'<\/span>;\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'status'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p&gt;Thanks for logging in, '<\/span> + response.first_name + <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'!&lt;\/p&gt;'<\/span>;\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'userData'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h2&gt;Facebook Profile Details&lt;\/h2&gt;&lt;p&gt;&lt;img src=\"'<\/span>+response.picture.data.url+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\"\/&gt;&lt;\/p&gt;&lt;p&gt;&lt;b&gt;FB ID:&lt;\/b&gt; '<\/span>+response.id+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;p&gt;&lt;b&gt;Name:&lt;\/b&gt; '<\/span>+response.first_name+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">' '<\/span>+response.last_name+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;p&gt;&lt;b&gt;Email:&lt;\/b&gt; '<\/span>+response.email+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;p&gt;&lt;b&gt;Gender:&lt;\/b&gt; '<\/span>+response.gender+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;p&gt;&lt;b&gt;FB Profile:&lt;\/b&gt; &lt;a target=\"_blank\" href=\"'<\/span>+response.link+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\"&gt;click to view profile&lt;\/a&gt;&lt;\/p&gt;'<\/span>;\r\n    });\r\n}\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Logout from facebook<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">fbLogout<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    FB.logout(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'fbLink'<\/span>).setAttribute(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"onclick\"<\/span>,<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fbLogin()\"<\/span>);\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'fbLink'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;img src=\"images\/fb-login-btn.png\"\/&gt;'<\/span>;\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'userData'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>;\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'status'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p&gt;You have successfully logout from Facebook.&lt;\/p&gt;'<\/span>;\r\n    });\r\n}<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>HTML Code:<\/b><br \/>\nDefine the HTML elements to display Facebook Login button, status message, and user&#8217;s profile information on the web page.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Display login status --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"status\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Facebook login or logout button --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"javascript:void(0);\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"fbLogin();\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"fbLink\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"images\/fb-login-btn.png\"<\/span>\/&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Display user's profile info --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"ac-data\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"userData\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<h2>Save User Account Data to Database (using jQuery, Ajax, PHP, and MySQL)<\/h2>\n<p>After a user logged in via Facebook JavaScript SDK, if you want to store the user profile information into the MySQL database, follow the below steps.<\/p>\n<p><b>Create Database Table:<\/b><br \/>\nTo store the profile information a table is required in the database. The following SQL creates a <code>users<\/code> table in the MySQL database.<\/p>\n<pre style=\"color: rgb(0, 0, 0);\"><span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CREATE<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">TABLE<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`users`<\/span> (\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">int<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">11<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> AUTO_INCREMENT,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`oauth_provider`<\/span> enum(<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'facebook'<\/span>,<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'google'<\/span>,<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'twitter'<\/span>,<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">''<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">''<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`oauth_uid`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">50<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`first_name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">25<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`last_name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">25<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`email`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">25<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`gender`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">10<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`picture`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">200<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`link`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">100<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`created`<\/span> datetime <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`modified`<\/span> datetime <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n PRIMARY <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">KEY<\/span> (<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span>)\r\n) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">ENGINE<\/span>=<span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">InnoDB<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CHARSET<\/span>=utf8 <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span>=utf8_unicode_ci;<\/pre>\n<p><b>JavaScript Code:<\/b><br \/>\nWe\u2019ll use jQuery and Ajax to send the user&#8217;s profile data to the server-side script to insert the user data into the database with PHP and MySQL.<\/p>\n<p>At first include the jQuery library.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p>The following <b>saveUserData()<\/b> function post the account data to server-side script (userData.php) using Ajax $.post() method.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Include this <code>saveUserData()<\/code> function to the existing JavaScript code.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Save user data to the database<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">saveUserData<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">userData<\/span>)<\/span>{\r\n    $.post(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'userData.php'<\/span>, {oauth_provider:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'facebook'<\/span>,userData: <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">JSON<\/span>.stringify(userData)}, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{ <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>; });\r\n}<\/pre>\n<p>Now call the <code>saveUserData()<\/code> function from <code>getFbUserData()<\/code> function and pass the response data. After modification, the updated <b>getFbUserData()<\/b> function will look like the below.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Fetch the user profile data from facebook<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">getFbUserData<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    FB.api(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\/me'<\/span>, {locale: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'en_US'<\/span>, fields: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'id,first_name,last_name,email,link,gender,locale,picture'<\/span>},\r\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">response<\/span>) <\/span>{\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'fbLink'<\/span>).setAttribute(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"onclick\"<\/span>,<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"fbLogout()\"<\/span>);\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'fbLink'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Logout from Facebook'<\/span>;\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'status'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p&gt;Thanks for logging in, '<\/span> + response.first_name + <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'!&lt;\/p&gt;'<\/span>;\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'userData'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h2&gt;Facebook Profile Details&lt;\/h2&gt;&lt;p&gt;&lt;img src=\"'<\/span>+response.picture.data.url+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\"\/&gt;&lt;\/p&gt;&lt;p&gt;&lt;b&gt;FB ID:&lt;\/b&gt; '<\/span>+response.id+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;p&gt;&lt;b&gt;Name:&lt;\/b&gt; '<\/span>+response.first_name+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">' '<\/span>+response.last_name+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;p&gt;&lt;b&gt;Email:&lt;\/b&gt; '<\/span>+response.email+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;p&gt;&lt;b&gt;Gender:&lt;\/b&gt; '<\/span>+response.gender+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;&lt;p&gt;&lt;b&gt;FB Profile:&lt;\/b&gt; &lt;a target=\"_blank\" href=\"'<\/span>+response.link+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\"&gt;click to view profile&lt;\/a&gt;&lt;\/p&gt;'<\/span>;\r\n\t\t\r\n        <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Save user data<\/span>\r\n        saveUserData(response);\r\n    });\r\n}<\/pre>\n<p><b>PHP Code:<\/b><\/p>\n<p><u>Database Configuration (dbConfig.php)<\/u><br \/>\nThis file helps to connect and select the database using PHP and MySQL.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;configuration <br \/><\/span><span style=\"color: #0000BB\">$dbHost&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"localhost\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbUsername&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbPassword&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbName&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"codexworld\"<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Create&nbsp;connection&nbsp;and&nbsp;select&nbsp;DB <br \/><\/span><span style=\"color: #0000BB\">$db&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;new&nbsp;<\/span><span style=\"color: #0000BB\">mysqli<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$dbHost<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbUsername<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbPassword<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbName<\/span><span style=\"color: #007700\">); <br \/> <br \/>if&nbsp;(<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;die(<\/span><span style=\"color: #DD0000\">\"Unable&nbsp;to&nbsp;connect&nbsp;database:&nbsp;\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">); <br \/>} <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p><u>Insert\/Update Data in Database (userData.php)<\/u><br \/>\nThis file handles the database related operations (insert\/update).<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Retrieve POST data and convert JSON to PHP array.<\/li>\n<li>Check whether user data already exists in the database.\n<ul>\n<li>If the user already exists, update data in the database.<\/li>\n<li>If new a user, insert data to the database. <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Load&nbsp;the&nbsp;database&nbsp;configuration&nbsp;file <br \/><\/span><span style=\"color: #007700\">include&nbsp;<\/span><span style=\"color: #DD0000\">'dbConfig.php'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Retrieve&nbsp;POST&nbsp;data&nbsp;and&nbsp;convert&nbsp;JSON&nbsp;to&nbsp;PHP&nbsp;array <br \/><\/span><span style=\"color: #0000BB\">$userData&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">json_decode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'userData'<\/span><span style=\"color: #007700\">]); <br \/> <br \/>if(!empty(<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$oauth_provider&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'oauth_provider'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$link&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">link<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">link<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$gender&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">gender<\/span><span style=\"color: #007700\">)?<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">gender<\/span><span style=\"color: #007700\">:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;whether&nbsp;user&nbsp;data&nbsp;already&nbsp;exists&nbsp;in&nbsp;database <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$prevQuery&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"SELECT&nbsp;id&nbsp;FROM&nbsp;users&nbsp;WHERE&nbsp;oauth_provider&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_provider<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'&nbsp;AND&nbsp;oauth_uid&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">id<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'\"<\/span><span style=\"color: #007700\">; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$prevResult&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$prevQuery<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$prevResult<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">num_rows&nbsp;<\/span><span style=\"color: #007700\">&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">){&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Update&nbsp;user&nbsp;data&nbsp;if&nbsp;already&nbsp;exists <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$query&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"UPDATE&nbsp;users&nbsp;SET&nbsp;first_name&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">first_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;last_name&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">last_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;email&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">email<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;gender&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$gender<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;picture&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">picture<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">data<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">url<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;link&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$link<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;modified&nbsp;=&nbsp;NOW()&nbsp;WHERE&nbsp;oauth_provider&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_provider<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'&nbsp;AND&nbsp;oauth_uid&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">id<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$update&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Insert&nbsp;user&nbsp;data <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$query&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"INSERT&nbsp;INTO&nbsp;users&nbsp;SET&nbsp;oauth_provider&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_provider<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;oauth_uid&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">id<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;first_name&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">first_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;last_name&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">last_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;email&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">email<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;gender&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$gender<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;picture&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">picture<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">data<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">url<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;link&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$link<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;created&nbsp;=&nbsp;NOW(),&nbsp;modified&nbsp;=&nbsp;NOW()\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$insert&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/login-with-google-account-using-javascript\/\">Login with Google Account using JavaScript<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Facebook Login is the easiest way to integrate the login system on the website. Facebook Login allows users to log into the web application with their Facebook account without registration on your website. Facebook provides <\/p>\n","protected":false},"author":1,"featured_media":2028,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10],"tags":[28,178,83,66,19,14],"class_list":["post-2027","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-ajax","tag-facebook-login","tag-facebookapi","tag-javascript","tag-mysql","tag-php","cat-10-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Login with Facebook using JavaScript SDK - CodexWorld<\/title>\n<meta name=\"description\" content=\"Facebook Login with JavaScript SDK - Implement login with Facebook using JavaScript API and insert Facebook profile information to the database using jQuery, Ajax, PHP, and MySQL. Example code to integrate login system with Facebook JavaScript SDK on a single page without page refresh.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Login with Facebook using JavaScript SDK - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Facebook Login with JavaScript SDK - Implement login with Facebook using JavaScript API and insert Facebook profile information to the database using jQuery, Ajax, PHP, and MySQL. Example code to integrate login system with Facebook JavaScript SDK on a single page without page refresh.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-19T19:05:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-13T06:37:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/12\/login-with-facebook-using-javascript-sdk-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Login with Facebook using JavaScript SDK\",\"datePublished\":\"2016-12-19T19:05:44+00:00\",\"dateModified\":\"2022-11-13T06:37:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/\"},\"wordCount\":561,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/login-with-facebook-using-javascript-sdk-codexworld.png\",\"keywords\":[\"Ajax\",\"Facebook Login\",\"FacebookAPI\",\"JavaScript\",\"MySQL\",\"PHP\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/\",\"name\":\"Login with Facebook using JavaScript SDK - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/login-with-facebook-using-javascript-sdk-codexworld.png\",\"datePublished\":\"2016-12-19T19:05:44+00:00\",\"dateModified\":\"2022-11-13T06:37:13+00:00\",\"description\":\"Facebook Login with JavaScript SDK - Implement login with Facebook using JavaScript API and insert Facebook profile information to the database using jQuery, Ajax, PHP, and MySQL. Example code to integrate login system with Facebook JavaScript SDK on a single page without page refresh.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/login-with-facebook-using-javascript-sdk-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/login-with-facebook-using-javascript-sdk-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"login-with-facebook-using-javascript-sdk-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-facebook-using-javascript-sdk\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Login with Facebook using JavaScript SDK\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Login with Facebook using JavaScript SDK - CodexWorld","description":"Facebook Login with JavaScript SDK - Implement login with Facebook using JavaScript API and insert Facebook profile information to the database using jQuery, Ajax, PHP, and MySQL. Example code to integrate login system with Facebook JavaScript SDK on a single page without page refresh.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/","og_locale":"en_US","og_type":"article","og_title":"Login with Facebook using JavaScript SDK - CodexWorld","og_description":"Facebook Login with JavaScript SDK - Implement login with Facebook using JavaScript API and insert Facebook profile information to the database using jQuery, Ajax, PHP, and MySQL. Example code to integrate login system with Facebook JavaScript SDK on a single page without page refresh.","og_url":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2016-12-19T19:05:44+00:00","article_modified_time":"2022-11-13T06:37:13+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/12\/login-with-facebook-using-javascript-sdk-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Login with Facebook using JavaScript SDK","datePublished":"2016-12-19T19:05:44+00:00","dateModified":"2022-11-13T06:37:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/"},"wordCount":561,"commentCount":15,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/12\/login-with-facebook-using-javascript-sdk-codexworld.png","keywords":["Ajax","Facebook Login","FacebookAPI","JavaScript","MySQL","PHP"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/","url":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/","name":"Login with Facebook using JavaScript SDK - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/12\/login-with-facebook-using-javascript-sdk-codexworld.png","datePublished":"2016-12-19T19:05:44+00:00","dateModified":"2022-11-13T06:37:13+00:00","description":"Facebook Login with JavaScript SDK - Implement login with Facebook using JavaScript API and insert Facebook profile information to the database using jQuery, Ajax, PHP, and MySQL. Example code to integrate login system with Facebook JavaScript SDK on a single page without page refresh.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/12\/login-with-facebook-using-javascript-sdk-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/12\/login-with-facebook-using-javascript-sdk-codexworld.png","width":1366,"height":768,"caption":"login-with-facebook-using-javascript-sdk-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Login with Facebook using JavaScript SDK"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/12\/login-with-facebook-using-javascript-sdk-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-wH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2027"}],"version-history":[{"count":10,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2027\/revisions"}],"predecessor-version":[{"id":4381,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2027\/revisions\/4381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2028"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}