不明究理

如果排版有問題

請看http://www.inside.com.tw/11/28/%e6%95%99%e5%ad%b81%e7%94%a8php%e9%96%8b%e7%99%bcfacebook-ap-%e5%82%bb%e5%ad%90%e9%83%bd%e6%9c%83%e5%af%ab%e7%9a%84%e7%ac%ac%e4%b8%80%e6%94%affacebook-ap

標題說是傻瓜入門的原因是，這是我在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平台上的設定就好了，請注意抄下以下三個數值，後面會用到。

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應用程式使用流程了。