The App Center is the central place to find great social apps. The App Center is an additional channel to grow Apps on Facebook, mobile apps and Websites with Facebook Login. We encourage all developers to create an app detail page to appear in search and be eligible for listing in the App Center.
This doc will guide developers through the process of configuring their apps:
If you have not already created an app on the Facebook Platform you should refer to the guides for developing Apps on Facebook, Facebook Mobile Apps or Facebook for Websites.
This doc assumes you are already comfortable navigating the App Dashboard, are familiar with the basic settings and have read the App Center Guidelines. To ensure users have a good initial experience, app detail pages that are eligible for the App Center will be reviewed prior to being listed.
All developers should create an app detail page in the App Dashboard. These pages help people understand what makes an app unique, see screenshots of the experience, and login to start using the app. After a user authenticates from an app detail page, they’ll be sent into the app, whether it’s on Facebook, a website or a mobile app.
App detail pages are required to be eligible for listing in the App Center. They will also become the destination page when non-users search for your app on Facebook.
To access the App Center settings, visit the App Dashboard and click on the App Details tab in the left navigation.
Here you can enter the values that will display on the app detail page in the App Center. You can configure your App Display Name, Category, Tagline and Description. The Detailed Description field is unique to the App Center and allows for larger amount of copy letting you enter a more detailed description for your app detail page. Before submitting please make sure that your Tagline does not contain your Display Name, and your Detailed Description contains greater detail than your short Description.
Make sure to only display the platforms that your app supports and are ready for the App Center. If you are testing an iOS App that uses the same App ID as your App on Facebook but it's still in development, you should mark this as hidden in your app detail configuration. Your supported platforms can be toggled as displayed or hidden in the Listed Platforms section.
Note: If you support both a Website with Facebook Login and an App on Facebook, only the App on Facebook will be displayed within App Center to help reduce any user confusion.
Finally you will need to provide support information in the Support Info section. In order to be listed in the App Center, developers are required to enter a Privacy Policy URL, Terms of Service URL and either a User Support Email address or URL.
Developers need to upload icons, banners and screenshots. These may vary based on the platforms the app supports. The image assets required will be displayed automatically in the App Details tab based on the platforms marked as supported in the app's Basic Settings tab.
When creating your images:
Icons:
Size (px) | Display Location | Example |
16 x 16 | News feed stories, bookmarks | |
64 x 64 | Auth Dialog, hovercards | |
96 x 96 | Mobile app detail page | |
128 x 128 | Web app detail page |
Web Editor's Pick Banners:
Size (px) | Display Location | Example |
155 x 100 | Lists on the main page, category pages, and subcategory pages | |
394 x 150 | Featured unit at the top of the main page (optional, only used if selected) | |
180 x 115 | Featured units on the right side of pages (optional, only used if selected) |
Mobile Editor's Pick Banners:
App Center supports the following mobile screen resolutions:
Size (px) | Display Location |
136 x 88 | Lists on the main page, category pages, and subcategory pages (MDPI) |
204 x 132 | Lists on the main page, category pages, and subcategory pages (HDPI) |
272 x 176 | Lists on the main page, category pages, and subcategory pages (XHDPI) |
Cover Images:
When designing the Cover image, developers should keep in mind that the 128x128 px icon slightly obscures the lower left corner of the Cover image, as displayed below.
Size (px) | Display Location | Example |
800 x 150 | App detail page |
Screenshots:
Developers can submit up to 5 screenshots per platform that the app supports (Web, Canvas, Mobile Web, iPhone, iPad, Android) and are required to submit at least 3 screenshots per platform.
Screenshots should display real gameplay and not contain any marketing materials or banners. App Center supports screenshot dimensions between 320 x 320 to 2048 x 2048 pixels.
If the aspect ratio of a screenshot doesn't fit with aspect ratio of the display box in App Center, we will scale the screenshot so one dimension is perfectly fit and then crop and center the image accordingly.
Screenshots are chosen based on which device the user is using to view the page. If you are viewing the page on iPhone, iPhone screenshots get priority. If the app doesn't support iOS then mobile web screenshots get priority, and so on.
There are 2 designs for screenshots layout:
App Center will use the later layout only if all 3 screenshots are landscape. Otherwise, the first layout is used and portrait screenshots always come before any landscape screenshots (so the first screenshot is always a portrait).
Size (px) | Display Location |
(320 - 2048) x (320 - 2048) | App detail page screenshots |
The app detail page in the App Center displays the permissions required for new users. It can be considered a version of the Auth Dialog in this capacity, making it easy for new users to install your app directly from the App Center. You can configure the set of permissions your app requires in the Settings > Permissions tab.
The following fields are available when configuring the Permissions section under the App Center settings:
URI Fragment
: if your app is using client-side authenticationQuery String
: if your app is using server-side authentication.If your app is a canvas app, we will not use this setting and will use the "signed_request" as the response type automatically.
While some users will be directed to an app detail page from App Center, other users may still navigate to your app by directly entering your URL or through Feed, Requests and Ads. In these cases you will still need to handle authorization through the existing Auth Dialog.
A special consideration when using the Query String setting:
If you would like to use the server-side authentication flow with App Center it is important to make sure you are passing the redirect_uri
parameter correctly when exchanging your code
for an access token. You should set your redirect_uri
parameter to the click-through URL to your site. In most cases the URL will look something like:
http://www.example.com/?fb_appcenter=1&fb_source=search&code=CODE_HERE
thus you should set your redirect_uri to the same value. Please make sure that this logic is dynamic as the query parameters appended to your click-through URL may be subject to change.
Most Canvas apps immediately redirect new users to the Auth Dialog via a client side redirect. This functionality should be maintained after submitting to the App Center as users may still navigate to the app by directly typing in the URL and will still need to be authorized. Developers must make sure that they are asking for the same set of permissions in both cases; the App Center permission configuration should match what developers are already asking for in the scope
parameter of the OAuth Dialog. If these do not match, users could end up seeing two authorization prompts in a row, resulting in a confusing user experience and preventing your app from being listed in the App Center.
Mobile apps must use Single Sign On (SSO) to be eligible for display in the App Center. Only mobile apps that provide a seamless login process after clicking through the app detail page will be listed in the App Center.
People will be able to browse the App Center on Facebook.com and through the Facebook mobile apps. When people want to use a native mobile app that requires installation, they will be directed to download the app from the Apple App Store or Google Play. The App Center links to mobile app marketplaces and is designed to drive growth for great social apps on iOS, Android and the mobile web.
The app detail page in the App Center will take care of authorizing users before they arrive on your website, but it's important to make sure that these users have a personalized experience when they land on your site after clicking through from App Center. Users should not have to click a second "Login to Facebook" button on your website, rather they should see some evidence of personalization in order to optimize the user experience.
The following sample code will check to see if the user has authorized the app and the print a personalized welcome message e.g. 'Welcome, Constantin!'.
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="welcomeMessage"></div>
<!-- Load the Facebook JavaScript SDK -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID', // App ID
status : true, // check login status
cookie : true
});
// Check if the current user is logged in
// and has authorized the app
FB.getLoginStatus(function(response) {
// Check the result of the user
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 = 'Hello, ' + response.first_name;
});
} else {
// The user has not authenticated your app,
// proceed with your normal (anonymous) flow.
}
});
};
// Load the SDK Asynchronously
(function(d){
var js;
var id = 'facebook-jssdk';
var ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</body>
</html>
For more information on how to detect the user's Facebook state see the JavaScript SDK, FB.getLoginStatus documentation and this blog post.
For an app to be listed in the App Center, your app must meet the guidelines. Facebook will review images, additional app details, and the user experience. If your app is rejected, we'll explain why and give you suggestions for what to change. Once you make the changes we suggest, you can resubmit to be listed in App Center.
Developers can preview their app detail page prior to submission by clicking the 'Preview' link at the top of the page. This will display a live preview:
Developers can submit their app by clicking the button at the top of the App Center section. Once submitted a message will be displayed indicating that the submission is pending review. This message will be updated if your app becomes listed in the App Center.
Note: Once you have submitted your app detail page, the values cannot be changed until your app is listed or you cancel the submission. Once your app detail page is listed in the App Center, all future changes to the page will also be subject to review.
The submission process is required for an app to be listed in the App Center, but all apps can continue to use the Facebook APIs and grow through Bookmarks, Requests, Timeline and News Feed. Submitting to the App Center is not a requirement, but it's highly encouraged, as the App Center provides a significant opportunity for new user acquisition.