{"id":13488,"date":"2020-10-01T15:00:11","date_gmt":"2020-10-01T13:00:11","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=13488"},"modified":"2020-10-01T11:00:14","modified_gmt":"2020-10-01T09:00:14","slug":"wordpress-facebook-login","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-facebook-login\/","title":{"rendered":"How to Add the “Connect with Facebook” Login Option to WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]If you\u2019re a WordPress website owner, you must\u2019ve noticed that some sites allow users to log in with their social network credentials, including services like Facebook, Instagram, Twitter, etc. This third-party login system can bring some useful benefits to your business, which is why you might want to consider adding it to your own website as well.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Since Facebook is easily the most popular social network worldwide, it is also among the most common types of social login out there. So, this time around, we will talk about why you should add a WordPress Facebook login option to your site, and also provide you with all the necessary steps to do it using the Nextend Social Login and Register plugin<\/strong>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Why Add the Facebook Login Option to Your WordPress Site?<\/h2>\n

[\/vc_column_text][vc_column_text]It is an undeniable fact that people dislike registration forms. Simply put, many of them would rather avoid all the hassle that comes with having to create a new username and password every time they run into a new website, blog, or online forum. Not only will they potentially have to think of a new username and password combination from scratch, but there\u2019s also a chance they\u2019d have to wait to receive a confirmation email until they can finally login to a website. So, if your site only offers a single login option to users, there are high chances that some users will be discouraged from registering or even using your website as a whole.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Aside from being inherently valuable when it comes to the user experience of your visitors, the option to login with Facebook can bring some other advantages to you as a site owner as well. Namely, you will get access to some useful user data<\/strong>, such as their full name, real email address, and other characteristics like age, gender, location, Facebook likes, etc. All this information can help you strengthen your marketing efforts, and allows you to adapt the way you promote your brand and products according to your audience\u2019s preferences<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]With that said, here are all the steps you should take to add a Facebook login option to your WordPress site.
\n[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”81px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Adding a Facebook Login Option With the Nextend Social Login and Register Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]Nextend Social Login and Register<\/a> is a free plugin that will not only allow your users to log into your website using Facebook, but other social profiles as well \u2013 including Twitter, Google, LinkedIn, and so on. However, this time around, we will only focus on how to add a Facebook connect option to your site.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]After you install the plugin<\/a> and activate it, head to Settings >> Nextend Social Login<\/em> in your dashboard.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once there, you should configure your Facebook options by clicking the Getting Started<\/em> button below a Facebook logo.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Now, this will trigger a \u201cGetting Started\u201d screen that will display all the different steps you need to take. Essentially, your first, and most important step should be connecting your plugin with a Facebook app<\/strong>. While you should be able to create an app using the instructions provided by the plugin\u2019s creators, we do recommend that you take a look at our guide below for some additional info \u2013 including the pictures of most of the steps.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]First things first, you should head to the Facebook Developers<\/a> page in order to create a new app. If you\u2019re not logged in, make sure to log in with your Facebook credentials first and then click on My Apps<\/em><\/strong>.<\/em> If you\u2019ve already added Facebook comments to your WordPress site<\/a>, then you\u2019ve most likely already created a Facebook app for your site. In that case, you can simply copy the already existing app ID and secret key and paste them into your plugin\u2019s Settings.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To create a new app from scratch, simply click the \u201cAdd a New App\u201d button.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]A new pop-up will appear, asking you to choose how you will be using your app. Pick the option called For Everything Else<\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then, you should create an app display name and add your email address. Hit the Create App ID<\/em> once you\u2019re done.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]After confirming that you\u2019re not a robot, you will be taken to your app\u2019s dashboard. Next, you should access Settings >> Basic<\/em>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In the App Domains<\/em> field, you should enter your domain name. Then, make sure to add your Privacy Policy URL and choose your business use as well as a category that fits your business the most. Finally, hit the Save Changes<\/em> button.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Now, you click on Dashboard<\/em> and scroll down until you see the option called Facebook Login<\/em>. Then, select the Set Up<\/em> button.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You will get to choose the platform for your app. Select the Web<\/em> option to continue.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]From then on, you should go to Facebook Login >> Settings<\/em>. Make sure to add the URL (listed in the instructions on the plugin\u2019s screen) in the “Valid OAuth redirect URIs\u201d field and click on Save Changes<\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Now, it\u2019s time to switch your application status from \u201cIn development\u201d to \u201cLive Mode\u201d. You will find the switch in the top bar of the screen.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Clicking on the switch will open a screen that will ask you to switch to live mode. Simply click the Switch Mode<\/em> button, and you\u2019re all set.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]There\u2019s only one final thing left to do. Head to Settings >> Basic<\/em> once again and copy your App ID and App Secret, one at a time.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Head back to your plugin\u2019s screen and paste these two codes one by one into the plugin\u2019s App ID and App Secret fields (located in the Settings<\/em> tab). Click the Save Changes<\/em> button, and you\u2019re done.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Nextend <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]From here, you will be able to verify your Facebook Login settings, and then you should hit the Enable<\/em> button.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Facebook <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Finally, you can head to your WordPress login page to see how your WordPress Facebook login option looks like in action.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"WordPress <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]Adding a Facebook login button to your WordPress site is one of the most user-friendly things you can do for your visitors. Apart from allowing them to log into your site with just one click and preventing them from potentially abandoning your site altogether, this is also an excellent opportunity to get to know your audience better<\/strong>. We recommend using the Nextend Social Login and Register plugin to easily create the WordPress Facebook login option and take advantage of all the marketing benefits it can bring to your business.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

A Facebook login button can bring useful marketing benefits to your business. Here’s how you can easily add a Facebook login option to your WordPress site.<\/p>\n","protected":false},"author":2,"featured_media":13550,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,26,4,13],"class_list":["post-13488","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-social","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/13488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=13488"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/13488\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/13550"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=13488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=13488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=13488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}