[Resolved] How To Integrate Your Facebook App With Your Website or Blog

Facebook App lets you to get user's information. You can get information like user's name, profile picture, e-mail id, and other Facebook profile details. So in this tutorial I'll show you how to make your Facebook app and use it to get user's information.

Facebook app lets you to retrieve a Facebook user's information but when user is logged into Facebook account as well as in your App. In briefly the process something looks like this

Creating a Facebook App
Preparing it for your Website or Blog usage.
Getting in touch with Facebook API's and then final step is to integrate the app with coding.

Here basically I prefer to use javascript and I've used the same. So, you need not to have a huge reference about the javascript, a little bit knowledge of javascript will work through out the tutorial.

So fasten your seat belts cause we are going to dive into the first part of the tutorial, creating a Facebook App.

Creating a Facebook App

Step 1 : Go to https://developers.facebook.com/

Step 2 : Click on Log In button on top right corner.

Step 3 : Log In to the developer account by your Facebook user id and password.

Step 4 : Click on 'My Apps' located on the top right corner of the page.

Step 5 : Select 'Add a New App' option.

Step 6 : Click on Website option.

Step 7 : Now write your app name. You may select app name that suits you best. According to me your website's name is best for the app's name. Now Click on 'Create New Facebook App ID'.

Step 8 : Fill in the 'contact email' field your e-mail address in which you may want to receive notifications regarding app. Now select Category of your app.

Step 9 : Click on 'Create App ID'.

Step 10 : Now scroll down the new page and write your website/blog's address in the 'Site URL' column.

Example : "http://tgztestblog.blogspot.in/".

You may select a single page also. This is important aspect because it lets Facebook know that your app will be opened somewhere with this website or blog's page.

Step 11 : Click on 'Next' Button. Now your app has been created.

You may move to dashboard by clicking on 'Skip to Developer Dashboard' link or Go to https://developers.facebook.com/ and then selecting your app.

Preparing it for your Website or Blog usage

Now this part is very important because without this part your app will not work and you cannot use it your website or blog. You have to make your app publicly active for everyone. This is not so tough job, you just need to change some property. Let's see how it's done.

Step 1 : Go to your developer's dashboard (mentioned above) and note down your App ID.

Step 2 : Go to 'App Review' Menu on right panel.

Step 3 : Make on 'Make your_app_name public' to yes. And click on 'confirm'.

Now your app is available to the public and now it's ready to use in your website.

Next Step is Getting in touch with Facebook API's.

Code for your Facebook App

Now that you have created your app and prepared it for use in website, you need to get the code which will interact with your app to get user information. Actually the code that we use is in javascript so make sure that your browser's javascript is enabled. The code is simple to understand, it's not tough enough and even a beginner can also use it.

The code is Here : -

<script>

function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);

if (response.status === 'connected') {
usrName();
//Getting user name by calling method usrName()
} else if (response.status === 'not_authorized') {

// document.getElementById('status').innerHTML = ' ' +
'';
} else {

// document.getElementById('status').innerHTML = '' +
'';
}
}

function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}

window.fbAsyncInit = function() {
FB.init({
appId : '5044078', //Your FB App ID
cookie : true, // enable cookies
xfbml : true, // parse social plugins on this page
version : 'v2.1'
});

FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});

};

// Load the SDK
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

function usrName()
{

FB.api('/me', {Fields: 'name'}, function(response) {

//Main Code is here to get the Users Information
//You can save the information as well ...either using cookies or save information on server

//document.getElementById('username').innerHTML=response.name;

});

}

function fb_login() {
FB.login( function(response) { checkLoginState(response); }, { scope: 'email,public_profile,user_friends' });
}
</script>

Where To Place The Code

For Website/ Blogger :

The code must be placed just after the <body> Tag.

For Blogger Post :

The code may be placed anywhere in the HTML format while writing a post.

Changing App ID

After placing the code in it's right place you need to change App ID that is mentioned in the code. Replace your app's ID with the one which already predefined in the code.

FB.init({
appId : '5044078', //Replace it with Your FB App ID
cookie : true, // enable cookies
xfbml : true, // parse social plugins on this page
version : 'v2.1'
});

Note: Without correct App ID the process won't be completed and you will not be able to fetch user information

Fetching User Information From Your Facebook App

How The Code Works ?

Now that you have placed the code, the process of fetching user's information may be divided into two parts.

Ask user to Log In from your App.
Fetch user information if user accepts login invitation.

Let's Start The Process : -

Asking user to login-

function fb_login() {
FB.login( function(response) { checkLoginState(response); }, { scope: 'email,public_profile,user_friends' });
}

The above code is responsible for login of user. To use this you have to call it first. Let's see some example of calling this function.

You may use 'onclick' to call this function.

<img onclick="fb_login();" src="image1.jpg" />

When anyone clicks on the image it will automatically ask the user to login with your app.

Fetching User Information

function usrName()
{
FB.api('/me', {Fields: 'name'}, function(response) {
//Main Code is here to get the Users Information
//You can save the information as well ...either using cookies or save information on server
//document.getElementById('username').innerHTML=response.name;
});
}

The above code is responsible for fetching user's information. If you want to get email id of user then use "FB.api('/me', {Fields: 'email'}, function(response)" . Just change Fields to 'email'. Fields for public _profile are given below-

Field	Return Type
id	numeric string
about	string
age_range	AgeRange
bio	string
birthday	string
cover	CoverPhoto
currency	Currency
email	string
first_name	string
gender	string
name	string

For more Reference you may visit :-

https://developers.facebook.com/docs/facebook-login/permissions/#reference-public_profile

https://developers.facebook.com/docs/graph-api/reference/user

For fetching user id you can use 'response.id'.

For fetching first_name you may use 'response.first_name'.

For fetching gender of user you may use 'response.gender'.

Sample Code and It's Result

<div dir="ltr" style="text-align: left;" trbidi="on">
User Name :</div>
<div id="username">
Unknown
</div>
<div>
User Id :</div>
<div id="userId">
Unknown</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" onclick="fb_login();" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWb-RKvCRXCYCigbDKmH4QVRyrKTJ7gRQUmepdatUyP9mCN2NZNOGjKX7VNM-aqqAO-tB4yQFxj9X-f8ZtnBTuZ8B-T207qLverp1Z2ZitbESHVQfCUDLDNQjZB_TLViTpg40HDJEKq-pi/s1600/login.png" /></div>
</div>
</div>
</div>
</div>
<br />
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
usrName();
usrId();
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = ' ' +
'';
} else {
document.getElementById('status').innerHTML = '' +
'';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '1402305197*****', //Your FB App ID
cookie : true, // enable cookies
xfbml : true, // parse social plugins on this page
version : 'v2.1'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function usrName()
{
FB.api('/me', {Fields: 'name'}, function(response) {
//Main Code is here to get the Users Information
//You can save the information as well ...either using cookies or save information on server
document.getElementById('username').innerHTML=response.name;

});
}
function usrId()
{
FB.api('/me', {Fields: 'id'}, function(response) {
//Main Code is here to get the Users Information
//You can save the information as well ...either using cookies or save information on server
document.getElementById('userId').innerHTML=response.id;

});
}

function fb_login() {
FB.login( function(response) { checkLoginState(response); }, { scope: 'email,public_profile,user_friends' });
}
</script>
</div>

Result Screen Shot

You May Directly Visit To See Results :- http://tgztestblog.blogspot.in/2016/05/test-post.html

ADS HERE !!!