就是愛分享
Facebook成長如此迅速,很大的原因在於它提供了源源不絕的應用程式與小遊戲,讓人身不由己地黏在上面無法自拔。對開發者來說,Facebook也提供了十分親和的開發環境,能夠快速上手。只要具備基本程式能力,照著後面所介紹的步驟就能建立第一個Facebook應用程式!

事前準備
1.PHP開發環境
2.應用程式的Hosting環境

Facebook API目前有三個Libraries可以用來開發Facebook應用程式:PHP、Javascript、AS3。如果開發純html的應用程式就要用Javascript跟PHP,即使是AS3開發,可能還是會遇到需要server端跟Facebook溝通的情形,所以PHP Libraries可能也少不了。

AS3的Libraries叫做ActionScript 3.0 Client Library for Facebook Platform API。

建立新的Fackbook應用程式

1.開啟Facebook的開發者網頁http://www.facebook.com/developers/,登入後點選右上角的[Set Up New Application],建立一個新的Facebook應用程式。



2.替應用程式取一個名稱,同意使用條款後[儲存變更]。



3.成功建立新的應用程式後,您會取得一組獨一無二的API金鑰與Application Secret。找到並點選下方的example code超連結,稍後我們將使用這段程式碼為例,建立第一個應用程式。





4.複製範例程式碼並存檔為index.php。其中,特別注意下列兩行程式碼是否為自己的API金鑰與Application Secret:

$appapikey = 'YOUR APP API KEY';
$appsecret = 'YOUR APP SECRET';



5.下載並解壓縮官方的PHP client 函式庫後,將index.php放到[your_location]\facebook-platform\php目錄中,如下圖:



註:熟悉PHP語法的開發者也可以修改require_once,自行更改目錄結構。

6.將整個php資料夾deploy至您的伺服器。此時,若您在瀏覽器中直接開啟網址[your_hosting_location]/index.php,出現的竟然不是程式內容,而是導向Facebook並出現開發中的訊息,就表示您已正確地完成了上面的步驟,剩下幾個簡單設定,就可以完成我們的第一個Facebook應用程式了!

我們已經在伺服器上deploy了範例程式,接下來的步驟就是讓Facebook知道這支程式的所在位置。

編輯應用程式設定

1.在[我的應用程式] –> [編輯設定]頁面左邊欄,點選[畫布(Canvas)]。找到並輸入畫布頁面網址以及Canvas Callback URL兩欄。這裡要注意的是,畫布頁面網址欄位只能輸入小寫英文字母、'_'及'-'字元,不接受數字。Canvas Callback URL則是您程式所在位置的網址,例如:http://[yourdomain]/index.php,完成後[儲存變更]。



2.若設定正確,則出現成功訊息:



3.再次連結應用程式所在的網址,映入眼簾的是如此熟悉的畫面:



大功告成!

用力地按下[同意]後,畫面上出現了我們的第一支範例程式執行結果 ─ 列出使用者的25個朋友id。當然,Facebook應用程式的能耐可不僅止於此,更多的功能都寫在API裡,您可以在這個範例基礎上繼續補強並完成您的第一支Facebook應用程式。



雖然Facebook官方主要支援PHP版本的API,但對其他程式語言較拿手的開發者也可以到這裡尋找適合的非官方API。對Google App Engine情有獨鍾的開發者請使用支援Python的PyFacebook或其他Java APIs,經實做證明,GAE是可以拿來host Facebook應用程式的。另外提供一個實用的GAE小技巧:開發過程中,將[編輯設定]的Canvas Callback URL欄位中改為http://127.0.0.1:8080,直接連至自己的本機測試;待程式完成後再改為正確的網址即可,如此可大幅縮短開發時間喔!
0 Responses