前期准备
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 onclick="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 onclick="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，进入站点，在下面图片所示中进行配置，点击“获取代码”按钮。
2，在HTML页面中引进js代码（注意：如果你前面已经引进上述的Facebook的SDK到页面中，下面的js可以不用再次引用） 其中，href为分享的页面
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 10 <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">分享</a></div>
三，分享调试
进入站点，输入上面你分享的地址，可以刷新你更换的信息，如果分享不成功，也可以看到分享不成功的原因。
点赞
利用插件配置器
1，进入站点，在下面图片所示中进行配置，点击“获取代码”按钮。
2，在HTML页面中引进js代码（注意：如果你前面已经引进上述的Facebook的SDK到页面中，下面的js可以不用再次引用） 其中，data-href为点赞的页面。
1 <script>(function(d, s, id) { 2 var js, fjs = d.getElementsByTagName(s)[0]; 3 if (d.getElementById(id)) return; 4 js = d.createElement(s); js.id = id; 5 js.src = 'https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.2&appId=2145131702440053&autoLogAppEvents=1'; 6 fjs.parentNode.insertBefore(js, fjs); 7 }(document, 'script', 'facebook-jssdk'));</script> 8 9 <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
注意项
点赞功能需要在应用中进行申请，申请的条件有页面中需要登录按钮，并且该登录按钮可用。申请通过后，该点赞按钮才会在页面中显示。
总结
上述为自己在工作中常用的一些Facebook的功能，在此借个地方做个总结。
github代码点击这里