雖然已經有一些制式的製作方式:
等等的,皆可以透過 Quiz 關鍵字在 Facebook 查詢到許多跟測驗相關的應用。大部分是已經製作好流程的,只要填寫一下問題、結果,就可以很快地完成一張測驗表。然而,有時候要推服務時,可能會用到許多 Javascript API ,往往那些 Quiz 製造機只適合用來填寫文字跟圖片,這時候就還是得靠人工方式了!沒錯,就是要寫程式!此例以 PHP 跟 Javascript 為範例實作。
製作一個 Quiz 的流程,主要可以分成四部份:
- 顯示問題及收集答案
- 顯示結果前,詢問是否要邀請朋友參與
- 顯示結果和留言
- 將結果發佈至塗鴉牆
整體上可以簡化到兩步,就是顯示問題收集答案跟顯示結果,但這樣會使得最後一頁要做的事很多,我做了一兩個制式的測試,發現還有每一個問題就要換一個頁面,這種理由多半是要顯示廣告用的,使得每到一頁就多了一次廣告流量。我覺得分成四部份應該還滿恰當的,再細分下去有點不妥,除非是介面的設計或是問題太多。
在實作上,依上述分類可以分成 3 個頁面,第一個頁面負責顯示問題跟收集答案;第二個頁面則是提供使用者便利地點選朋友寄送邀請函;第三個就是顯示結果,以及留言的顯示,至於第四部分則可在第三頁搭配 Javascript 來提供發送,故可以少一個頁面。
流程:
新增與設定 App
顯示問題及收集答案 顯示邀請朋友參加的介面 - FBML 版
- <fb:fbml>
- <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\"") ?>"
- <fb:multi-friend-selector showborder="false" actiontext="邀請朋友參加此測試">
- </fb:request-form>
- </fb:fbml>
複製代碼
- Iframe 版
- <fb:serverfbml style="width: 100%;">
- <script type="text/fbml">
- <fb:fbml>
- <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\"") ?>"
- <fb:multi-friend-selector showborder="false" actiontext="邀請朋友參加此測試">
- </fb:request-form>
- </fb:fbml>
- </script>
- </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 部分,則是要先去製作樣版
新增留言板 - <fb:fbml>
- <fb:comments xid="a_unique_id" showform="true" canpost="true" candelete="false">
- <fb:title>請留下寶貴的意見</fb:title>
- </fb:comments>
- <fb:fbml>
複製代碼
常見問題:
什麼是 templates 無法顯示 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 等設定:
- <?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 進來的片段
- <?php
- // Copyright 2007 Facebook Corp. All Rights Reserved.
- //
- // Application: TEST
- // File: 'index.php'
- // This is a sample skeleton for your application.
- //
- session_start();
- 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 = 123456789;
- ?>
複製代碼
- index.php
- <?php
- require( 'base.php' );
- ?>
- <form id="test" name="test" method="POST" action="invite.php">
- <table width="85%">
- <tr>
- <td><br /><hr width="70%" /></td>
- </tr>
- <tr>
- <td>
- Q1:請問太陽是否都從西邊出來?
- </td>
- </tr>
- <tr>
- <td>
- <input type="radio" name="Q1" value="1" checked /> Yes <br />
- <input type="radio" name="Q1" value="2" /> No <br />
- </td>
- </tr>
- <tr>
- <td><br /><hr width="70%" /></td>
- </tr>
- <tr>
- <td>
- Q2:請問月亮是否都從東邊出來?
- </td>
- </tr>
- <tr>
- <td>
- <input type="radio" name="Q2" value="1" checked /> Yes <br />
- <input type="radio" name="Q2" value="2" /> No <br />
- </td>
- </tr>
- <tr>
- <td>
- <button>送出</button>
- </td>
- </tr>
- </table>
- </form>
複製代碼
- invite.php
- <?php
- require( 'base.php' );
- // 計算分數
- $_SESSION['score'] = 0;
- if( isset( $_REQUEST['Q1'] ) && $_REQUEST['Q1'] == 1 )
- $_SESSION['score'] += 50;
- if( isset( $_REQUEST['Q2'] ) && $_REQUEST['Q2'] == 2 )
- $_SESSION['score'] += 50;
- ?>
- <fb:fbml>
- <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\"") ?>" >
- <fb:multi-friend-selector showborder="false" actiontext="邀請朋友參加此測試">
- </fb:request-form>
- </fb:fbml>
複製代碼
- result.php
- <?php
- require( 'base.php' );
- ?>
- <script>
- var message = '你真厲害';
- function do_post()
- {
- var template_id = <?php echo $template_id; ?>;
- var user_message_prompt = '感言:';
- var user_message = {value: ''};
- var template_data={
- 'images':[
- {
- 'src':'http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Facebook.svg/200px-Facebook.svg.png',
- 'href':'http://www.facebook.com/'
- }
- ] ,
- 'level' : message
- }
- var body_general='';
- var continuation = function() {
- // do something
- };
- Facebook.showFeedDialog( template_id, template_data, body_general, '', continuation, user_message_prompt, user_message );
- }
- </script>
- <h1>測驗結果: <?php echo $_SESSION['score'] ; ?> 分</h1>
- <a href="#" onclick="new Dialog().showMessage( '分數' , '<?php echo $_SESSION['score']; ?>' ).onconfirm = do_post;return false;">張貼至個人塗鴉牆</a>
- <hr witdh="95%" />
- <fb:comments xid="a_unique_id" showform="true" canpost="true" candelete="false">
- <fb:title>請留言</fb:title>
- </fb:comments>
複製代碼
除了要更改 base.php 中的資訊外,要記得在 result.php 中的 template 等資訊也要適當修改,我記得如果連 src 位置打錯或不存在時,此時就不會蹦出樣版喔,要分外留意啦
|