一：创建和配置开发者应用

https://developers.facebook.com

登录开发者（可能要手机验证，身份证严重）-》创建应用（web ）->填写配置，网站网址和应用域名需要一致。

二：页面调用

<!DOCTYPE html>

<html>

<head>

<title>Facebook Login JavaScript Example</title>

<meta charset="UTF-8">

</head>

<body>

<script>

  // This is called with the results from from FB.getLoginStatus().

  function statusChangeCallback(response) {

    console.log('statusChangeCallback');

    console.log(response);

    // The response object is returned with a status field that lets the

    // app know the current login status of the person.

    // Full docs on the response object can be found in the documentation

    // for FB.getLoginStatus().

    if (response.status === 'connected') {

      // Logged into your app and Facebook.

      testAPI();

    } else if (response.status === 'not_authorized') {

      // The person is logged into Facebook, but not your app.

      document.getElementById('status').innerHTML = 'Please log ' +

        'into this app.';

    } else {

      // The person is not logged into Facebook, so we're not sure if

      // they are logged into this app or not.

      document.getElementById('status').innerHTML = 'Please log ' +

        'into Facebook.';

    }

  }

  // This function is called when someone finishes with the Login

  // Button.  See the onlogin handler attached to it in the sample

  // code below.

  function checkLoginState() {

    FB.getLoginStatus(function(response) {

      statusChangeCallback(response);

    });

  }

  window.fbAsyncInit = function() {

  FB.init({

    appId      : '{your-app-id}',

    cookie     : true,  // enable cookies to allow the server to access

                        // the session

    xfbml      : true,  // parse social plugins on this page

    version    : 'v2.8' // use graph api version 2.8

  });

  // Now that we've initialized the JavaScript SDK, we call

  // FB.getLoginStatus().  This function gets the state of the

  // person visiting this page and can return one of three states to

  // the callback you provide.  They can be:

  //

  // 1. Logged into your app ('connected')

  // 2. Logged into Facebook, but not your app ('not_authorized')

  // 3. Not logged into Facebook and can't tell if they are logged into

  //    your app or not.

  //

  // These three cases are handled in the callback function.

  FB.getLoginStatus(function(response) {

    statusChangeCallback(response);

  });

  };

  // Load the SDK asynchronously

  (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'));

  // Here we run a very simple test of the Graph API after login is

  // successful.  See statusChangeCallback() for when this call is made.

  function testAPI() {

    console.log('Welcome!  Fetching your information.... ');

    FB.api('/me', function(response) {

      console.log('Successful login for: ' + response.name);

      document.getElementById('status').innerHTML =

        'Thanks for logging in, ' + response.name + '!';

    });

  }

</script>

<!--

  Below we include the Login Button social plugin. This button uses

  the JavaScript SDK to present a graphical Login button that triggers

  the FB.login() function when clicked.

-->

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">

</fb:login-button>

<div id="status">

</div>

</body>

</html>

修改以上代码。appId : '{your-app-id}', 填写，你的应用ID。

即可成功调用。

可以根据实际情况做适当调整。如样式，登录提示等

facebook第三方登录的更多相关文章

  1. java网站如何集成facebook第三方登录

    第一次接触Facebook第三方登录,可能有些地方做的并不全面,只是尝试着做了一个小demo,因为国内接入Facebook的项目并不多,并且多数都是Android或iOS的实现,所以资料也特别少,在此 ...

  2. android开发学习——facebook第三方登录，看了你不会后悔

    给APP用原生android进行facebook第三方登录. 我们做一件事情,首先得了解其原理,这样才不会迷茫,才知道自己做到什么程度了,心里才会有底. 所以,第一步,了解第三方登录的原理:下面贴一些 ...

  3. 用 Flask 来写个轻博客 (23) — 应用 OAuth 来实现 Facebook 第三方登录

    目录 目录 前文列表 扩展阅读 第三方登录流程 OAuth 应用 OAuth 实现 Facebook 第三方登录 实现效果 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask ...

  4. 关于Google+以及Facebook第三方登录实现的一点总结

    简述 最近项目中有关于第三方登陆的需求,第三方Facebook以及Google +登录. 正好这几天把这个需求做得差不多了,收个尾,作为一个这方面之前基本从未涉及的小白,总结下开发流程以及过程中遇到的 ...

  5. swift－sharesdk集成微信、Facebook第三方登录

    好久没有写博客了.最近忙得没有时间更新博客,很忙很忙. 今天就把自己做过的第三方集成和大家分享一下,请大家多多指教. 第一步: 一.获取AppKey(去官方平台注册) 二.下载SDK 三.快速集成 第 ...

  6. 使用ShareSDK完成Facebook第三方登录和Facebook分享时没办法跳转到Facebook应用

    楼主是通过cocoapod接入ShareSDK, 后来发现无论是使用fb分享还是登录, 都是跳出了网页认证(即使我的手机有安装了fb) 后来mob的技术客服小哥告诉我在构造分享参数的时候, 执行参数字 ...

  7. 分享前端Facebook及Twitter第三方登录

    最近公司要求做海外的第三方登录:目前只做了Facebook和Twitter;国内百度到的信息太少VPN FQ百度+Google了很久终于弄好了.但是做第三方登录基本上都有个特点就是引入必须的js,设置 ...

  8. 网站如何集成Facebook和Twitter第三方登录

    最近公司要求做海外的第三方登录:目前只做了Facebook和Twitter;国内百度到的信息太少VPN FQ百度+Google了很久终于弄好了.但是做第三方登录基本上都有个特点就是引入必须的js,设置 ...

  9. 第三方登录 (faceBook )

    1.iOS 第三方登录(Facebook,Twitter...)http://www.jianshu.com/p/f64d5ad2ef2a

随机推荐

  1. redis教程(三)-----redis缓存雪崩、缓存穿透、缓存预热

    缓存雪崩 概念 缓存雪崩是由于原有缓存失效(过期),新缓存未到期间.所有请求都去查询数据库,而对数据库CPU和内存造成巨大压力,严重的会造成数据库宕机.从而形成一系列连锁反应,造成整个系统崩溃. 解决 ...

  2. jeecms添加站点

    Step1:点击[站点管理],然后点击[添加站点]. Step2:按照下图填写,注意[路径]这一栏!!这里我随便写了个[aaa]. Step3:这个时候在本地部署的tomcat的模板路径:tomcat ...

  3. WIX、Squarespace、WordPress 三者的优劣分别是什么?

    层出不穷的智能建站,模板建站,源码建站,云建站,仿站,各种建站概念都抛洒于红海之中.到底什么样的网站适合自己,什么样的网站值得我们去消费,什么样的网站能长久,是个非常值得思考的问题. 网站建设技术非常 ...

  4. vue 二维码长按保存和复制内容

    效果图: 二维码用了 qrcode.vue npm install qrcode.vue --save 复制内容用了 vue-clipboard2 npm install vue-clipboard2 ...

  5. TZOJ 5110 Pollutant Control(边数最少最小割最小字典序输出)

    描述 It's your first day in Quality Control at Merry Milk Makers, and already there's been a catastrop ...

  6. TZOJ 5986 玄武密码(AC自动机)

    描述 在美丽的玄武湖畔,鸡鸣寺边,鸡笼山前,有一块富饶而秀美的土地,人们唤作进香河.相传一日,一缕紫气从天而至,只一瞬间便消失在了进香河中.老人们说,这是玄武神灵将天书藏匿在此. 很多年后,人们终于在 ...

  7. Leetcode144. Binary Tree Preorder Traversal二叉树的前序遍历

    给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 递归: class S ...

  8. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  9. uni-app开发的应用(小程序,app,web等),使用Node+Koa2开发的后端程序接收上传文件的方法

    uni-app使用使用Node+Koa2开发的后端程序接收上传的文件 通过gitbook浏览此随笔 通过其它客户端上传(h5,小程序等),接收方法一致 使用koa接收时,我们需安装一个中间件koa-b ...

  10. Java 类与类之间的调用

    方法1. 新建一个类. 然后在调用类中先进行被调用类实例化,然后通过实例化的对象访问. 例如: //先定义一个类 import static java.lang.System.out; public ...