Facebook應用程式開發教學1】用PHP輕鬆開發第一支App，傻瓜入

woff · 發表於 2012-4-20 16:30:29

標題說是傻瓜入門的原因是，這是我在Facebook上的第一支app，前後只花了兩小時，後來就沒改了，做為簡單入門的教學頗為適合，因此拿出來分享一下。

這是個讓你測驗你的英文程度是否有國小程度的小程式，是個生活學習類的有用ap。要進入狀況前，請先玩一下：測驗：國小畢業應該具備的單字基礎

1. 簡單解說一下這支程式的相關流程：
首先，要玩這支ap的fb user必須先授權給這支程式，也就是第一個畫面，同意之後才能開始玩。

接下來，程式自動從資料庫中找單字來出題，答題後告訴你剛剛答對還是答錯並且計算答題總數，這是一般的php。

每答對十題，程式跳出一個視窗，請你發佈一些訊息到你的Wall上面。

2. 要達成以上的需求，基本上非常簡單，首先你自己的php程式應該先寫好了，再做facebook的整合就很快了。
以下我用簡化的code假設你的主程式是這麼寫的，這只是個例子，真正的程式邏輯要靠自己來。在這個簡化的code裡面，使用者永遠需要選第三個選項，這樣就會答對，否則就會答錯，顯示答錯的訊息給你看。
logic的部分(controller)：

if ($_POST['choice']) {
if ($_POST['choice'] == '3') {
$msg="答對了";
} else {
$msg="答錯了";
}
}

複製代碼

presentation的部分(view)

<?php echo $msg; ?>

複製代碼

請開始作答
題目:water

<form method="post" action="test.php" name="test1" id="test1">
<div>
<div><input type="radio" name="choice" value="1" onclick="document.getElementById('test1').submit();">努力工作的，勤勉的</div>
<div><input type="radio" name="choice" value="2" onclick="document.getElementById('test1').submit();">…的，…所有的</div>
<div><input type="radio" name="choice" value="3" onclick="document.getElementById('test1').submit();">水</div>
<div><input type="radio" name="choice" value="4" onclick="document.getElementById('test1').submit();">粉筆</div>
</div>
</form>

複製代碼

3. 有了上述的核心程式，現在就有兩件事得做：
a .怎麼讓facebook user授權給你的這支程式哩？
b. 如何跳出提示訊息讓使用者發佈訊息到wall?
首先，到 http://www.facebook.com/developers註冊一個新的應用，這頁的右上角有個”Set Up New Application”接下來，就是設置這個新的ap的相關重要參數，最重要的是：
驗證裡面的　Post-Authorize Callback URL，當使用者授權ok後，fb就會把使用者導往這個網址，如果沒有特殊的設計，就填寫你的程式所在的網址，在我們的例子裡，假設我剛剛寫的那個php程式放在 http://stingtao.info/1/2/test.php，那麼這個欄位就寫http://stingtao.info/1/2/test.php
以及Canava裡面的　畫布頁面網址　與 Canvas Callback URL，第一個只要不跟別人的重複，隨便你寫，第二個如果你沒有特殊的需求，也是填寫你的程式所在的網址，例如: http://stingtao.info/1/2/test.php
其他設定請看真的例子：

存檔後，基本上facebook平台上的設定就好了，請注意抄下以下三個數值，後面會用到。

Application ID
API 金鑰
秘密

4. 下載 php client library, 網址在 http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz
我們假設你解開的路徑就是相對於test.php所在目錄下的facebook子目錄中。
5. 接下來，就超簡單了，直接先寫出結果吧，照著抄一定會work的，所以我直接用註解描述相關事情：
在剛剛的主程式加入紅字的部分:
logic的部分(controller)：

require_once('facebook/php/facebook.php');
$facebook = new Facebook('API 金鑰','Application Secret'); //把剛剛看到的數字取代相關金鑰以及秘密
$appid = 'Application ID'; //字串裡面換成你的 app ID
$fb_user = $facebook->require_login(); //就是這行，fb就會要使用者登入了
if ($_POST['choice']) {
if ($_POST['choice'] == '3') {
$msg="答對了";
} else {
$msg="答錯了";
}
}

複製代碼

presentation的部分(view)

<?php echo $msg ;?>

複製代碼

請開始作答
題目:water

<form method="post" action="test.php" name="test1" id="test1">
<div>
<div><input type="radio" name="choice" value="1" onclick="document.getElementById('test1').submit();">努力工作的，勤勉的</div>
<div><input type="radio" name="choice" value="2" onclick="document.getElementById('test1').submit();">…的，…所有的</div>
<div><input type="radio" name="choice" value="3" onclick="document.getElementById('test1').submit();">水</div>
<div><input type="radio" name="choice" value="4" onclick="document.getElementById('test1').submit();">粉筆</div>
</div>
</form>
<?php if (!empty($msg) ) {　//這段的意思就是只要答題，那麼就跳一個視窗出來問要不要publish 到 wall，這是facebook提供的javascript 函式，不用想太多，就用下去就會有效果
?>
<script>
var actionLinks = [{ "text": "想瞭解facebook ap的開發？到inside.com.tw", "href": "http://www.inside.com.tw"}];
Facebook.streamPublish('<?php echo $msg;?>',
'',
actionLinks,
'',
'剛剛答題的結果如下：',
'',
true
);</script>
<?php } ?>

複製代碼

6. ok,　打開瀏覽器指向你剛剛填的Canvas URL, 網址類似 http://apps.facebook.com/nciku_english這樣的東西，你就會看到熟悉的facebook應用程式使用流程了。

woff · 發表於 2013-2-1 19:30:13

牛X海海!!!

aojdh8b · 發表於 2013-3-28 02:47:30

今天沒事來逛逛，看了一下，感覺相當的不錯。

帳號		自動登錄		找回密碼
密碼				註冊

[教學] Facebook應用程式開發教學1】用PHP輕鬆開發第一支App，傻瓜入