Facebook API Example - 客製化 Quiz 測驗教學筆記

woff

雖然已經有一些制式的製作方式：

Movies Make a Quiz
• How Well Do You Know Me Quiz Maker
  

等等的，皆可以透過 Quiz 關鍵字在 Facebook 查詢到許多跟測驗相關的應用。大部分是已經製作好流程的，只要填寫一下問題、結果，就可以很快地完成一張測驗表。然而，有時候要推服務時，可能會用到許多 Javascript API ，往往那些 Quiz 製造機只適合用來填寫文字跟圖片，這時候就還是得靠人工方式了！沒錯，就是要寫程式！此例以 PHP 跟 Javascript 為範例實作。
製作一個 Quiz 的流程，主要可以分成四部份：

• 顯示問題及收集答案
• 顯示結果前，詢問是否要邀請朋友參與
• 顯示結果和留言
• 將結果發佈至塗鴉牆
  

整體上可以簡化到兩步，就是顯示問題收集答案跟顯示結果，但這樣會使得最後一頁要做的事很多，我做了一兩個制式的測試，發現還有每一個問題就要換一個頁面，這種理由多半是要顯示廣告用的，使得每到一頁就多了一次廣告流量。我覺得分成四部份應該還滿恰當的，再細分下去有點不妥，除非是介面的設計或是問題太多。
在實作上，依上述分類可以分成 3 個頁面，第一個頁面負責顯示問題跟收集答案；第二個頁面則是提供使用者便利地點選朋友寄送邀請函；第三個就是顯示結果，以及留言的顯示，至於第四部分則可在第三頁搭配 Javascript 來提供發送，故可以少一個頁面。
流程：

新增與設定 App

• 可參考 Facebook API Example - 第一次使用、範例和教學筆記
• 此例採用 FBML 而非 IFRAME 模式
  
顯示問題及收集答案
• 一般的 HTML Code
  
顯示邀請朋友參加的介面
• FBML 版
  
  • 1. <fb:fbml>
       
    2.         <fb:request-form action="?status=2" method="POST" invite="true" type="MyAppName" content="快來挑戰！<?php echo htmlentities("<fb:req-choice url=\"http://apps.facebook.com/my_app_name/\" label=\"Authorize My Application\"") ?>"
       
    3.                 <fb:multi-friend-selector showborder="false" actiontext="邀請朋友參加此測試">
       
    4.         </fb:request-form>
       
    5. </fb:fbml>

    複製代碼
    
    
• Iframe 版
  
  • 1. <fb:serverfbml style="width: 100%;">
       
    2.     <script type="text/fbml">
       
    3.         <fb:fbml>
       
    4.             <fb:request-form action="?status=2" method="POST" invite="true" type="XFBML" content="快來挑戰！<?php echo htmlentities("<fb:req-choice url=\"http://apps.facebook.com/my_app_name/\" label=\"Authorize My Application\"") ?>"
       
    5. 
       
    6.                 <fb:multi-friend-selector showborder="false" actiontext="邀請朋友參加此測試">
       
    7.             </fb:request-form>
       
    8.         </fb:fbml>
       
    9.     </script>
       
    10. </fb:serverfbml>

    複製代碼
    
    
  
  
• 顯示結果後，提供 Post 到個人塗鴉牆(採用舊式申請 template 的方式，facebook 已打算在 2009/12/20 停用此功能，此例先保留給舊式範例，新式用法歡迎參考：發佈到個人塗鴉牆的樣版設定教學)
  
  • FBML
    
    • 1. <script type="text/javascript">
         
      2. var template_id = number_id;
         
      3. var user_message_prompt = 'What do you think of this book?';
         
      4. var user_message = {value: 'write your review here'};
         
      5. 
         
      6. var template_data={
         
      7.         'test_name':'Taipei' ,
         
      8.         'test_result':'OK',
         
      9.         'images':[{'src':'http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg', 'href':'http://tw.yahoo.com/'}]
         
      10. }
          
      11. var body_general='';
          
      12. var target_ids = '';
          
      13. 
          
      14. var continuation = function() {
          
      15.         // do something
          
      16. };
          
      17. Facebook.showFeedDialog( template_id, template_data, body_general, target_ids , continuation, user_message_prompt, user_message );
          
      18. </script>

      複製代碼
      
      
    Iframe
    • 1. <script type="text/javascript">
         
      2. FB_RequireFeatures(["XFBML"], function(){
         
      3.     FB.Facebook.init( 'appapikey' , '/path/xd_receiver.htm' , null );
         
      4.     var template_id = number_id;
         
      5.     var user_message_prompt = 'What do you think of this book?';
         
      6.     var user_message = {value: 'write your review here'};
         
      7. 
         
      8.     var template_data={
         
      9.             'test_name':'Taipei' ,
         
      10.             'test_result':'OK',
          
      11.             'images':[{'src':'http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg', 'href':'http://tw.yahoo.com/'}]
          
      12.     }
          
      13.     var body_general='';
          
      14.     var target_ids = '';
          
      15. 
          
      16.     var continuation = function() {
          
      17.             // do something
          
      18.     };
          
      19. 
          
      20.     FB.Connect.showFeedDialog( template_id, template_data, target_ids , body_general, null, FB.RequireConnect.require, continuation, user_message_prompt, user_message);
          
      21. </script>

      複製代碼
      
      
  • 至於 template_id 部分，則是要先去製作樣版
    • http://developers.facebook.com/tools.php?templates
      
    
    
  新增留言板
  • 1. <fb:fbml>
       
    2.         <fb:comments xid="a_unique_id" showform="true" canpost="true" candelete="false">
       
    3.                 <fb:title>請留下寶貴的意見</fb:title>
       
    4.         </fb:comments>
       
    5. <fb:fbml>   

    複製代碼
    
    
  
  

常見問題：

什麼是 templates
• 這是一個預先刻劃好的樣版，可重複使用，只需要填寫關鍵字就行了！最大好處是可以很漂亮的排好擺在塗鴉牆上，而搭配關鍵字的變動，就可以拿來當做測試結果的顯示，好比如 A 得 90 分、 B 得 75 分等等，就只要把關鍵字弄成可變動囉！詳細部份可以到 http://developers.facebook.com/tools.php?templates 玩玩，可以為自己的應用程式製作專屬的樣版，而上述就是一個使用樣版的塗鴉牆例子。
• 採用舊式申請 template 的方式，facebook 已打算在 2009/12/20 停用此功能，此例先保留給舊式範例，新式用法歡迎參考：發佈到個人塗鴉牆的樣版設定教學
  
無法顯示 templates
• 要特別留意傳給 templates 的資訊，連 images 變數中的 src 位置不存在也會導致不會顯示，當初以 IE 測試，發現很久都沒顯示訊息，改用 Firefox 才蹦出 src 位置不對的消息，另外，還可以參考下面連結的 showFeedDialog 的相關文章，有的跟隱私有關。
  
使用 fb:request-form 之 略過 / Cancel 問題
• 當第二頁採取呈現 Invite Friends 頁面時，當使用者點選 [略過] 或 [寄送邀請] 時，頁面將導向於 action 的位置，然而，有時我們會使用 GET 的方式來掌控頁面流程，但有些時候不希望將訊息暴露在瀏覽器的 url 資訊上，此時可以解決的方式是將資料改採用 POST 傳遞
  • <input type="hidden" name="status" value="2" />
  • 並多加個 <fb:request-form-submit />
    
  留意的是當使用者點選 [略過] 或 [Cancel] 時，這份資訊卻不會送給 action 所指定的頁面，最簡單的處理方式，就是使用 SESSION 變數來處理
  • 在進入第二頁時，將 $_SESSION['flag']  =  1
  • 當使用者用了 [略過] 或 [Cancel] 時，就可在 action 所指向的 url 進行處理囉，例如得知此 flag 資訊，自動將 status 設成 2 。設定完後，可以再將 flag 清掉
    
    • unset( $_SESSION['flag'] );
      
    
    

參考資訊：

Facebook Developer Wiki

Choosing between an FBML or IFrame Application FBML

Fb:request-form Fb:request-form-submit Fb:comments
• Facebook.showFeedDialog
  
Iframe

Creating a Popup Dialog in an IFrame
• Fb:serverfbml
• JS API M FB.Connect.showFeedDialog
  


showFeedDialog inexplicably does not work for a specific
• http://screencast.com/t/XXRS0oKa5m
  
Feed action request limit reached 其他跟本篇較沒關係，與 Flash 或 Connet 相關的文章


Facebook App.開發心得分享
• Facebook Flash Application開發心得(1) - FB Connect - how to start
• How to add Facebook Connect to your website using Javascript
  

簡單的 FBML 範例程式，需填寫 API Key 、Template ID 等設定：

1. <?php
   
2. // Copyright 2007 Facebook Corp. All Rights Reserved.
   
3. //
   
4. // Application: TEST
   
5. // File: 'index.php'
   
6. // This is a sample skeleton for your application.
   
7. //
   
8. 
   
9. require_once 'facebook.php';
   
10. 
    
11. $appapikey = 'your_app_api_key';
    
12. $appsecret = 'your_app_secret';
    
13. $facebook = new Facebook($appapikey, $appsecret);
    
14. $user_id = $facebook->require_login();
    
15. $template_id = 0123456789;
    
16. 
    
17. $status = isset( $_REQUEST['status'] ) ? intval( $_REQUEST['status'] ) : 0 ;
    
18. switch( $status )
    
19. {
    
20. case 1:
    
21. ?>
    
22. <p style="width:100%;text-align:center;">
    
23. ...等待結果運算...<br /><br /><a href="?status=2">觀看結果</a><br />
    
24. </p>
    
25. <fb:fbml>
    
26. <fb:request-form action="?status=2" method="POST" invite="true" type="MyQuizName" content="快來挑戰！<?php echo htmlentities("<fb:req-choice url=\"http://apps.facebook.com/your_app_name/\" label=\"Authorize My Application\"") ?>" >
    
27. <fb:multi-friend-selector showborder="false" actiontext="邀請朋友參加此測試">
    
28. </fb:request-form>
    
29. </fb:fbml>
    
30. <?php
    
31. break;
    
32. case 2:
    
33. ?>
    
34. <script>
    
35. function do_post()
    
36. {
    
37. var template_id = <?php echo $template_id; ?>;
    
38. var user_message_prompt = '想說的話:';
    
39. var user_message = {value: ''};
    
40. var template_data={
    
41. 'test_name':'Tapie' ,
    
42. 'test_result':'OK',
    
43. 'images':[
    
44. {
    
45. 'src':'http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg',
    
46. 'href':'http://tw.yahoo.com/'
    
47. }
    
48. ]
    
49. }
    
50. var body_general='';
    
51. 
    
52. var continuation = function() {
    
53. // do something
    
54. };
    
55. Facebook.showFeedDialog( template_id, template_data, body_general, '', continuation, user_message_prompt, user_message );
    
56. }
    
57. </script>
    
58. <p style="width:100%;text-align:center;">
    
59. 測試成果：100分<br /><a href="#" onclick="new Dialog().showMessage('測驗結果', '100分').onconfirm = do_post ; return false;">詳細資訊</a><br />
    
60. </p>
    
61. <?
    
62. break;
    
63. default:
    
64. ?>
    
65. <form id="testForm" method="POST" action="?status=1">
    
66. <input type="hidden" id="Q_number" name="Q_number" value="1" />
    
67. <table width="100%">
    
68. <tr>
    
69. <td>Q1：你會製作表單嗎？</td>
    
70. </tr>
    
71. <tr>
    
72. <td>
    
73. <input type="radio" name="Q[0]" value="1" />會 <br />
    
74. <input type="radio" name="Q[0]" value="2" />不會
    
75. </td>
    
76. </tr>
    
77. <tr>
    
78. <td>
    
79. <button style="submit" onclick="document.getElementById('testForm').submit();">Submit</button>
    
80. </td>
    
81. </tr>
    
82. </table>
    
83. </form>
    
84. <?php
    
85. break;
    
86. }
    
87. exit;
    
88. ?>

複製代碼

2009/10/28 筆記：

上述例子採用單一檔案(index.php)搭配參數(status)來決定目前的狀態(1:填寫答案,2:邀請朋友,3:顯示結果與張貼個人塗鴉牆)，在部分情況會有一些問題，如新增留言板服務時等等的。

測試結果，建議可以改成 3 個頁面獨立運作比較乾淨，依序是 index.php 、 invite.php 和 result.php，程式碼範例如下：

• base.php
  
  • 這個是下面這幾支程式的最上頭都要 include 進來的片段
  • 1. <?php
       
    2. // Copyright 2007 Facebook Corp.  All Rights Reserved.
       
    3. //
       
    4. // Application: TEST
       
    5. // File: 'index.php'
       
    6. //   This is a sample skeleton for your application.
       
    7. //
       
    8. 
       
    9. session_start();
       
    10. 
        
    11. require_once 'facebook.php';
        
    12. 
        
    13. $appapikey = 'your_app_api_key';
        
    14. $appsecret = 'your_app_secret';
        
    15. $facebook = new Facebook($appapikey, $appsecret);
        
    16. $user_id = $facebook->require_login();
        
    17. $template_id = 123456789;
        
    18. ?>

    複製代碼
    
    
• index.php
  
  • 1. <?php
       
    2. require( 'base.php' );
       
    3. ?>
       
    4. <form id="test" name="test" method="POST" action="invite.php">
       
    5.         <table width="85%">
       
    6.                 <tr>
       
    7.                         <td><br /><hr width="70%" /></td>
       
    8.                 </tr>
       
    9.                 <tr>
       
    10.                         <td>
        
    11.                                 Q1:請問太陽是否都從西邊出來？
        
    12.                         </td>
        
    13.                 </tr>
        
    14.                 <tr>
        
    15.                         <td>
        
    16.                                 <input type="radio" name="Q1" value="1" checked /> Yes <br />
        
    17.                                 <input type="radio" name="Q1" value="2" /> No <br />
        
    18.                         </td>
        
    19.                 </tr>
        
    20.                 <tr>
        
    21.                         <td><br /><hr width="70%" /></td>
        
    22.                 </tr>
        
    23.                 <tr>
        
    24.                         <td>
        
    25.                                 Q2:請問月亮是否都從東邊出來？
        
    26.                         </td>
        
    27.                 </tr>
        
    28.                 <tr>
        
    29.                         <td>
        
    30.                                 <input type="radio" name="Q2" value="1" checked /> Yes <br />
        
    31.                                 <input type="radio" name="Q2" value="2" /> No <br />
        
    32.                         </td>
        
    33.                 </tr>
        
    34.                 <tr>
        
    35.                         <td>
        
    36.                                 <button>送出</button>
        
    37.                         </td>
        
    38.                 </tr>
        
    39.         </table>
        
    40. </form>

    複製代碼
    
    
• invite.php
  
  • 1. <?php
       
    2. require( 'base.php' );
       
    3. 
       
    4. // 計算分數
       
    5. $_SESSION['score'] = 0;
       
    6. if( isset( $_REQUEST['Q1'] ) && $_REQUEST['Q1'] == 1 )
       
    7.         $_SESSION['score'] += 50;
       
    8. 
       
    9. if( isset( $_REQUEST['Q2'] ) && $_REQUEST['Q2'] == 2 )
       
    10.         $_SESSION['score'] += 50;
        
    11. 
        
    12. ?>
        
    13. <fb:fbml>
        
    14.         <fb:request-form action="result.php" method="POST" invite="true" type="MyQuizName" content="快來挑戰！<?php echo htmlentities("<fb:req-choice url=\"http://apps.facebook.com/your_app_name/\" label=\"Authorize My Application\"") ?>" >
        
    15.                 <fb:multi-friend-selector showborder="false" actiontext="邀請朋友參加此測試">
        
    16.         </fb:request-form>
        
    17. </fb:fbml>

    複製代碼
    
    
• result.php
  
  • 1. <?php
       
    2. require( 'base.php' );
       
    3. ?>
       
    4. <script>
       
    5. var message = '你真厲害';
       
    6. function do_post()
       
    7. {
       
    8.         var template_id = <?php echo $template_id; ?>;
       
    9.         var user_message_prompt = '感言:';
       
    10.         var user_message = {value: ''};
        
    11.         var template_data={
        
    12.                 'images':[
        
    13.                                 {
        
    14.                                         'src':'http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Facebook.svg/200px-Facebook.svg.png',
        
    15.                                         'href':'http://www.facebook.com/'
        
    16.                                 }
        
    17.                         ] ,
        
    18.                 'level' : message
        
    19.         }
        
    20.         var body_general='';
        
    21. 
        
    22.         var continuation = function() {
        
    23.                 // do something
        
    24.         };
        
    25.         Facebook.showFeedDialog( template_id, template_data, body_general, '', continuation, user_message_prompt, user_message );
        
    26. }
        
    27. </script>
        
    28. <h1>測驗結果: <?php echo $_SESSION['score'] ; ?> 分</h1>
        
    29. <a href="#" onclick="new Dialog().showMessage( '分數' , '<?php echo $_SESSION['score']; ?>' ).onconfirm = do_post;return false;">張貼至個人塗鴉牆</a>
        
    30. <hr witdh="95%" />
        
    31. <fb:comments xid="a_unique_id" showform="true" canpost="true" candelete="false">
        
    32.         <fb:title>請留言</fb:title>
        
    33. </fb:comments>

    複製代碼
    
    

除了要更改 base.php 中的資訊外，要記得在 result.php 中的 template 等資訊也要適當修改，我記得如果連 src 位置打錯或不存在時，此時就不會蹦出樣版喔，要分外留意啦

v121315niga

我頂啊。接著頂  

cxvbnmnbv323

無言..........  

bbokit2008

樓主，支持！  

woff

牛X海海!!!