爲方便大家羣策羣力，我們創建了一個 Facebook Instant Game 交流羣：814298516 。 歡迎同學們加入交流開發和運營經驗。
優化遊戲以便在 Facebook.com 上運行
概覽
Facebook 提供多種功能，旨在讓您的遊戲在玩家的瀏覽器中獲得出色表現，幫助您妥善處理各種窗口大小問題，以及在不中斷遊戲的情況下，讓玩家和遊戲能夠在遊戲進行期間使用 Facebook 功能，接受來自 Facebook 的互動。
佈局優化
使用流動佈局可以根據玩家的瀏覽器尺寸調整遊戲的大小。啓用此功能時，包含遊戲的 iframe 可以填充瀏覽器窗口的整個可用寬度或高度。
應用內容如何在沒有流動寬度和高度的情況下填充 Facebook 網頁遊戲的可用空間。
要啓用流動佈局，首先需要在應用面板內配置應用的設置。導航到應用的“設置”頁面並找到“Facebook 應用”部分，如下圖所示。
固定寬度
固定寬度設置爲 No 時，包含遊戲的 iframe 的寬度會設置爲 100%。如果玩家更改其瀏覽器窗口的寬度，系統會左對齊您的內容並調整 iframe 的大小以填充頁面。
固定寬度設置爲 Yes 時，系統會強制 iframe 使用值爲 760 像素的寬度。默認情況下，大多數瀏覽器中 iframe 的 元素擁有 margin:8px，因此除非執行覆蓋操作，否則內容寬度爲 744 像素。
固定高度
固定高度設置爲 No 時，包含應用的 iframe 的寬度會設置爲 100%。調整瀏覽器窗口的大小時也會調整 iframe 的大小，並會在內容超出可用高度的情況下顯示滾動條。
固定高度設置爲 Yes 時，會強制 iframe 使用您在應用面板中作爲附加設置指定的高度值，該值以像素爲單位。
流動佈局
通過將固定設置設爲 No 來啓用流動寬度和高度後，鑑於查看內容的用戶可能隨時調整瀏覽器的大小，所以您開發的應用應能支持可變尺寸及動態大小調整。
應用應能夠縮放大小，以便能使用所有可用屏幕空間，並在需要時偵聽 JavaScript window.onresize 事件來動態調整佈局。在許多情況下，HTML 和 CSS 無需使用 JavaScript 即可處理動態佈局，但如果以絕對單位指定了元素大小，則可能需要在 window.onresize 事件期間運行代碼。爲避免屏幕閃爍或過於頻繁地調整佈局，建議每秒僅運行 30-60 次調整大小處理程序，或僅在大小更改超過某個閾值時運行。
HTML 示例
對於 HTML 應用，請將應用父元素的高度和寬度設置爲 100%。如果需要調整 HTML 應用內任何用戶界面元素的位置，與在任何標準 HTML 頁面中執行的操作一樣，可以通過 window.onresize 事件執行此操作。
以下示例代碼可用於定義
Fluid Layout HTML Example
FB.init({appId : 'APP ID',});
function echoSize() {
document.getElementById('output').innerHTML ="HTML Content Width: " + window.innerWidth +" Height: " + window.innerHeight;
console.log(window.innerWidth + ' x ' + window.innerHeight);
}
echoSize();
window.onresize = echoSize;
處理 Flash 中的流動佈局
如果要構建 Flash 應用，您需要將 標籤初始尺寸的高度和寬度都設置爲 100%。這會讓 Flash 客戶端能夠填充整個可用空間。接下來，ActionScript 代碼需要偵聽並處理 stage 對象的 Event.RESIZE 事件。此事件在玩家每次更改 swf 大小時發送；請使用此事件相應設置用戶界面元素的佈局。
處理 Flash 或其他插件中的對話框和菜單彈出項
在基於 Flash 或其他插件的遊戲運行時，玩家可能會與屬於 Facebook 的用戶界面元素互動，這有時會導致遊戲被遮擋。這種情況有時是因爲遊戲執行的操作（例如調用“登錄”對話框）而發生，有時是因爲玩家與遊戲的 Facebook 元素（例如 Messenger 窗口）互動而發生。
要妥善處理此情況，您需要創建應用的動態截圖，然後使用此圖片替代 元素。您需要在 200 毫秒內執行此替代操作。此操作會讓對話框正確顯示，並帶來更愉悅的用戶體驗。
執行此操作的最佳方法是，在 Flash 代碼內創建帶有截圖（截圖爲 JPEG 格式或其他適合圖片樣式的壓縮格式）的函數，並在使用 Base64 編碼該字符串後暫停遊戲。根據需要向 JavaScript 暴露該函數（或可將該函數命名爲 exportScreenshot 之類），例如，在 Flash 中，您將使用 flash.external.ExternalInterface.addCallback 函數來執行暴露操作。同時暴露在遊戲重獲焦點後恢復遊戲的函數。
接下來，在 JavaScript 代碼中，編寫要在遊戲失去或重獲焦點時調用的偵聽程序函數，通過將其作爲 hideFlashCallback 參數傳遞給 FB.init()，以便在 Facebook 環境中註冊該函數。隨後會向偵聽程序傳遞參數字典，其中包含稱爲 state 的鍵，如果應該隱藏遊戲，該鍵會設置爲 opened。 在這種情況下，偵聽程序應調用 Flash 應用的 exportScreenshot 方法，然後使用經過 Base64 編碼的圖片數據創建數據網址，並使該網址成爲 img 元素的 src；它應使用 JS SDK 中的 FB.hideFlashElement 方法將應用包含的元素移動到畫面以外，並使用該 img 替換。如果傳遞給偵聽程序的參數字典沒有 state: “opened”，那麼使用 FB.Canvas.showFlashElement 使 Flash 應用重返畫面。
爲了讓截圖展示淡出效果，您需要導出經過改動的截圖，使其採樣率降至 1/4 大小（顯示爲模糊圖片）或調暗其色調。這會讓玩家更容易發現焦點已從遊戲轉移到遊戲上彈出的用戶界面元素上。
通過設置 urlhandler 避免重新加載
使用 JavaScript SDK 的 FB.Canvas.setUrlHandler() 方法可註冊幫助遊戲妥善處理以下情況的回調：用戶點擊了 Facebook Chrome 內通常會導致遊戲重新加載的某處鏈接。示例包括：
所有快訊動態
書籤
來自書籤下拉列表的請求
請求通知動態。
例如，當用戶點擊關於好友在遊戲中獲得某項成就的快訊動態時，在默認情況下，他們的瀏覽器會跳轉至該成就的網址。但您的遊戲可以選擇註冊用於在應用程序內顯示成就的回調。
調用該回調時會使用包含網址路徑的字段，該路徑與應用的 Facebook 網頁遊戲網址相關；例如，如果將加載的網址爲
http://apps.facebook.com/yourgameXYZ/achievements/cheevo1.php
?fb_source=canvas_ticker
&fb_ticker_mod=achievement
&fb_action_types=games.achieves
，將使用如下字典參數調用您的回調
{
path: “/achievements/cheevo1.php?fb_source=canvas_ticker&fb_ticker_mod= achievement&fb_action_types=games.achieves”
}
請注意，對 FB.Canvas.setUrlHandler() 的每次調用都會替代之前設置的調用（如果之前已設置）。另外，僅會發送指向 Facebook 遊戲的鏈接（即，以 apps.facebook.com/your_app/ 開頭）進行內聯處理。
在不支持的瀏覽器中處理 WebGL
如果您的 Facebook 網頁遊戲使用 WebGL，則應在應用設置中將“Facebook 網頁遊戲”下的 WebGL 設置爲“是”。這使 Facebook 可以優化玩家的 WebGL 體驗。
如果玩家使用的瀏覽器不支持 WebGL，他們將在嘗試訪問您的遊戲時看到下列頁面。此頁面會顯示兼容 WebGL 的網頁瀏覽器的鏈接，如果您的遊戲已在 Facebook Gameroom 中上架，頁面還會顯示 Gameroom 客戶端的鏈接。
如果您不想將玩家引導至這一頁面，可以將替換 WebGL 不支持的體驗設置爲“是”，禁用重定向。如果執行這一操作，您必須針對不支持 WebGL 的瀏覽器處理遊戲體驗。