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

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. 深入浅出 Java Concurrency (1) : J.U.C的整体认识[转]

    去年年底有一个Guice的研究计划,可惜由于工作“繁忙”加上实际工作中没有用上导致“无疾而终”,最终只是完成了Guice的初步学习教程,深入的研究没有继续进行下去. 最近一直用的比较多的就是java. ...

  2. centos yum 坏掉 db 损坏

    #首先清除掉缓存,之后再重建就可以了 rm -f /var/lib/rpm/__db* rpm --rebuilddb 提示的错误应该是: error: rpmdb: BDB0113 Thread/p ...

  3. 转载 ASP.NET SignalR 与LayIM配合，轻松实现网站客服聊天室（一） 整理基础数据

    ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据   最近碰巧发现一款比较好的Web即时通讯前端组件,layim,百度关键字即可,我下面要做的就是基于这个前 ...

  4. python-基础-字符串-列表-元祖-字典

    1 字符串 1.1 下标和切片 1.2 切片 1.3 字符串常见操作 如有字符串mystr = 'hello world itcast and itcastcpp',以下是常见的操作 <1> ...

  5. java异常处理throw和throws的区别

    throws和throw区别 throws是用来声明一个方法可能抛出的所有异常信息,throws是将异常声明但是不处理,而是将异常往上传,谁调用我就交给谁处理. 而throw则是指抛出的一个具体的异常 ...

  6. Chrome 地址栏如何设置显示 http/https 和 www

    首先在 chrome 地址栏输入以下地址 chrome://flags/#omnibox-ui-hide-steady-state-url-scheme-and-subdomains 然后使用 Ctr ...

  7. Luogu P4011 孤岛营救问题(状态压缩+最短路)

    P4011 孤岛营救问题 题意 题目描述 \(1944\)年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛,营救被敌军俘虏的大兵瑞恩.瑞恩被关押在一个迷宫里,迷宫地形复杂,但幸好麦克得到 ...

  8. CentOS + Nginx 的常用操作指令总结

    CentOS + Nginx 的常用操作指令总结 一. 关于CentOS 查看 yum 源是否存在 yum list | grep nginx 如果不存在 或者 不是自己想要的版本 可以自己设置Ngi ...

  9. bzoj 4373 算术天才⑨与等差数列——线段树+set

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4373 能形成公差为k的等差数列的条件:mx-mn=k*(r-l) && 差分 ...

  10. localStorage对象简单应用 - - 访问次数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...