2010年1月27日 星期三

如何利用Facebook帳號製作部落格的留言板---API金鑰申請篇(Blogger系統用)


2011.3.18更新,
因為Facebook改版,此方法已不適用。

最近看了重灌狂人的文章在部落格嵌入Facebook留言板,借3.5億個會員讓流量破表!(Facebook Connect),發現了這個Facebook Connect的好東西,利用Facebook Developers(開發工具)來跟部落格做結合,雖然他介紹的留言迴響(意見箱,Comments Box)無法使用在一般的部落格系統,但綸太郎研究了一下,是可以套用在Google Blogger的,單獨設定為類似Cbox功能之類的留言板。

只是這個功能目前綸太郎研究過後,有幾點無法突破的困難,但還算堪用,還是介紹給大家實驗,看看有沒有人有更厲害的整合方式,這個是限於Google Blogger使用,但如果你的部落格系統可以修改後台Html及使用Java Script語法,也是可以用的,至於自架的應該參考Briian的文章即可。

注意事項:
1、首先你要有一個Facebook的帳號
2、留言版最好設定只在首頁出現,因為其他頁面的留言會分別在各頁面出現,所以你要當作個別文章的迴響功能也是可以的(需用widget放在本文下方,目前還無法整合入單篇文章中),因為少了Rss的功能,所以無法彙整,這個單元會在下一篇文章介紹。
3、如果你的部落格已經申請專有的粉絲專頁,建議是不要使用比較好,因為兩者有重複的地方,綸太郎的解決方式以下會說明。

【第一步】:如何申請你的FACEBOOK 應用程式API金鑰

登入Facebook帳號後,進入Facebook 開發工具的應用程式
http://www.facebook.com/developers/
建立你的開發程式
http://www.facebook.com/developers/#/developers/createapp.php
如果你沒有自己的粉絲專頁的話,可以鍵入你自己的部落格名稱,這時也會順便建立你的粉絲專頁,如果已經有的話,最好是另訂名稱,不然你會發現你的部落格有兩個粉絲專頁(會有點麻煩就是了)


在這裡我給他的名稱是,綸太郎的應用程式,點選"同意",然後按下建立應用程式,其實名稱空白也可以,他也會跳到下一頁就是,我們的目的只是要有一組API的金鑰

這時你會發現畫面跳出了你的應用程式的基本資料檔,
應用程式ID xxxxxxxxxxxx (這是你的應用程式的profile_id)
API金鑰 xxxxxxxxxxxx (很多小工具widget 會用到)
秘密 xxxxxxxxxxxx (決不可透露)


這個應用程式ID就是把滑鼠放在你的頁面上的大頭相片時,你可以看到狀態列顯示的數字,這個在用FBML工具來製作你的Facebook粉絲歡迎頁面---撰寫篇,綸太郎曾經提到。

然後下面有個聯外通,聯外通網址輸入你的部落格網址即可,下面的聯外通標誌可以自行上傳圖片,然後按下儲存即可。


這時你可以按下上方的回到我的應用程式,就可以看到你自己的應用程式的全部資料,如果想刪除這個API可以按下最下方的刪除鍵即可,


如果想修改裡面的內容,則是按下編輯設定,裡面的詳細內容,綸太郎還不是很了解,而按下查看應用程式專頁,則可瀏覽你的頁面。

設定好了,以後要查看你建立的應用程式,一樣連結到
http://www.facebook.com/developers/
就可以發現在右手邊有你設立的應用程式的小方框,按下more,就可以進入修改或是查閱。


以下就是你的應用程式的頁面,和粉絲頁面幾乎是一樣的,當然粉絲滿25人你也可以申請固定網址的,到http://www.facebook.com/username/這裡去申請即可。

以下就是利用Facebook應用程式申請完成的頁面


如果在留言板上留言,則會顯示在你個人Facebook帳號的塗鴉牆上(如果有勾選在我的 Facebook 個人檔案上留言的話),這裡可以看到個人帳號的塗鴉牆上超連結是連到應用程式,而非你的部落格,不過上方有顯示部落格的網址(下圖藍色虛線處),這就是目前我遇到的困難,不過如果在這個應用程式裡加上你自己部落格的宣傳,再導引讀者回到你的網頁上去也是可以的(如上面那張圖),另外如果你在個別頁面都有設置這個應用程式的留言板,這裡也可以視為一個匯集意見的園地。


其實你都不管Facebook應用程式的內容也是可以的,只是想為自己的部落格加上一個留言板功能,這樣就行了,只是綸太郎很龜毛,希望能有兩全其美的方式,有高手知道怎樣將傳自綸太郎的應用程式的連結變成我的部落格的連結,煩請留言告知。

介紹到這裡,對這個留言板還有興趣的朋友,下篇會告訴大家如何將Facebook留言板(Comments Box)放到Google Blogger的部落格上,因為文章真的太長了,要分上下兩篇來介紹,有安裝的朋友也可以互相交流意見討論。

下篇請看,
如何利用Facebook帳號製作部落格的留言板---安裝篇

參考資源:
在部落格嵌入Facebook留言板,借3.5億個會員讓流量破表!(Facebook Connect)
Comments Box - Facebook Developer Wiki

2 則留言:

  1. 請問API是否需要信用卡才能申請??
    另外可以請問你旁邊WIGDET的寬度該去哪邊調整呢?
    問題很多抱歉
    另外可以問問你標頭那邊
    首頁 FACEBOOK留言板 的分頁功能 是有內置的小工具?還是有獨特的語法呢?
    不好意思 !!方便給予一些指導?感謝

    回覆刪除
  2. 1、不用
    2、後台,設計→範本設計工具→版面配置→調整寬度,拉曳右側欄的指標即可。
    3、參考這篇 Blogger Pages分頁功能讓您輕鬆有個導覽列

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能