目前位置
[轉]Facebook 應用程式開發教學(6/7)- 製作應用程式介面並開始『玩遊戲!』
作者:sLoB    發佈於:    文字:【】【】【
摘要: 2 share Perfect!這篇就是應用程式介面的核心教學了。 FB API 的好處在於我們可以將應用程式介面先寫好以後再嵌入 API 就能使用。 這篇先讓各位優先體驗在自己的應用程式平台上執行一個簡單的遊戲,之後再來詳細說明檔案內的程式碼功能。 經過這幾篇教學文的洗禮後,您就快要有自行開發 FB 應用程式的能力囉!

※下載 Facebook 應用程式範例檔※

這個範例檔是我自己做的,目的是透過簡單的範例程式來跟各位講解如何嵌入 API 內容以及具體參數控制。

請點擊下列網址來下載範例檔。

範例檔網址:http://www.mediafire.com/?9ibonv4kvct98o2

※若您在下載時產生疑惑的話,請參閱『 MediaFire 檔案下載教學 』!

 

 

※範例檔使用方法※

▲將檔案下載至您的電腦裡後,您的電腦內就會出現上圖中的這個 RAR 壓縮檔

將它解壓縮之後,會出現一個叫『 thunder-prob 』的資料夾,那個就是我們本次要用到的範例。

請將整個 thunder-prob 資料夾上傳到您的網站空間裡,並將 fb-library 資料夾放進同一個 thunder-prob 資料夾裡,這樣應用程式才能順利運作。

注意,網站空間記得要有支援 PHP 喔!

 

 

▲檔案上傳完成後,請記下你上傳的檔案 URL 路徑並回到我們第一篇提到的開發人員專區。

如果您在進入開發人員區之後並沒有顯示像上圖這樣的應用程式資訊的話,請點擊上圖中左邊綠框內的應用程式即可。

如果有顯示應用程式資訊的話,請繼續點擊圖中紅框內的『編輯應用程式』按鈕以進入編輯頁面。

 

 

▲由於我們已經將檔案上傳了,所以要修改應用程式的設定才能讓 Facebook 連上應用程式並對外開放使用權。

上圖標有紅色星號(*)的 Namespace 可能會出現已經被人註冊而無法使用的情況,這時請不用擔心,只要換一個沒有人使用的名稱即可。

只要應用程式在網站空間裡能正常運作,這個 Namespace 不用跟範例一樣也沒關係,畢竟一個 Namespace 只能給一個應用程式使用,不能重複到。

有綠色星號標記的『沙盒模式』請設定為『已關閉』,這樣就可以開放權限給其他人使用。

Canvas 網址(URL)的地方請改成你的應用程式實際存放位置,像我是將範例放在本站的主目錄裡,所以網址就是『 http://streamer-forest.tw/thunder-prob/ 』。(後面不能加 index.php 喔!)

加密 Canvas 網址的部分則是將 Canvas 網址的 http 改成 https 並整個抄下來就可以了。

雖然這樣的作法在遇到使用 SSL 加密連線的使用者時會失效,不過這個只是範例而已,有需要的話我再另外告訴大家一個可以將應用程式轉換成能支援 SSL 使用者的服務。

都改好以後,請按下最底下的『儲存』來儲存設定。

 

 

▲儲存設定後,請再次回到應用程式的資訊頁面,並將焦點轉移到畫面中的『畫布頁』網址那一欄。

這個網址就是你的應用程式在 Facebook 裡的主要連結,使用時一定要從這個網址進入才會有 Facebook 的網站框架。

確定前面都設定完成後,請將你自己的這個畫布頁網址給複製起來並貼到瀏覽器新分頁的網址欄中,就可以正式使用應用程式了!

 

 

▲這個畫面有沒有很熟悉呢?

沒錯!能看到這個授權畫面就代表我們的應用程式平台能正常運作!

接下來,就跟您平常時一樣,火速按下『玩遊戲』按鈕吧!

左下角的『所有人』清單按鈕則可以讓您自行調整那些人可以看到透過該應用程式所發佈的塗鴉牆貼文。

 

 

※我只是來湊熱鬧的,但我也想玩玩看!※

沒問題!本站的 FB APP 範例檔也會保留。

網址就是範例中的畫布頁:http://apps.facebook.com/thunder-probability/

我原本也有做一個海賊王的問答測驗 APP,有興趣的人可以玩玩看!

網址:http://apps.facebook.com/one-piece-test/

 

 

以上!應用程式介面教學就到這邊!

之後再來仔細說明 index.php 內到底藏了什麼東西讓 Facebook 能讓它跟使用者互動!

瀏覽 (8881) | 評論 (0) | 評分(0) | 支持(0) | 反對(0) | 發佈人:sLoB
將本文加入收藏夾
Search
美人時計
文章評論
最新評論
更多評論 發表評論
發表評論
您的評價
差(1) 一般(2) 好(3) 很好(4) 非常好(5)
評論標題
評論內容
驗 證 碼
看不清?更換一張
匿名發表 

© 2011 slobgame.net   website templates by styleshout      Powered by Wayhunt WebSite System 1.5