【Facebook應用程式開發教學1】用PHP輕鬆開發第一支App,傻瓜入門術!

評論
評論

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

the_1st_facebook_app

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


1. 簡單解說一下這支程式的相關流程:

首先,要玩這支 ap 的 fb user 必須先授權給這支程式,也就是第一個畫面,同意之後才能開始玩。

1

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

2

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

3

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

其他設定請看真的例子:

4
5

存檔後,基本上 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": "https://www.inside.com.tw"}]; Facebook.streamPublish('<?php echo $msg;?>', '',  actionLinks, '', '剛剛答題的結果如下:', '', true );</script>  <?php } ?> 

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


精選熱門好工作

賣家關係維護專員

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$20,000

產品經理 / Product Manager

奔騰網路科技有限公司
臺北市.台灣

獎勵 NT$20,000

Campaign Associate 線上活動策劃專員

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$20,000

評論