2. 程式人生 > >Facebook的一些基本操作（網頁版）

Facebook的一些基本操作（網頁版）

阿新 • • 發佈：2019-03-28
else click 否則 body jin == 流程 按鈕 als

前期準備

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&amp;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的一些基本操作（網頁版）

相關推薦

Facebook的一些基本操作（網頁版）

else click 否則 body jin == 流程 按鈕 als 前期準備 1，註冊一次Facebook賬號，新建一個應用取到應用id 2，引進Facebook的SDK到頁面中： 在js中引進以下代碼，初始化 1 // facebook 2 win

串的基本操作（KMP版）

#include <iostream> #include <math.h> using namespace std; void StrAssign(char *T) { char ch; int i=1; cout<<"Please enter a str

完成雙鏈表的一些基本操作（連結串列的建立，雙向輸出，插入，刪除）

#include "stdafx.h" #include<stdlib.h> #include<stdio.h> #include<string.h> typedef struct dlink_node  {     int info;

Linux的基本命令列操作（精簡版）

Linux操作命令太過強大了，命令數量也居多在本文最下方有下載       Linux命令集文件資料供分享下載            下載地址：http://download.csdn.net/det

pandas一些基本操作（DataFram和Series）_4

協方差 first tac imp value 等級分 panda 二次排序 wap import numpy as np;import pandas as pd;kill_num=pd.Series([10,12,8,5,0,2,6])#擊殺數量#青銅1200-2000#

pandas一些基本操作（DataFram和Series）_2

randint isinf 向上 四舍五入 and [1] taf init base import numpy as nparr1 = np.arange(32).reshape(8,4)print(arr1)arr1 = arr1.reshape(-1);print(a

pandas一些基本操作（DataFram和Series）_3

重復值 包含 asc import afr and 對齊 是否 isn import pandas as pd;import numpy as np#通過一維數組創建Chinese = np.array([89,87,86])print(Chinese)print(pd.S

redis 在Windows下的安裝及基本操作（更新中~~~）

有用 redis 安裝 abc nbsp com inux eas pan 安裝目錄 Redis 安裝 Window 下安裝 下載地址：https://github.com/MSOpenTech/redis/releases。 Redis 支持 32 位和 64 位。這個需

docker 之 基本操作 （幹貨）

eight -s 本地 arch 進入容器 name height 官方 -- 1、下載鏡像：docker pull <name>2、查看本地鏡像：docker images3、查看官方鏡像：docker search <name>4、運行容器：d

mysql數據庫基本操作（表結構）

man hmm from 字符 my.cnf show blob 名詞 rst 裝包啟服務後會自動生成相關的配置文件 首次運行時會自動生成 root 初始秘密初始密碼在服務日誌文件中查找 grep -i password /var/log/mysql.log 進去mys

時間操作（JavaScript版）—頁面顯示格式：年月日 上午下午 時分秒 星期

XML ng- ava date led htm con edit innerhtml <!DOCTYPE html PUBLIC "-//W3C//DTD X

鏈表的基本操作（小測試）

cout 刪除節點 truct out 位置 malloc while 基本 eof 創建鏈表結構 typedef struct Node{ int data; Node *pNext;}NodeList; 初始化鏈表節點 Node *InitNode(Node*pNode

C語言_棧的基本操作（順序棧）

##本片部落格主要是順序棧的基本操作，包含以下內容： 初始化 入棧 出棧 判空 判滿 返回棧頂元素（棧頂元素不出棧） 返回棧頂元素（棧頂元素出棧） ###順序棧的初始化： 初始化順序棧時只需要讓棧頂等零 void InitStack (Stack *p) //初始化

GitHub（網頁版）簡明教程

GitHub（網頁版）簡明教程 GitHub官網：GitHub 一、註冊 進入GitHub官網，介面如下圖所示。 根據提示一步一步完成註冊。 二、使用 1、登入使用者主頁，介面如下圖所示。 2、點選上圖中的綠色按鈕“New repository”建立新的知識庫，點選後

git基本操作（git+tortoiseGit）

git基本操作 clone操作 commit、pull、push操作 showlog操作 clone操作 首次使用時，clone遠端庫到本地 ①　右鍵任意空白處，點選git clone開啟clone介面 ②　輸入git遠端庫地址和本地

字串的基本操作（資料結構）

         具體操作如下： 1.定義串： typedef struct   {     char data[Maxsize];     int length; } SqStrin

Python黑帽子-實現netcat基本功能（改進版）

前言 一個好的滲透測試人員，應該擁有強大的程式設計能力，而python就是一個很好的工具，我最近也再研究如何用python開發屬於自己的小工具，《python黑帽子》是一本很不錯的書籍。本系列博文是我在學習過程中，做的一些總結與拓展。 前置知識 netcat我就不過多介紹了，

時間操作（Java版）—獲取給定日期N天后的日期

        獲取給定日期N天后的日期 import java.util.Calendar; public class Test { public static void main(String[] args) { Syst

二叉樹的基本操作（資料結構）

二叉樹的基本操作（資料結構） 看了很多部落格許多大牛的文章，發現他們的方法即巧妙又簡便，果斷學習並理解。結合所學的知識，把二叉樹的基本操作羅列了下來。 廢話不多說，直接上原始碼，一些不容易理解的地方會有註釋，要是有問題也可以私信我QQ``:790567648交個朋友互相學習鴨~ --

[轉]Linux 基本操作（RM 刪除）

來自：http://billie66.github.io/TLCL/book/chap05.html Be Careful With rm! 小心 rm! Unix-like operating systems such as Linux do not have an undelete command.