前期准备

1，注册一次Facebook账号，新建一个应用取到应用id

2，引进Facebook的SDK到页面中： 在js中引进以下代码，初始化

 1 // facebook
 2 window.fbAsyncInit = function() {
 3   FB.init({
 4     appId: 'your-app-id',//这里为你自己的应用id
 5     cookie: true,
 6     xfbml: true,
 7     version: 'v2.8',
 8   });
 9 };
10 (function(d, s, id) {
11   let js,
12     fjs = d.getElementsByTagName(s)[0];
13   if (d.getElementById(id)) return;
14   js = d.createElement(s); js.id = id;
15   js.src = '//connect.facebook.net/en_US/sdk.js';
16   fjs.parentNode.insertBefore(js, fjs);
17 }(document, 'script', 'facebook-jssdk'));

登录

登录有两种方法，第一种使用sdk的方法登录，第二种则直接使用Facebook的自带插件，下面进行详细介绍

一，利用 JavaScript SDK 部署网页版“Facebook 登录”

1，在html页面中增加一个按钮点击

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="common.js"></script>
 7 </head>
 8 <body>
 9     <button οnclick="login()">登录</button>
10 </body>
11 </html>

2,在js中引进login函数（用window.FB.getLoginStatus函数判断登录状态）

1 window.login = function(){
2   window.FB.getLoginStatus(function(response) {
3     if (response.status === 'connected') {
4      alert("您已经登录~")
5     }else{
6       window.FB.login();
7     }
8   });
9 };
二，利用插件配置器

1，进入站点，在下面图片所示中进行配置，点击“获取代码”按钮。

 

 

2，在HTML页面中引进js代码（注意：如果你前面已经引进上述的Facebook的SDK到页面中，下面的js可以不用再次引用）

 1 <div id="fb-root"></div>
 2 <script>(function(d, s, id) {
 3   var js, fjs = d.getElementsByTagName(s)[0];
 4   if (d.getElementById(id)) return;
 5   js = d.createElement(s); js.id = id;
 6   js.src = 'https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.2&appId=your-app-id&autoLogAppEvents=1';
 7   fjs.parentNode.insertBefore(js, fjs);
 8 }(document, 'script', 'facebook-jssdk'));</script>
 9 <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false"></div>

分享

分享也有有两种方法，第一种使用sdk的方法登录，第二种则直接使用Facebook的自带插件，下面进行详细介绍

一，利用 JavaScript SDK 部署网页版“Facebook 登录”

1，在html页面中加入分享按钮

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="common.js"></script>
 7 </head>
 8 <body>
 9     <button οnclick="share()">分享</button>
10 </body>
11 </html>

2，在js中引进share函数

1 window.share = function(){
2   window.FB.ui({
3     method: 'share',
4     href: "your-share-link",
5   }, function() {
6   });
7 };

下面介绍一些参数

1）href：分享的页面。需要注意的是在此网址的页面上必须添加开放图谱元标签，自定义分享的动态。 具体如下所示：在分享的html页面head里面加上以下代码（需要注意的是这里的图片链接不能用https，否则显示不出来，具体原因不明）

1     <meta property="fb:app_id" content="your-app-id" />
2     <meta property="og:url" content="" />
3     <meta property="og:type" content="website" />
4     <!--分享的标题-->
5     <meta property="og:title" content="《神命：天選之人》--事情登錄得好康，分享抽mycard！" />
6     <!--分享的描述-->
7     <meta property="og:description" content="《神命：天選之人》強勢來襲！化形天神，舞動幹戚；神魔之戰，生死一念；神寵坐騎，飛天遁地；驚鴻一瞥，女神相隨！參與事前登錄，好康滿滿，更有機會贏Mycard！" />
8     <!--分享的图片-->
9     <meta property="og:image" content="http://www.99trillion.com/test20181214/share.ad3f2854.jpg" />

2）mobile_iframe：移动网页分享对话框也能够以 iFrame窗口的形式显示在内容的顶部。完成分享操作流程后，该对话框将消失，而用户将回到之前所在的内容位置，以便轻松继续阅读内容。要让移动网页分享对话框显示在 iframe 窗口中，请将属性 mobile_iframe 设置为 true。

1 window.share = function(){
2   window.FB.ui({
3     method: 'share',
4     mobile_iframe: true,
5     href: "your-share-link",
6   }, function() {
7   });
8 };
二，利用插件配置器

1，进入站点，在下面图片所示中进行配置，点击“获取代码”按钮。