Facebook Comments (留言外掛) 嵌入程式碼示範步驟

之前被這個功能弄得有點煩, 因為facebook改版速度有點快, 原本我設定好的程式碼變成無法使用, 於是我決定還是把步驟都寫下來好了, 雖然不知道什麼時候會過期,畢竟一切都以facebook developer Comments Plugin官方訊息為主!

步驟1.請建立屬於你這個網站的Facebook應用程式

(按這裡前往), 建立好可在此找到, 請記住 APP ID 並輸入你的網站網址 URL

步驟2. 取得你的帳號ID

再來就是要取得管理者也就是自己 Facebook帳號的 ID,方法如下:
Facebook查看個人首頁,如果網址是以下這種,那數字部分就是你的帳號ID
http://www.facebook.com/profile.php?id=數字

如果你的個人頁面網址是長的像以下這種
http://www.facebook.com/帳號名稱
代表你的個人首頁已經命名過了,那請將上面的「帳號名稱」代入以下的網址進入
https://graph.facebook.com/帳號名稱
進去後會看到「”id”:”數字”」,那串數字就是你的帳號ID。

步驟3. 修改網頁程式碼 <head>下

<meta property=’fb:admins’ content=’ 你的帳號ID ‘ />
<meta property=’fb:app_id’ content=’ 你的應用程式ID ‘/>

步驟4.加入SDK程式碼:

https://developers.facebook.com/docs/reference/javascript/

步驟5.加入Facebook留言程式碼

https://developers.facebook.com/docs/plugins/comments/

完成:

我覺得重點是SDK的加入, 還有APP裡面的網址要設定對!!

Facebook工具使用
Facebook Debuger: 可以清除你輸入網址的cache, 得到即時的網址狀態
Comment Moderation Tool: 你所建立的Facebook留言管理後台
Facebook應用程式

補充:除了OG語法以外,網頁特色圖片的標籤還有一個:
<link href=”圖片連結網址” rel=”image_src” type=”image/jpeg”>

發表迴響