EZTABLE IDEAS 是 EZTABLE 成員揮灑熱情和大家分享專業及創意的網誌。 EZTABLE 讓消費者 24 小時都可以在網路訂位全台灣最優質的餐廳,同時提供餐廳經營者 e 化的訂位管理系統 (雲端、iPad、智慧型手機)

Facebook App 簡易開發教學

九月 25 2012 Published by under Design, Engineering

有鑒於最近參加了 Facebook Developers World Hack <Taipei>,駭客們的程式馬拉松 party,一個比賽一天八小時內,你或你的團隊能完成什麼作品上台 demo 的活動,我在這場活動裡面學到許多有關 Facebook App 的基本開發應用,特此分享給大家 🙂

要怎麼開始開發 Facebook App 呢?分為以下5步驟。

  1. 註冊成為 Facebook Developer 的一員。
  2. 創立新的 Facebook App。
  3. Setup Facebook App。
  4. 選擇你要開發的 Facebook App 種類。
  5. 去 Canvas URL 查看 Facebook App 吧!

註冊成為 Facebook Developer 的一員

竟然要開發 Facebook App,那當然要先成為超過兩百萬的 Facebook Developer 的一員,我們可以去 Facebook Developers 註冊。註冊時會要求你填入相關資訊,照著表單填就可以了。

創立新的 Facebook App

完成註冊後,右上角應該會出現一個 “Create New App”,點擊它就可以開始創立 Facebook App 囉。

App Name 的長度要介於 3 ~ 32 個字元之間,其中絕對不能出現有關  Facebook 的相關字眼,像下面這張名字就會被判斷 failed。

當你需要使用 Open Graph 的 Action 時,你才需要填入 App Namespace,這邊我們可以先不管他。

Setup Facebook App

創立了新的 Facebook App 後,馬上就會看到一個看似複雜的表單:

Diaplay Name 就是當別人使用這個 App 時,他會看到的名字。Namespace 同上述理由,先不管他。App Domains 就是你自己網站的網址,只有這個 domain 下的網頁 Facebook 才會允許該網頁與 Facebook App 串接,如果是 local 開發可以填 localhost 就好。

Category 就是你這個 App 的類別,填寫正確可以幫助 Facebook 分類你的 App,你總不想做一個親子同樂 App 結果被分類到賭博電玩類別裡面去吧… Hosting URL 與 Sandbox Mode 都使用預設值即可。

選擇你要開發的 Facebook App 種類

填完基本 App 資訊後,下面會有5個類型可供選擇,分別是:

  • 最簡單的使用 Facebook 登入你的網站。
  • 在 Facebook 上的網頁。
  • 手機版網頁。
  • 蘋果的 iOS App。
  • Google Android 的 App。
  • Facebook 粉絲頁。

這邊我們來試試看在 Facebook 上建立起自己的網頁 App 以及讓 user 可以在我們自己的網頁上登入。

Site URL 填寫你自己的 domain, 以後 Facebook 就會允許用戶在這個 domain 上使用你新開的 App 登入了。

Canvas URL 就是你在 Facebook 網站上要呈現的網頁(會以 iFrame 的方式呈現),必須是個資料夾。Secure Canvas URL 我們可以先在 http 的後面加個 s 變成 https 暫時騙過 Facebook 即可。(反正是 local 開發…)

去 Canvas URL 查看 Facebook App 吧

都輸入完成且儲存成功後,回到你的 App 資訊頁面。

 App ID/API Key 以及 App Secret 都是以後你要使用 Facebook API 時重要的密碼,絕對不能洩漏出去。

我們要看的是 Canvas Page:這邊會出現一個 Facebook App 的網址(請原諒後面被我塗掉了),把它複製下來貼到網址列去瀏覽。

 鐺鐺鐺鐺!簡單的 Facebook App 網頁就完成啦!

是不是很簡單呢,快去為自己的網站開一個 Facebook App 吧 🙂

歡迎訂閱 EZTABLE Ideas,讓我們的 idea 與你的 idea 迸發出創意的火花吧!

後記:最近 Facebook App 頻頻改版,導致原本 App domain 上能填的 http://localhost/ 網址都無法用了,已經有許多 developer 向 Facebook 反映這個 Bug, 相信不久就能解決。所以請原諒我中途跑去使用以前開的 App… Orz

Kai


Related Posts Plugin for WordPress, Blogger...

No responses yet

發表迴響