TShopping

 找回密碼
 註冊
搜索
查看: 1877|回復: 4

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

  [複製鏈接]
發表於 2012-4-2 16:05:40 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
雖然已經有一些制式的製作方式:
等等的,皆可以透過 Quiz 關鍵字在 Facebook 查詢到許多跟測驗相關的應用。大部分是已經製作好流程的,只要填寫一下問題、結果,就可以很快地完成一張測驗表。然而,有時候要推服務時,可能會用到許多 Javascript API ,往往那些 Quiz 製造機只適合用來填寫文字跟圖片,這時候就還是得靠人工方式了!沒錯,就是要寫程式!此例以 PHP 跟 Javascript 為範例實作。
製作一個 Quiz 的流程,主要可以分成四部份:
  • 顯示問題及收集答案
  • 顯示結果前,詢問是否要邀請朋友參與
  • 顯示結果和留言
  • 將結果發佈至塗鴉牆
整體上可以簡化到兩步,就是顯示問題收集答案跟顯示結果,但這樣會使得最後一頁要做的事很多,我做了一兩個制式的測試,發現還有每一個問題就要換一個頁面,這種理由多半是要顯示廣告用的,使得每到一頁就多了一次廣告流量。我覺得分成四部份應該還滿恰當的,再細分下去有點不妥,除非是介面的設計或是問題太多。
在實作上,依上述分類可以分成 3 個頁面,第一個頁面負責顯示問題跟收集答案;第二個頁面則是提供使用者便利地點選朋友寄送邀請函;第三個就是顯示結果,以及留言的顯示,至於第四部分則可在第三頁搭配 Javascript 來提供發送,故可以少一個頁面。
流程:

    新增與設定 App
    顯示問題及收集答案
    • 一般的 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.                 <fb:multi-friend-selector showborder="false" actiontext="邀請朋友參加此測試">
        6.             </fb:request-form>
        7.         </fb:fbml>
        8.     </script>
        9. </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. var template_data={
        6.         'test_name':'Taipei' ,
        7.         'test_result':'OK',
        8.         'images':[{'src':'http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg', 'href':'http://tw.yahoo.com/'}]
        9. }
        10. var body_general='';
        11. var target_ids = '';

        12. var continuation = function() {
        13.         // do something
        14. };
        15. Facebook.showFeedDialog( template_id, template_data, body_general, target_ids , continuation, user_message_prompt, user_message );
        16. </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.     var template_data={
        8.             'test_name':'Taipei' ,
        9.             'test_result':'OK',
        10.             'images':[{'src':'http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg', 'href':'http://tw.yahoo.com/'}]
        11.     }
        12.     var body_general='';
        13.     var target_ids = '';

        14.     var continuation = function() {
        15.             // do something
        16.     };

        17.     FB.Connect.showFeedDialog( template_id, template_data, target_ids , body_general, null, FB.RequireConnect.require, continuation, user_message_prompt, user_message);
        18. </script>
        複製代碼

    • 至於 template_id 部分,則是要先去製作樣版
    新增留言板
      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 傳遞 留意的是當使用者點選 [略過] 或 [Cancel] 時,這份資訊卻不會送給 action 所指定的頁面,最簡單的處理方式,就是使用 SESSION 變數來處理
      • 在進入第二頁時,將 $_SESSION['flag']  =  1
      • 當使用者用了 [略過] 或 [Cancel] 時,就可在 action 所指向的 url 進行處理囉,例如得知此 flag 資訊,自動將 status 設成 2 。設定完後,可以再將 flag 清掉
        • unset( $_SESSION['flag'] );


參考資訊:
簡單的 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. require_once 'facebook.php';

  9. $appapikey = 'your_app_api_key';
  10. $appsecret = 'your_app_secret';
  11. $facebook = new Facebook($appapikey, $appsecret);
  12. $user_id = $facebook->require_login();
  13. $template_id = 0123456789;

  14. $status = isset( $_REQUEST['status'] ) ? intval( $_REQUEST['status'] ) : 0 ;
  15. switch( $status )
  16. {
  17. case 1:
  18. ?>
  19. <p style="width:100%;text-align:center;">
  20. ...等待結果運算...<br /><br /><a href="?status=2">觀看結果</a><br />
  21. </p>
  22. <fb:fbml>
  23. <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\"") ?>" >
  24. <fb:multi-friend-selector showborder="false" actiontext="邀請朋友參加此測試">
  25. </fb:request-form>
  26. </fb:fbml>
  27. <?php
  28. break;
  29. case 2:
  30. ?>
  31. <script>
  32. function do_post()
  33. {
  34. var template_id = <?php echo $template_id; ?>;
  35. var user_message_prompt = '想說的話:';
  36. var user_message = {value: ''};
  37. var template_data={
  38. 'test_name':'Tapie' ,
  39. 'test_result':'OK',
  40. 'images':[
  41. {
  42. 'src':'http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg',
  43. 'href':'http://tw.yahoo.com/'
  44. }
  45. ]
  46. }
  47. var body_general='';

  48. var continuation = function() {
  49. // do something
  50. };
  51. Facebook.showFeedDialog( template_id, template_data, body_general, '', continuation, user_message_prompt, user_message );
  52. }
  53. </script>
  54. <p style="width:100%;text-align:center;">
  55. 測試成果:100分<br /><a href="#" onclick="new Dialog().showMessage('測驗結果', '100分').onconfirm = do_post ; return false;">詳細資訊</a><br />
  56. </p>
  57. <?
  58. break;
  59. default:
  60. ?>
  61. <form id="testForm" method="POST" action="?status=1">
  62. <input type="hidden" id="Q_number" name="Q_number" value="1" />
  63. <table width="100%">
  64. <tr>
  65. <td>Q1:你會製作表單嗎?</td>
  66. </tr>
  67. <tr>
  68. <td>
  69. <input type="radio" name="Q[0]" value="1" />會 <br />
  70. <input type="radio" name="Q[0]" value="2" />不會
  71. </td>
  72. </tr>
  73. <tr>
  74. <td>
  75. <button style="submit" onclick="document.getElementById('testForm').submit();">Submit</button>
  76. </td>
  77. </tr>
  78. </table>
  79. </form>
  80. <?php
  81. break;
  82. }
  83. exit;
  84. ?>
複製代碼


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. session_start();

      9. require_once 'facebook.php';

      10. $appapikey = 'your_app_api_key';
      11. $appsecret = 'your_app_secret';
      12. $facebook = new Facebook($appapikey, $appsecret);
      13. $user_id = $facebook->require_login();
      14. $template_id = 123456789;
      15. ?>
      複製代碼

  • 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. $_SESSION['score'] = 0;
      5. if( isset( $_REQUEST['Q1'] ) && $_REQUEST['Q1'] == 1 )
      6.         $_SESSION['score'] += 50;

      7. if( isset( $_REQUEST['Q2'] ) && $_REQUEST['Q2'] == 2 )
      8.         $_SESSION['score'] += 50;

      9. ?>
      10. <fb:fbml>
      11.         <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\"") ?>" >
      12.                 <fb:multi-friend-selector showborder="false" actiontext="邀請朋友參加此測試">
      13.         </fb:request-form>
      14. </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.         var continuation = function() {
      22.                 // do something
      23.         };
      24.         Facebook.showFeedDialog( template_id, template_data, body_general, '', continuation, user_message_prompt, user_message );
      25. }
      26. </script>
      27. <h1>測驗結果: <?php echo $_SESSION['score'] ; ?> 分</h1>
      28. <a href="#" onclick="new Dialog().showMessage( '分數' , '<?php echo $_SESSION['score']; ?>' ).onconfirm = do_post;return false;">張貼至個人塗鴉牆</a>
      29. <hr witdh="95%" />
      30. <fb:comments xid="a_unique_id" showform="true" canpost="true" candelete="false">
      31.         <fb:title>請留言</fb:title>
      32. </fb:comments>
      複製代碼

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

 

臉書網友討論
發表於 2012-5-5 00:59:36 | 顯示全部樓層
我頂啊。接著頂  

版主招募中

發表於 2012-9-7 01:10:01 | 顯示全部樓層
無言..........  


發表於 2012-9-7 01:10:02 | 顯示全部樓層
樓主,支持!  


 樓主| 發表於 2013-2-1 19:29:57 | 顯示全部樓層
牛X海海!!!


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-5 04:08 , Processed in 0.060317 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表