Element XD lab
哥教的不是CG,是偷雞
快速導引

【Blogger + FB】安裝並管理facebook留言板

安裝facebook留言板說簡單也不太簡單,有時候幾個小地方難搞令人沮喪,這裡整合了幾篇教學的精華部分,一次以圖解說明如何安裝與管理。



基本步驟有四
1.取得fb:app_idfb:admins的兩串數字
2.將上面兩串數字替換掉以下對應的數字,置入<head>這一行之後
<meta content='xxxxxxxxxxx' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxxxxxx' property='fb:app_id'/>
3.在<body 這一行後面置入代碼
4.選擇放留言板的位置,置入代碼


如果之前已經安裝過Facebook的外掛,通常前三步驟都已經完成了,直接執行第四步即可,如果是第一次安裝Facebook的外掛,就請從頭做一次,之後的Facebook外掛,通常就直接執行第四步驟就好了。



1.取得fb:app_idfb:admins的兩串數字

首先到這邊https://developers.facebook.com/apps
按下右上方 +建立新的應用程式




跳出以下畫面

應用程式名稱:填入自己看得懂得即可
應用程名稱空間:他的namespace我一直搞不太懂,可填可不填
App Category:選擇一個接近的屬性就可以了



為了確定你是個人類,請填入驗證碼,然後繼續




以下這一頁有三個地方需要注意,
App ID:這一串號碼,就是fb:app_id
App Domains:請輸入專屬網址,不需要http://,如果是沒有專屬網址,就輸入blogspot.com
以Facebook登入網站\網站位址(URL):輸入完整的網址,或者沒有專屬網址,請輸入blogspot的網址,比方http://abc.blogspot.com/



我們在facebook都有個人專屬網址,可能是一串代號,也可能是之前編輯過有意義的文字,總之,先到個人頁面取得網址,


然後將www替換成graph



出現這個畫面


其中"id": "xxxxxxxxxxx",這一串就是管理者id,也就是fb:admins


以上兩個步驟得到了兩串數字
fb:app_id
fb:admins




2.將上面兩串數字替換掉以下對應的數字,置入<head>這一行之後
<meta content='xxxxxxxxx' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxxxx' property='fb:app_id'/>



接下來,範本編輯HTML




在<head>後面,填上
<meta content='xxxxxxxxxx' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxxxxx' property='fb:app_id'/>

其中fb:admins以及fb:app_id前面的數字,就是前面兩個步驟得到的數字,要換成你的喔






準備安裝留言板,請到這裡
https://developers.facebook.com/docs/plugins/comments/

如下圖
URL to comment on:填上網址,按下enter之後,下方就會出現留言板預覽,如果一切順利,就會看到「版主檢視」跟「設定
Width:可不填,預設約為555px寬,有需要的話之後再修改也可以



3.在<body 這一行後面置入代碼


按下Get Code之後,會出現這個畫面,上面這一大塊複製起來,範本編輯HTML


貼在<body這一行之後,如下圖


貼完之後按下儲存範本,十有八九會出現紅色警示文字:剖析XML時發生錯誤XXOO
這時候以amp;appid取代appid再儲存即可




4.選擇放留言板的位置,置入代碼



下面這一塊是留言板的框架



將這一串代碼先做修改
<div class="fb-comments" data-href="http://www.thephilko.com/" data-colorscheme="The color scheme used in the plugin" data-numposts="5" data-width="The pixel width of the plugin"></div>
深黃色的字請以expr:href='data:post.url'更換,才能正確抓到每一篇文章的位置,紅色的The pixel width of the plugin可以更改寬度,比方填入650px。



或者可以直接使用這一段精簡過的(寬度是符合我的版型)

<div class='fb-comments'  data-numposts='5' data-width='700px' expr:data-href='data:post.url'/>



重點在這裡,留言框的位置,摸索了很久終於找到,這藏在一個神秘的區塊。


首先搜尋到<div class='post-footer-line post-footer-line-3'/>

然後觀察這一區塊的結尾</div>

下一行應該是</b:includable>

將剛剛的<div class='fb-comments'  data-numposts='5' data-width='700px' expr:data-href='data:post.url'/> 
前後加判斷式

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments'  data-numposts='5' data-width='700px' expr:data-href='data:post.url'/>
</b:if>

放在上面兩行中間





文字敘述複雜,請直接看下面示意(點選可放大)

<div class='post-footer-line post-footer-line-3'/>
中間有不定數量的代碼
</div>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments'  data-numposts='5' data-width='700px' expr:data-href='data:post.url'/>
</b:if>


</b:includable>





基本上留言板已經安裝完成了,趕快測試看看。



然後其實我要含淚介紹這個,剛剛才發現有神人作出這個工具,只要取得了 
'fb:admins'
'fb:app_id' 
之後,進入此頁操作,就非常快能達成Facebook留言框,而且不衝突,怎不早點搜尋到啦吼!

http://tw.piliapp.com/blogger-template/facebook-comment-plugin/





當文章多,留言散落在各處的時候,就可以到這裡集中管理facebook的留言
https://developers.facebook.com/tools/comments?id=xxxxxxxxxxxxx
深黃色數字請換成自己的fb:app_id

管理界面大概長這樣

預設的留言都是自動公開,如果想要公開前先經過審核,可以在上圖的右上方「設定」處,打開以下畫面,將預設每一篇貼文都公開,改成讓我在每個留言顯示前先審核




完工
技術提供:Blogger.

聯絡


聯絡表單

名稱

以電子郵件傳送

訊息

© thephilko.com All Rights Reserved