昨天正好跟學弟聊到Facebook上的應用程式開發,
今天來試試看安裝個範例程式瞭解一下其情況,
Facebook應該有支援多種語言的開發,
這邊先以PHP為例子. (配合Facebook網站上所提供的)
1. 準備工作
(1) 需要一台連上網路電腦, 有執行Web Server+PHP+php-curl
一般Web Server+PHP好解決, php-curl需要額外安裝, 在Ubuntu上的話可以執行 apt-get install php5-curl 就可以完成.
(2) 需要一個Facebook帳號
(3) 下載Facebook php SDK: http://github.com/facebook/php-sdk/tarball/master
2. 到Facebook開發者頁面註冊與認證
(1) 登入Facebook並連到 http://www.facebook.com/developers/ , 會顯示是否允許執行, 只能點Accept
(2) 建立一個新的應用程式
(3) 建立時需要做一個認證, 有兩種認證模式, 手機與信用卡
這認證有許多奇怪的bug(可參考Facebook Platform Developer Forum / [TLK]Authentication Guide), 所以假如你想用此Facebook帳號與手機號碼認證的話, 過程要有耐心謹慎一點, 因為Facebook的手機傳簡訊"很慢" (Google的快很多), 我就是太急了, 結果造成我常用的帳號無法用手機號碼認證, 只好再去申請另外一個帳號來認證, 且一個手機只能認證一個帳號. 至於信用卡... 別傻了, 這麼鳥的認證系統, 我哪敢把信用卡給他, 且這認證與Facebook主系統的資料竟然不同步...且我寫mail給Facebook客服也沒得到任何回應, 只能自己想這奇怪的解法.
總之就是選好國別, 填上手機號碼去除最前面的0, 再來就是靜待簡訊認證, 盡量不要關掉視窗, 不然回頭會找不到...
3. 認證完畢開始程式部署與設定
(1) 認證完畢後, 會出現視窗填應用程式名稱, 與同意Facebook條款
應用程式名稱先隨便填個example或myapp均可, 之後可以修改
(2) 部署sdk到裝好Web Server的電腦
將Facebook SDK下載下來後, 在Server上解壓縮, 並放到你想放的目錄, Facebook SDK裡面有三個目錄: examples(主程式, 裡面主要是example.php), src(需用到的Facebook函式庫, facebook.php), test(測試用), 比如我放的情況是這樣:
- 先在Web Server的主要放網頁的目錄先建立一個空的目錄
mkdir /var/www/facebook
- 再來把src與test目錄放進去/var/www/facebook
mv src /var/www/facebook
mv test /var/www/facebook
- 把example.php改名成index.php到/var/www/facebook
mv example/example.php /var/www/facebook/index.php
(3) 修改index.php, 把API KEY與函式庫路徑修正
在應用程式的主要顯示畫面比較重要的兩個地方就如下所標:
先點選最底下會有一個範例, 可以參考, 主要就是要你修改index.php主程式, 會類似如下:
基本上複製貼上取代index.php對應的部分即可,
但因為我在上面改過facebook.php的路徑,
所以這邊要把require_once那行改成require_once 'src/facebook.php';
視你的情況修改.
(4) 先測試看看是否可正常執行
有了API Key, 也裝好主程式了, 接下來其實可以先試試看應用程式是不是正常執行, 可以直接連你的Web Server試試看主程式是不是ok, 用瀏覽器開http://你的網站網址/facebook/index.php
假如成功的話會看到這樣的畫面:
一般會出現的錯誤都是沒裝php-curl, 如下:
Ubuntu的話就如上面提到的用apt-get install php5-curl裝一下就好了.
(5) 設定Facebook上要發佈的網址
回到應用程式的設定主畫面, 點選右上的編輯設定:
比較重要的有三個地方,
- 網站->Site URL: 這邊填入http://你的網站網址/facebook/ (不要加index.php)
- Facebook整合->Canvas Page: Facebook裡應用程式連結
也就是http://apps.facebook.com/開頭的那個, 我們會常看到如有名的CountryStory在Facebook中就會連到: http://apps.facebook.com/countrystory/ 這樣, 所以可以自己取一個跟別人不重複的名稱
- Facebook整合->Canvas Site: 真正程式所在位址
上面的Canvas Page是讓用的人去放在Facebook書籤用的, 這個網址是真正存放應用程式的位址, 在我們這邊也就是: http://你的網站網址/facebook/
(6) 實際在Facebook中執行
在來就可以直接在Facebook中連剛剛設定的Canvas Page的網址看看成果, 這簡單的範例程式可以得到登入使用者的基本資訊, 一如一般Facebook程式執行, 需要允許權限才可以執行:
執行的結果就如上面我們實際連到我們主程式網站上一樣, 旁邊多了Facebook廣告跟上面多了Facebook的導覽列.
4. 其他
應用程式的設定也可以將寫好的應用程式加上小圖示發佈到Facebook應用程式目錄(玩真的), 他有規定要至少五人使用, 且需要10個月都有人用, 不然會被移除, 簡單範例教學到這邊, 其他的有空再繼續測試.
5. 補充 (2012/02/01)
最近又把Facebook SDK拿起來玩一下, 主要是兩個問題
(1) 假如要將寫好的Facebook App加到粉絲團, 需要利用底下網址:
Facebook Page administrators can add your app directly to their Page by navigating to the following URL: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL, where YOUR_APP_ID and YOUR_URL can be found in your app settings.
參考文件: https://developers.facebook.com/docs/appsonfacebook/pagetabs/
(2) 中文顯示會有問題
首先要確認網頁中文字的編碼,
再來在顯示head中要加入: (視網頁編碼)
<meta http-equiv="Content-Type" content="text/html;CHARSET=utf-8">
沒有留言:
張貼留言