TShopping

標題: Facebook API Example - 客製化 Quiz 測驗教學筆記 [打印本頁]

作者: woff 時間: 2012-4-2 16:05
標題: Facebook API Example - 客製化 Quiz 測驗教學筆記
雖然已經有一些制式的製作方式：

How Well Do You Know Me Quiz Maker

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

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

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

可參考 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\"") ?>"
  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
  - <script type="text/javascript">
    
    var template_id = number_id;
    
    var user_message_prompt = 'What do you think of this book?';
    
    var user_message = {value: 'write your review here'};
    
    var template_data={
    
          'test_name':'Taipei' ,
    
          'test_result':'OK',
    
          'images':[{'src':'http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg', 'href':'http://tw.yahoo.com/'}]
    
    }
    
    var body_general='';
    
    var target_ids = '';
    
    var continuation = function() {
    
          // do something
    
    };
    
    Facebook.showFeedDialog( template_id, template_data, body_general, target_ids , continuation, user_message_prompt, user_message );
    
    </script>
    複製代碼
  Iframe
  - <script type="text/javascript">
    
    FB_RequireFeatures(["XFBML"], function(){
    
    FB.Facebook.init( 'appapikey' , '/path/xd_receiver.htm' , null );
    
    var template_id = number_id;
    
    var user_message_prompt = 'What do you think of this book?';
    
    var user_message = {value: 'write your review here'};
    
    var template_data={
    
             'test_name':'Taipei' ,
    
             'test_result':'OK',
    
             'images':[{'src':'http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg', 'href':'http://tw.yahoo.com/'}]
    
    }
    
    var body_general='';
    
    var target_ids = '';
    
    var continuation = function() {
    
             // do something
    
    };
    
    FB.Connect.showFeedDialog( template_id, template_data, target_ids , body_general, null, FB.RequireConnect.require, continuation, user_message_prompt, user_message);
    
    </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>
  複製代碼

常見問題：

這是一個預先刻劃好的樣版，可重複使用，只需要填寫關鍵字就行了！最大好處是可以很漂亮的排好擺在塗鴉牆上，而搭配關鍵字的變動，就可以拿來當做測試結果的顯示，好比如 A 得 90 分、 B 得 75 分等等，就只要把關鍵字弄成可變動囉！詳細部份可以到 http://developers.facebook.com/tools.php?templates 玩玩，可以為自己的應用程式製作專屬的樣版，而上述就是一個使用樣版的塗鴉牆例子。
採用舊式申請 template 的方式，facebook 已打算在 2009/12/20 停用此功能，此例先保留給舊式範例，新式用法歡迎參考：發佈到個人塗鴉牆的樣版設定教學

要特別留意傳給 templates 的資訊，連 images 變數中的 src 位置不存在也會導致不會顯示，當初以 IE 測試，發現很久都沒顯示訊息，改用 Firefox 才蹦出 src 位置不對的消息，另外，還可以參考下面連結的 showFeedDialog 的相關文章，有的跟隱私有關。

當第二頁採取呈現 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

Fb:request-form

Fb:request-form-submit

Fb:comments

Facebook.showFeedDialog

Creating a Popup Dialog in an IFrame

showFeedDialog inexplicably does not work for a specific

http://screencast.com/t/XXRS0oKa5m

Feed action request limit reached

Facebook App.開發心得分享

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

<?php
// Copyright 2007 Facebook Corp. All Rights Reserved.
//
// Application: TEST
// File: 'index.php'
// This is a sample skeleton for your application.
//
require_once 'facebook.php';
$appapikey = 'your_app_api_key';
$appsecret = 'your_app_secret';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();
$template_id = 0123456789;
$status = isset( $_REQUEST['status'] ) ? intval( $_REQUEST['status'] ) : 0 ;
switch( $status )
{
case 1:
?>
<p style="width:100%;text-align:center;">
...等待結果運算...<br /><br /><a href="?status=2">觀看結果</a><br />
</p>
<fb:fbml>
<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\"") ?>" >
<fb:multi-friend-selector showborder="false" actiontext="邀請朋友參加此測試">
</fb:request-form>
</fb:fbml>
<?php
break;
case 2:
?>
<script>
function do_post()
{
var template_id = <?php echo $template_id; ?>;
var user_message_prompt = '想說的話:';
var user_message = {value: ''};
var template_data={
'test_name':'Tapie' ,
'test_result':'OK',
'images':[
{
'src':'http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg',
'href':'http://tw.yahoo.com/'
}
]
}
var body_general='';
var continuation = function() {
// do something
};
Facebook.showFeedDialog( template_id, template_data, body_general, '', continuation, user_message_prompt, user_message );
}
</script>
<p style="width:100%;text-align:center;">
測試成果：100分<br /><a href="#" onclick="new Dialog().showMessage('測驗結果', '100分').onconfirm = do_post ; return false;">詳細資訊</a><br />
</p>
<?
break;
default:
?>
<form id="testForm" method="POST" action="?status=1">
<input type="hidden" id="Q_number" name="Q_number" value="1" />
<table width="100%">
<tr>
<td>Q1：你會製作表單嗎？</td>
</tr>
<tr>
<td>
<input type="radio" name="Q[0]" value="1" />會 <br />
<input type="radio" name="Q[0]" value="2" />不會
</td>
</tr>
<tr>
<td>
<button style="submit" onclick="document.getElementById('testForm').submit();">Submit</button>
</td>
</tr>
</table>
</form>
<?php
break;
}
exit;
?>

複製代碼

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. //
  9. session_start();
  11. require_once 'facebook.php';
  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' );
  4. // 計算分數
  5. $_SESSION['score'] = 0;
  6. if( isset( $_REQUEST['Q1'] ) && $_REQUEST['Q1'] == 1 )
  7. $_SESSION['score'] += 50;
  9. if( isset( $_REQUEST['Q2'] ) && $_REQUEST['Q2'] == 2 )
  10. $_SESSION['score'] += 50;
  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='';
  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 時間: 2012-5-5 00:59
我頂啊。接著頂

作者: cxvbnmnbv323 時間: 2012-9-7 01:10
無言..........

作者: bbokit2008 時間: 2012-9-7 01:10
樓主，支持！

作者: woff 時間: 2013-2-1 19:29

牛X海海!!!

歡迎光臨 TShopping (http://www.tshopping.com.tw/)