Facebook的一些基本操作(網頁版)
前期準備
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) { 11let 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代碼點擊這裏
Facebook的一些基本操作(網頁版)