App Center Tutorial
本篇翻譯自 Facebook 開發者頁面 的 App Center Tutorial
Facebook App Center 是一個大型的社交應用程式中心。App Center 是協助你的 Facebook Apps、手機 apps 和使用 Facebook Login 的網站 的管道。Facebook 鼓勵所有開發人員在這個 App Center 建立您的 app 細節內容頁面。
這篇文章將引導開發者配置 apps 的過程：
- 建立一個 App 細節頁面
- 上傳圖片
- 網站和手機網頁的特別注意事項
- 提交您的 app 到 App Center
本篇假定您已經熟悉 Facebook App Dashboard 的操作及基本設置，並且已閱讀 App Center Guidelines。以確保 App Center 審查上市後，用戶在使用上有一個良好的體驗。
建立一個 App 細節頁面
所有的開發人員應在 App Dashboard 創建一個應用程式的詳細頁面。使用者可以經由這個頁面的資訊和截圖了解這個應用程式，然後開始登入使用。使用者通過認證之後，應用程式就會發送到他們的 Facebook 、網站或手機上。
要在 App Center 上架，App 細節頁面是必須的。這也將成為非 Facebook 用戶搜索時的目標頁面。
要訪問 App Center 的設置，到 App Dashboard 單擊在左側的 App Center 選項。
在這裡你可以輸入顯示在 App Center 應用程式的詳細訊息。包括應用程式的顯示名稱，類別，副標題和說明文字等等..。
請確保您的應用程式所支援的平台顯示。如果您正在測試 iOS 應用程式，且與您的 Facebook應用程式是相同的 App ID，但它仍然在開發中，你應該在細節頁面中隱藏 iOS 的平台配置。
註：如果您的網站支援 Facebook Login 並且同時擁有 Facebook App，那麼只需要顯示 Facebook App 在 App Center 即可，以減少用戶混淆。
要在 App Center 上架，App 細節頁面是必須的。這也將成為非 Facebook 用戶搜索時的目標頁面。
要訪問 App Center 的設置，到 App Dashboard 單擊在左側的 App Center 選項。
在這裡你可以輸入顯示在 App Center 應用程式的詳細訊息。包括應用程式的顯示名稱，類別，副標題和說明文字等等..。
註：如果您的網站支援 Facebook Login 並且同時擁有 Facebook App，那麼只需要顯示 Facebook App 在 App Center 即可，以減少用戶混淆。
上傳圖片
開發人員需要上傳圖示(icons)，橫幅(banners)和遊戲畫面(screenshots)。這些隨應用程式支持的平台可能會有所不同。例如，在 iOS 應用程式將需要上傳。圖片選項將依據適當的平台自動顯示在 App Center 選項中。
當您設計圖片時：
圖示(Icons)：
當您設計圖片時：
- 將您的應用程式名稱放置於橫福中。
- 預留一些空間給重要的圖形。
- 不要在圖片的邊界放置 Logo 和文字。
- 橫幅圖片必須填滿整個框架（例如，沒有空格，沒有圓角，無邊框）。
- 圖示(Icons)可以有圓角（建議使用帶透明度和PNG，不要GIF）。
- 請參閱 App Center Guidelines。
圖示(Icons)：
| Size (px) | 出現位置 | 範例 |
| 16 x 16 | 塗鴉牆(News feed stories), 我的最愛(bookmarks) | |
| 64 x 64 | 認證頁面(Auth Dialog), hovercards | |
| 96 x 96 | 手機 app 頁面 (Mobile app detail page) | |
| 128 x 128 | 網頁 app 頁面 (Web app detail page) |
| Size (px) | 出現位置 | 範例 |
| 155 x 100 | 主頁面 分類頁面 子分類頁面 | |
| 394 x 150 | 主頁面上方的精選區域 (選用) | |
| 180 x 115 | 頁面右側的精選區域 (選用) |
App Center 支持以下的手機螢幕解析度：
- MDPI：240×480
- HDPI：480×800
- XHDPI：640×960以上
| Size (px) | 出現位置 |
| 136 x 88 | 主頁面, 分類頁面, 子分類頁面 (MDPI) |
| 204 x 132 | 主頁面, 分類頁面, 子分類頁面 (HDPI) |
| 272 x 176 | 主頁面, 分類頁面, 子分類頁面 (XHDPI) |
封面圖片：
設計封面圖片時，開發人員應該注意，128x128圖示會稍微掩蓋住封面圖像的左下方，顯示如下。
| Size (px) | 出現位置 | 範例 |
| 800 x 150 | App 細節頁面 |
開發人員可以提交每個平台5張截圖的（Web，Canvas，手機 Web，iPhone，iPad，Android），至少須提交3個平台的遊戲截圖。
內容必須顯示真正的遊戲畫面，不能包含任何推銷資訊或橫幅。App Center 支持的截圖尺寸為 320×320 到 2048×2048 pixel 之間。
如果截圖的長寬比不適合在 App Center 的顯示框的長寬比，我們將自行縮放截圖。
畫面的選擇，根據用戶使用的裝置來查看頁面。如果您在 iPhone 上查看頁面，iPhone 的截圖會優先出現。如果應用程式不支援的 iOS 則手機 Web 的截圖會優先出現等。
有2個截圖的佈局設計：
- 一個直擺方向(portrait)+兩個橫擺方向(landscapes)。
- 三個 橫擺方向(landscapes)。
| Size (px) | 出現位置 |
| (320 - 2048) x (320 - 2048) | App 細節頁面 遊戲畫面 |
在 App Center 的應用程式細節頁面中顯示新用戶所需的權限。可以被視為驗證對話框(Auth Dialog)中的一個版本，因此很容易直接從 App Center 為新用戶安裝你的應用程式。
在 App Center 下設置權限(Permissions)部分時，可以遵循以下：
- 用戶與好友的權限(User & Friend Permissions)：這些權限將顯示在 App Center 的應用程式的細節頁面。
- 擴展權限(Extended Permissions)： 用戶通過點擊應用程式的細節頁面後，將出現對話框的提示驗證這些可選的權限，這意味著用戶可以取消這些權限，然後仍授權您的應用程式。
- Auth Token Parameter：當用戶通過應用程式的細節頁面授權您的應用程式，我們將通過您的應用程式，在這裡指定 Auth Token 的格式。可用的格式：
- URI Fragment ：如果您的應用程式是使用 client-side authentication
- Query String ：如果您的應用程式是使用 server-side authentication。如果您的應用程式是一個 Canvas App，我們將不使用此設置，並自動 “signed_request” 作為回應類型使用。
請注意，有些用戶將直接從 App Center 導向到應用程式的細節頁面，其他用戶仍然可以通過直接輸入網址或通過 Feed，Requests和廣告導到您的應用程。在這些情況下，你仍然需要通過現有的驗證對話框(Auth Dialog)授權處理。
Canvas App 的開發者(For Canvas Developers)
大多數 Canvas 應用程式是將新用戶通過客戶端重導向驗證對話框。提交到 App Center，用戶仍然可以通過直接輸入網址瀏覽到應用程式，應仍保持授權的需要功能。開發人員必須確保他們在這兩種情況下的同一組的權限要求; App Center 權限配置應符合開發商已經要求的OAuth Dialog 參數。如果這些不匹配，用戶會看到兩種授權在提示，將造成用戶體驗混亂，導致您的應用程式無法在 App Center 上市。
iOS 與 Android 的開發者(For iOS and Android)
手機應用程式必須使用單點登錄（SSO）是在 App Center 上市的資格。只提供一個無縫的登入過程後，通過應用程式的細節頁面點擊列出在 App Center 的手機應用程式。
人們將能夠瀏覽 Facebook.com 的 App Center，和 Facebook 的手機應用。當人們要安裝原生的手機應用程式，他們將直接從 Apple 的 App Store 或 Google Play 下載應用程式。App Center 聯繫手機應用商場，旨在推動 iOS，Android 和手機網路巨大社交應用的成長。
網頁與手機網頁的開發者(For Website and Mobile Web Developers)
在 App Center 的應用程式的細節頁面，將採取授權的用戶才到達您的網站上的方式，但重要的是要確保這些用戶有個人化的體驗經驗，當他們通過從 App Center 點擊您網站上的資訊。用戶不應該點擊第二次 登錄到 Facebook 按鈕，而是應該看到一些個人化的資訊，以優化用戶體驗。
下面的程式碼範例將檢查用戶是否已授權應用程式和顯示出個人資訊的歡迎訊息，例如 'Welcome, Constantin!'.。
<html>
<head>
<title>Example</title>
</head>
<body>
<!-- Load the Facebook JavaScript SDK -->
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<div id="welcomeMessage"></div>
<script type="text/javascript">
// Initialize the Facebook JavaScript SDK
FB.init({
appId: 'APP_ID',
status: true,
});
// Check if the current user is logged in
// and has authorized the app
FB.getLoginStatus(checkLoginStatus);
// Check the result of the user
function checkLoginStatus(response) {
if(response && response.status == 'connected') {
// The user is connected to Facebook
// and has authorized the app.
// Now personalize the user experience
FB.api('/me', function(response) {
var message = document.getElementById('welcomeMessage');
message.innerHTML = 'Welcome, ' + response.first_name + '!';
});
} else {
// The user has not authenticated your app,
// proceed with your normal (anonymous) flow.
}
}
</script>
</body>
</html>更多如何檢測用戶的Facebook狀態可以參考 JavaScript SDK，FB.getLoginStatus 文件，這個網誌文章的詳細資訊。
提交您的 app 到 App Center
對於一個應用程式在 App Center 上市，必須滿足您的應用程式的guidelines。Facebook將審查圖片，應用程式的細節訊息，和用戶體驗。如果您的應用程式被拒絕，我們將解釋為什麼並給你一些改變的建議。一旦您修正，可以在 App Center 重新提交上市。
開發人員可以提交之前預覽他們的應用程序的詳細信息頁面，在頁面頂部點擊“預覽”鏈接。這將顯示一個實時預覽：
開發人員可以提交他們的應用程式，通過點擊 App Center 的頂上方按鈕。一旦提交將會顯示一條訊息，提交正在等待審查。一旦你的應用程式已經批准，將更新此訊息。
注意：一旦您提交您的應用程式的細節頁面，設定值不能被改變，直到提交批准或取消提交。一旦你的應用程式的細節頁面在 App Center 上市，頁面上的所有未來的變化也將受到審查。
這些提交過程是所有應用程式要在 App Center 上市所需的，但所有的應用程式仍可以繼續使用 Facebook 的 API，Bookmarks， Requests， Timeline 和 News Feed。提交到 App Center 不是必需的，但鼓勵大家這麼做，作為應用中心提供了一個獲取新用戶的重要機遇。
開發人員可以提交之前預覽他們的應用程序的詳細信息頁面，在頁面頂部點擊“預覽”鏈接。這將顯示一個實時預覽：
開發人員可以提交他們的應用程式，通過點擊 App Center 的頂上方按鈕。一旦提交將會顯示一條訊息，提交正在等待審查。一旦你的應用程式已經批准，將更新此訊息。
注意：一旦您提交您的應用程式的細節頁面，設定值不能被改變，直到提交批准或取消提交。一旦你的應用程式的細節頁面在 App Center 上市，頁面上的所有未來的變化也將受到審查。
這些提交過程是所有應用程式要在 App Center 上市所需的，但所有的應用程式仍可以繼續使用 Facebook 的 API，Bookmarks， Requests， Timeline 和 News Feed。提交到 App Center 不是必需的，但鼓勵大家這麼做，作為應用中心提供了一個獲取新用戶的重要機遇。
留言
張貼留言