How to Install Facebook Plugin Code in The NHK Project and Configure Facebook Developer Account

Challenges:

Most of the developers at the starting phase experience too many problems while adding the plugin to the project and configuring it. And along with this, they also feel difficulties in configuring Facebook developer account and add it to our project. So I am going to share some basic steps to achieve this.

Technology:

Asp .Net MVC

Summary:

Let's learn how to add and install plugins in our project and configure Facebook developer account. Also find out the ways to add the important keys in project provided by FB and how it allow you to log in on your website.

Step 1: To Add FB Code and Install in Project

1) First add the FB plugin code in the plugin folder. Here, you will get that folder under SRC -> Open plugin folder -> Add FB code.

2) Open your project in visual studio -> Right-click on the plugin folder -> Add existing project -> Add your FB code where you have added in point no.1.

3) Build your project -> DLL will create under the Nop.web -> Plugin folder.

4) Open that plugin folder in file explorer by right click on FB DLL.

5) Copy that whole folder and paste it into the root folder which is available above the SRC folder.

6) Last thing add the plugin system name and version in plugin.json which is available in the root folder.

7) To run your project, go to the local plugin section on the admin side and install the FB plugin.

8) Add key provided by Facebook developer account.

Step 2: How to Configure The Facebook Developer Account

1) Open Facebook developer account.login from your FB creds.

2) After preceding point 1. You will see the developer dashboard of FB.

3) Click on my Apps -> You will be redirected to another page.

4) Click on create new app -> If you are using FB login for services purpose select consumer.

5) Follow the instructions given by Facebook.

6) After that your app will create -> Click on your app -> You will see the app dashboard.

7) Select setting -> Basic -> Then mention the important things.

In basic add all the mandatory things like:

a) Display name -> Should be your app name ex:- Dummy app

b) App domains -> Website URL

c) Privacy policy URL -> Privacy URL

d) Terms and condition URL -> Terms URL

e) User data deletion -> Website URL so whenever you will delete the data of FB, it will check whether the data is deleted from a valid URL or not.

f) App icon:- Upload icon of minimal size so its visible on my apps section and on FB page.

8) After that on basic setting you will see add platform button. If you are setting up the FB for your website then select website and put the website URL in it.

9) Copy the app key and secret key which are given at the top of the basic setting and put both keys in your project configuration which is in the local plugin

Admin -> Configuration -> Local plugin -> FB configuration -> paste both keys .

10) After setting up this thing in the side menu you will see the Facebook login.

11) Select setting under Facebook login -> Add your website URL in the valid OAuth redirection field like this:- http://dummy.nestorbird.com/signin-facebook.

12) After setting up this thing go to the app review option -> Select permission -> Get the permission for email service and public profile once the permission is granted for advanced access.

13) Last step you need to do is to change the toggle button on the top of the dashboard from Test mode to Live mode otherwise login will not work.

14) Now try to log in as FaceBook in your project. Definitely, it will work.

Written By:

Sudarshan Choudhary

Sr. Software Developer

    last updated 1 year ago