Skip to content
pakainfo

Pakainfo

Web Development & Good Online education

  • Home
  • Blog
  • Categories
  • Tools
  • Full Form
  • Guest Post
    • Guest Posting Service
  • Advertise
  • About
  • Contact Us

Login with Facebook using javascript

July 11, 2018 Pakainfo Technology, Ajax, Facebook, Google, JavaScript, jQuery Leave a comment

Login with Facebook using javascript

Contents

  • Login with Facebook using javascript
    • Login with Facebook using javascript Source code download
    • Related posts

Welcome to the In Pakainfo.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.For Login with Facebook using javascript Source code download

Login with Facebook using javascript Source code download

setting to javascript for login with Facebook Account

 FB.init({
      appId      : '19101655989566548', // your facebook App ID
      channelUrl : 'https://www.pakainfo.com/facebook/channel.html', //your facebook Channel File
      status     : true, // status check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

First of create a simple dev account in facebook.

Create Account
index.html

please set this your project name and set redirect url set and get the appId and secrate key.

<html>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '19101655989566548', // your facebook App ID
      channelUrl : 'https://www.pakainfo.com/facebook/channel.html', //your facebook Channel File
      status     : true, // status check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
	FB.Event.subscribe('auth.authmsgresultChange', function(msgresult) 
	{
 	 if (msgresult.status === 'connected') 
  	{
		//display message
  		document.getElementById("data_msgresult_result").innerHTML +=  "<br>facebook auth Connected to Facebook";
  		//display SUCCESS
  		
  	}	 
	else if (msgresult.status === 'not_authorized') 
    {
		//display message
    	document.getElementById("data_msgresult_result").innerHTML +=  "<br>facebook auth Failed to Connect";

		//display FAILED
    } 
	else 
    {
		//display message
    	document.getElementById("data_msgresult_result").innerHTML +=  "<br>facebook auth Logged Out";

    	//display UNKNOWN ERROR
    }
	});	
	
    };
	
    //facebook auth login function call
   	function Login()
	{
	
		FB.login(function(msgresult) {
		   if (msgresult.authmsgresult) 
		   {
		    	getClientInfo();
  			} else 
  			{
  	    	 console.log('User cridentials cancelled login or all the data did not fully authorize.');
   			}
		 },{scope: 'email,user_photos,user_videos'});
	
	
	}

  function getClientInfo() {
	    FB.api('/me', function(msgresult) {

	  var fbexample="<b>client Name</b> : "+msgresult.name+"<br>";
	  	  fbexample +="<b>client Link: </b>"+msgresult.link+"<br>";
	  	  fbexample +="<b>client Username:</b> "+msgresult.username+"<br>";
	  	  fbexample +="<b>client id: </b>"+msgresult.id+"<br>";
	  	  fbexample +="<b>client Email:</b> "+msgresult.email+"<br>";
	  	  fbexample +="<input type='button' value='client Photo' onclick='getPhoto();'/>";
	  	  fbexample +="<input type='button' value='Logout' onclick='Logout();'/>";
	  	  document.getElementById("status").innerHTML=fbexample;
	  	  	    
    });
    }
	function getPhoto()
	{
	  FB.api('/me/picture?type=normal', function(msgresult) {

		  var fbexample="<br/><b>Pic</b> : <img src='"+msgresult.data.url+"'/>";
	  	  document.getElementById("status").innerHTML+=fbexample;
	  	  	    
    });
	
	}
	function Logout()
	{
		FB.logout(function(){document.location.reload();});
	}

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

</script>
<div align="center">
<h2>Facebook with javascript OAuth Javascript Demo</h2>

<div id="status">
Please Click on Below Button to start the demo: <br/>
<buttononclick="Login()">Facebook Login </button>
</div>
<br/><br/><br/><br/><br/>
<div id="data_msgresult_result">
Logs:<br/>
</div>

</div>
</body>
</html>

channel.html

 <script src="//connect.facebook.net/en_US/all.js"></script>

We hope you get an idea about Login with Facebook using javascript
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

Also Read This 👉   Login with Facebook and Twitter using PHP

We hope This Post can help you…….Good Luck!.

Related posts:

  1. Login with Facebook and Twitter using PHP
  2. Login with Facebook and Twitter
  3. how to make a login page in html with database?
facebook app javascript sdkfacebook html javascript codesfacebook javascript sdk downloadfacebook login javascript sample codefacebook redirect url after loginlogin with facebook buttonuse facebook login for my websiteweb.facebook login

Post navigation

Previous Post:List of players sold and unsold in IPL 2019
Next Post:Multiple Image Upload using PHP into MYSQL database

Advertise With Us

Increase visibility and sales with advertising. Let us promote you online.
Click Here

Write For Us

We’re accepting well-written informative guest posts and this is a great opportunity to collaborate.
Submit a guest post to [email protected]
Contact Us

Freelance web developer

Do you want to build a modern, lightweight, responsive website quickly?
Need a Website Or Web Application Contact : [email protected]
Note: Paid Service
Contact Me

Categories

3movierulz (64) Ajax (464) AngularJS (377) ASP.NET (61) Bio (109) Bollywood (108) Codeigniter (175) CSS (98) Earn Money (93) Education (63) Entertainment (130) fullform (87) Google Adsense (64) Highcharts (77) History (40) Hollywood (109) JavaScript (1359) Jobs (42) jQuery (1423) Laravel (1088) LifeStyle (53) movierulz4 (63) Mysql (1035) Mysqli (894) php (2133) Programming (2345) Python (99) Software (178) Software (90) Stories (98) tamilrockers (104) Tamilrockers kannada (64) Tamilrockers telugu (61) Tech (147) Technology (2416) Tips and Tricks (130) Tools (214) Top10 (507) Trading (95) Trending (77) VueJs (250) Web Technology (113) webtools (200) wordpress (166) World (343)

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here
  • Home
  • About Us
  • Terms And Conditions
  • Write For Us
  • Advertise
  • Contact Us
  • Youtube Tag Extractor
  • Info Grepper
  • Guest Posting Sites
  • Increase Domain Authority
  • Social Media Marketing
  • Freelance web developer
  • Tools
Pakainfo 9-OLD, Ganesh Sco, Kothariya Ring Road, Chokadi, Rajkot - 360002 India
E-mail : jd[email protected]
Pakainfo

© 2023 Pakainfo. All rights reserved.

Top
Subscribe On YouTube : Download Source Code
We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype Guest Posting Sites