How to Integrate Facebook login to WordPress?

Facebook API integration with a site improves your site’s social rank. We can integrate a like button to our website or a comment box which is quite easy. A bit messy job comes when we get a requirement to create an app for a website and then integrate it. There may be many reasons to create an app. May be you want to give the users to signup to your site using their Facebook account or you want to post an article instantly it is published etc etc.

To integrate graph API to WordPress, we first need to create an app on Facebook using developer page. Let’s start it straight away.

Step 1:

Login to your Facebook account and go to developer page.

Click on add new app.

Integrate Facebook Login to WordPress - Add a new App
Integrate Facebook Login to WordPress – Add a new App

Step 2:

It will open a light box asking you to select the platform. Just select www

Integrate Facebook login to WordPress - select website
Integrate Facebook login to WordPress – select website

Step 3:

Give a name to your app

Integrate Facebook login to WordPress - Add name of App
Integrate Facebook login to WordPress – Add name of App

Step 4:

You can select any type

Integrate Facebook login to WordPress - Select type of App
Integrate Facebook login to WordPress – Select type of App

Step 5:

Stop here, please. Go to your WordPress theme and create a template file, let’s say “fb.php”.

Integrate Facebook login to WordPress - Create WordPress template file
Integrate Facebook login to WordPress – Create WordPress template file

Step 6:

Please get back to your Facebook page and copy this code and paste it into your fb template file.  And you can see you have to give your site URL which in my case is localhost/wordpress. After putting your site URL click next.

Integrate Facebook login to WordPress - Facebook SDK code
Integrate Facebook login to WordPress – Facebook SDK code

Step 7:

Then you will see this page, just copy the code and put it into your fb template.

Integrate Facebook login to WordPress - Facebook HTML5 code
Integrate Facebook login to WordPress – Facebook HTML5 code

Your template file will be looking like this.

Integrate Facebook login to WordPress - Facebook Template for WordPress
Integrate Facebook login to WordPress – Facebook Template for WordPress

Step 8:

Now go to you WordPress admin and create a page, let’s say “facebook” from WordPress admin and assign the fb template to this page. Open your page and your page will be looking like this.

Integrate Facebook login in WordPress - Facebook Page for WordPress
Integrate Facebook login in WordPress – Facebook Page for WordPress

So you have done a good job but as you know our objective is still not achieved.

Step 9:

If you go down of developer page you will see these boxes. Let’s integrate login to our site. Click on login box.

create fb app11
Integrate Facebook login img-10

It will open a new tab and on that page you will find a complete code for login to put into your facebook template file.

Facebook Login code for the Web Using the JavaScript SDK
Facebook Login code for the Web Using the JavaScript SDK

Step 10:

After putting the code, just find this “{your-app-id}” and put your app id. You can get your app id by navigating to this page “My apps

Save your fb template and reload the page.

Ah, an error, but it was important to show you. See it is saying the URL is mismatching. But what is it about? Now go to “My apps” page and edit your app settings on edit settings page you will see the “App Domains” is empty and you should mentions your app domain over here. And as I am using http://localhost/wordpress/facebook so my “App Domain” will be “localhost”. Put “localhost” in the box and click save. Now go to your WordPress page and reload it.

Awesome, now you can see something like this.

create fb app14
Integrate Facebook login img-12

There are three things to take care of.

1: Which of the things you are taking from user.

2: User can edit and select which of the things he wants this app to access.

3: Facebook is assuring the user that this app will not put anything on your wall (Unless you give it permissions to do so).

After clicking OK, you will get a “response object” from facebook. This object will have the whole detail. If you open your browser’s console you will see some sub objects of main object. You can console the whole “response object” to see the whole information it is carrying.

Integrate Facebook login in WordPress - Login now
Integrate Facebook login in WordPress – Login now

 

You can put the post request into this block or wherever you need. In our Test example, we are using TestAPI() function which fetches the user information from Facebook and shows you in console.log

You can make an ajax call at this point and store user information in your WordPress database and create facebook login user as a WordPress user as well.  There should be part 2 of this tutorial which explains that how we make an ajax call and create facebook login user as WordPress user as well. Are you interested to know that ??

 

Related posts:

2 thoughts on “How to Integrate Facebook login to WordPress?”

  1. Great Tutorial i have been searching for one that properly explains the process for WordPress. I now have a working Facebook log in on my page

  2. Thanks for the great tutorial!

    I am having issues with Facebook app site url matching the page containing the code on a WordPress site. I have been able to get this to work on a simple index.html page that is hosted on heroku, however when I moved the code over to a WordPress site, I get this error:

    “Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains.”

    My site’s url is like this: http://mysite.com/test-home-page
    The url that I have in the FB Developer Portal -> Website -> Site URL is http://mysite.com/test-home-page

    I have tried putting mysite.com/test-home-page in the Site URL as well.

    Any ideas on this? Thanks in advance!

    Jody

Leave a Reply

Your email address will not be published. Required fields are marked *