Step by Step - Facebook API

(1)

Getting Started Websites Apps on Facebook Mobile

Samples & How-Tos Videos

Core Concepts Advanced Topics SDKs & Tools Open Graph Beta

Getting Started

Websites

Using Facebook on your Website allows you to create a more personalized, social experience usingSocial Pluginssuch as theLike Buttonand simplify your registration and sign-in process usingLogin ButtonandRegistration Plugin

Mobile Apps

Facebook Platform makes iOS (iPhone & iPad), Android and Mobile Web apps social. Use Single Sign-On to access the user's social graph (without yet another username/password) and create a personalized experience.

Apps on Facebook

Building an app on Facebook gives you the opportunity to deeply integrate into our core user experience. Use the native functionality of Facebook such asRequestsandBookmarksto create an ideal social space for your users.

Core Concepts

Social Design

The Social Design Guidelines helps you understand why you should build great social experiences as well as how to use Facebook Platform effectively to create them.

Social Plugins

Social Plugins enable you to provide engaging social experiences to your users with just a line of HTML without the need for the viewer to have signed into your site.

Open Graph protocol

The Open Graph protocol enables you to integrate your pages into the social graph. These pages gain the functionality of other graph objects including profile links and stream updates.

Social Channels

Facebook Platform lets you integrate with social channels such as News Feed and Requests to help you drive growth and engagement with your app, site or content.

Authentication

Facebook authentication enables your app to interact with the Graph API on behalf of Facebook users and provides a powerful single-sign on mechanism across Web, mobile, and desktop apps.

Graph API

The Graph API is the core of Facebook Platform, enabling you to read and write data to Facebook. It provides a simple and consistent view of the social graph.

Advanced Topics

Dialogs

Dialogs provide a simple, consistent interface to display dialogs to users. Dialogs do not require special user permissions because they require user interaction.

FQL

Facebook Query Language, or FQL, enables you to use a SQL-style interface to query the data exposed by the Graph API.

Internationalization API Take advantage of our community Translations framework, which has helped Facebook be available in over 70 languages, to translate your app or website.

Credits

Facebook Credits is a payment system that offers a safe, easy and fast way to pay for digital and virtual goods in games and apps across Facebook.

Ads API

The Facebook Ads API lets you create and manage your own ads on Facebook programmatically, without using theFacebook Advertising Manager tool.

Chat API

You can integrate Facebook Chat into your Web-based, desktop, or mobile instant messaging products. Your instant messaging client connects to Facebook Chat via the Jabber/XMPP service.

Legacy APIs

REST API,FBML, andthe old Javascript APIare legacy APIs that

(2)

Report Documentation Bug we are in the process of deprecating.

Please useGraph API,JavaScript SDKandSocial Pluginsinstead.

SDK & Tools

JavaScript SDK

The JavaScript SDK enables you to access features of the Graph API and Dialogs via JavaScript. It provides rich client-side functionality for

authentication and rendering Social Plugins.

IOS SDK

The iOS SDK provides Facebook Platform support for iPhone, iPad and iPod Touch apps. You can utilize single-sign-on, call the Graph API and display Platform Dialogs.

Android SDK

The Android SDK provides Facebook Platform support for Android apps. You can utilize single-sign-on, call the Graph API and display Platform Dialogs.

PHP SDK

This SDK provides Facebook Platform support to your PHP-based web apps. This library helps you add Facebook Login and Graph API support to your Website.

Tools

Developer App,Insights Dashboard, Graph API explorer,JavaScript Test Console,Test Users,URL Linterare some of the many tools we provide to help you develop, test and monitor your app.

Diperbarui sekitar sebulan yang lalu

Kirim 107.479

(3)

Getting Started Websites Apps on Facebook Mobile

Facebook for Websites

Getting Started›Facebook for Websites

Facebook Platform enables you to make your website more social. You can use ourSocial Plugins, such as theLike Button to drive user engagement with a single line of HTML. OurLogin ButtonandRegistration Pluginlet you simplify or eliminate your own user registration and sign-in. Lastly, theGraph APIlets you access the full social graph of a given user, allowing you to create a truly deep personal experience.

This guide will walk you through the basics of creating a web app that leverages these features. The examples in this guide use PHP for server-side programming and HTML/JavaScript for client-side code. These examples are very straightforward and easily translatable to other languages.

In this document: Social Plugins Authentication Personalization Analytics

Social Plugins

Social Pluginsare the easiest way to get started with Facebook Platform. The plugins are embeddable social features that can be integrated in your site with a line of HTML. Because they are hosted by Facebook, the plugins are personalized for all users who are currently logged into Facebook, even if they are visiting your site for the first time.

The most important Social Plugin is theLike Button, which enables users to share your page with their friends with one click. You can add a Like button to any page with aniframetag:

<title>My Great Web page</title> </head>

<body>

style="border:none; width:450px; height:80px"></iframe> </body>

</html>

There are anumber of optionsfor the Like Button, including the option to include the names and profile pictures of the user's friends who have also liked the page. Here is a Like Button for the Facebook Developers site:

Once you have included the Like Button into your site, you can use other Social Plugins to turn those user interactions into more engaging experiences throughout your site. You can use theActivity Feed Pluginto show users a stream of the recent likes and comments from their friends on your site. You can use theRecommendations Pluginto show personalized page recommendations to your users based on the likes and comments across your entire site. Here are the activity and recommendations plugins for the Facebook Developers site:

Suka 39.301 orang menyukai ini. Jadilah orang pertama di antara teman-teman.

(4)

Most Social Plugins can be integrated with your site by simply including theiframetag for the plugin within your page. There are several Social Plugins, such asCommentsandLive Stream, that require the use of XFBML (eXtended Facebook Markup Language). XFBML is a set of XML elements that can be included in your HTML pages to display Social Plugins. When your page is loaded, any XFBML elements found in the document are processed by theJavaScript SDK, resulting in the appropriate plugin being rendered on your page.

We provide XFBML elements for all of our Social Plugins. For example, the Like Button can also be placed on your page by using the XFBML equivalent:

<title>My Great Web page</title> </head> <body> <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk')); </script>

</html>

Theiframeversions of our plugins are the most widely used, as they require a minimal understanding of Facebook Platform. The XFBML versions are typically used by more sophisticated developers looking for more control and consistency in their codebase.

Getting started could not be simpler. Just select the plugin from ourSocial Plugin pageand follow the steps in the provided configurator. These configurators, like the below, help you setup your plugin and generate all the code you need to add it to your site.

Authentication

Facebook helps you simplify and enhance user registration and sign-in by using Facebook as your login system. Users no longer need to fill in yet another registration form or remember another username and password to use your site. As long as the user is signed into Facebook, they are automatically signed into your site as well. Using Facebook for login provides you with all the information you need to create a social, personalized experience from the moment the user visits your site in their browser.

Facebook Platform usesOAuth 2.0for authentication and authorization. While you can add login to your site using OAuth Aktivitas Terbaru

Sandi FebriyantodanTeguh Mafandi berbagiLike Box. ·sekitar 4 bulan yang lalu Introducing the Subscribe Button for Websites

2.035 orang menyarankan ini. Breaking Change: JavaScript SDK to oauth:true on December 13th 353 orang menyarankan ini. Removing App Profile Pages 710 orang menyarankan ini. Page title

106 orang menyarankan ini.

Plugin sosial Facebook

Saran Like Box

Sandi Febriyanto,Teguh Mafandi, dan 314.889 orang lainnya menyarankan ini. Introducing the Subscribe Button for Websites

2.035 orang menyarankan ini. Breaking Change: JavaScript SDK to oauth:true on December 13th 353 orang menyarankan ini. Removing App Profile Pages 710 orang menyarankan ini. Page title

106 orang menyarankan ini.

(5)

2.0 directly (see ourAuthentication Overview), the open sourceJavaScript SDKis the simplest way to use Facebook for login.

The JavaScript SDK requires that youregister your websitewith Facebook to get an App ID (or appId). The appId is a unique identifier for your site that ensures that we have the right level of security in place between the user and your website. The following example shows how to load the JavaScript SDK once you have your appId:

<title>My Facebook Login Page</title> </head> <body> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', status : true, cookie : true, xfbml : true, oauth : true, }); }; (function(d){

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> </body> </html>

Once you have loaded the JavaScript SDK into your page and initialized it with your appId, you simply add theLogin Buttonto your page using the<div class="fb-login-button">element as shown below:

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js";

d.getElementsByTagName('head')[0].appendChild(js); }(document));

</script>

<div class="fb-login-button">Login with Facebook</div> </body>

</html>

(6)

In order to log the user into your site, three things need to happen. First, Facebook needs to authenticate the user. This ensures that the user is who they say they are. Second, Facebook needs to authenticate your website. This ensures that the user is giving their information to your site and not someone else. Lastly, the user must explicitly authorize your website to access their information. This ensures that the user knows exactly what data they are disclosing to your site. These steps may seem complex, but fortunately all you need to do is use the Login Button and all the user needs to do is click it. When the user does so, the JavaScript SDK will ensure that the user is signed into Facebook and that the request is coming from your website. We then present an authorization dialog in their browser that provides information about your site and the user data you are requesting. By default, this dialog looks like the below:

If the user clicks Allow, we will give your site access to the requested information. If the user clicks, Don't Allow the dialog will close and no information will be available to your website. By default, we give you access to the user's name, picture and any other data they have shared with everyone on Facebook (see theUser Graph objectfor more details). If you need access to more information, such as the user's email address, etc. you must request permissions for this information. If you can do this by adding the permissions you need to thepermsattribute of the Login Button like below:

(7)

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js";

d.getElementsByTagName('head')[0].appendChild(js); }(document));

</script>

<div class="fb-login-button" data-perms="email,user_checkins"> Login with Facebook

</div> </body> </html>

When the user clicks the login button from this page, they will see the below authorization dialog. Note that there are now two new sections that outline the additional information that your site is requesting permission to access.

A full list of permissions is available in ourpermissions reference. There is a strong inverse correlation between the number of permissions your site requests and the number of users that will allow those permissions. The greater the number of permissions you ask for, the lower the number of users that will grant them; so we recommend that you only request the permissions you absolutely need for your site.

In addition to Login Button, we offer theRegistration Plugin. The Registration Plugin offers two key features not available with the Login Button: support for users without Facebook accounts and the ability to request additional user information that Facebook may not have or make available.

Using the Registration Plugin is just as simple as using the Login Button. You merely need to use the<div class="fb-registration">element in your page, rather than the Login Button:

(8)

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <div class="fb-registration" data-fields="[{'name':'name'}, {'name':'email'},

{'name':'favorite_car','description':'What is your favorite car?', 'type':'text'}]"

data-redirect-uri="URL_TO_LOAD_AFTER_REGISTRATION" </div>

</body> </html>

If the user is not already logged into Facebook, they will see the below form. Notice that the form is not prefilled with any user information, but there is a link to login to Facebook to do so.

If the user is already logged into Facebook or decides to login from the registration form, they will see the below. Notice that the form is now prefilled with their Facebook information.

(9)

Once the user reviews the information and/or enters any custom fields (in the above example,favorite_caris a custom field that the user must populate directly, as it is not data that is currently part of the user's Facebook profile), the user clicks Register. This will start the authentication and authorization process which is denoted by the below dialog:

With authentication/authorization complete, we redirect the user to whatever URL you placed into theredirect-uri attribute of the plugin which completes the registration process.

The Login Button and the Registration Plugin allow you to easily bring the more than 500 million Facebook users to your site. In doing so, you can also eliminate or reduce whole parts of your codebase. You can learn more about how to add Login with Facebook to your site by reading the documentation for theLogin Button, theRegistration Pluginand the JavaScript SDK.

Personalization

WhileSocial Pluginsoffer a easy way to personalized your site, once you have added login to your site, you can access the full power of theGraph APIto create an even deeper personalized experience for your users. You can use the Graph API to access the user's Facebook profile, using this data in your own custom experience. You can use the Graph API to publish to the user's Facebook Wall and their News Feed. You can use the Graph API to access the user's social graph, bring their friends directly to your site all in your own custom experience.

TheJavascript SDKprovides a straightforward way to access the Graph API:FB.api. This function takes a string argument which specifies the part of the Graph to target and a callback function that is invoked when the call completes. The following demonstrates how to use FB.api() to retrieve the user's picture and name from the Graph API and display it on a page within your site:

(10)

<title>My Facebook Login Page</title> </head> <body> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', status : true, cookie : true, xfbml : true, oauth : true, }); FB.api('/me', function(user) { if (user) {

var image = document.getElementById('image');

image.src = 'https://graph.facebook.com/' + user.id + '/picture'; var name = document.getElementById('name');

name.innerHTML = user.name }

}); };

(function(d){

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> <div align="center"> <img id="image"/> <div id="name"></div> </div> </body> </html>

Another way to personalize your site with the JavaScript SDK is theFB.uifunction. This function invokes ourPlatform Dialogswithin the context of your site. You can use the FB.ui function to post to the user's Feed or allow them to invite new friends. The following demonstrates how to use the Feed Dialog from your site:

(11)

<title>My Facebook Login Page</title> </head> <body> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', status : true, cookie : true, xfbml : true, oauth : true, });

FB.ui({ method: 'feed',

message: 'Facebook for Websites is super-cool'}); };

(function(d){

When this page is loaded in the user's browser, the JavaScript SDK will render the below dialog that the user can use to post to their feed. You can set a number of defaults for the dialog, which the user can then modify or override prior to posting.

One of the best ways to learn what is possible with the JavaScript SDK is ourJavaScript Console. The tool offers a host of examples that you can execute directly in the console itself before you make any changes to your site.

The Javascript SDK lets you access the Graph API and Platform Dialogs from client-side code but some of the most interesting integrations involve accessing the Graph API from server-side code running on your web server. The JavaScript SDK saves the details for the logged in user in a cookie namedfbs_YOUR_APP_ID. The following PHP example shows you how to use access this cookie and then customize the generated page based on this information:

(12)

<?php

define('YOUR_APP_ID', 'your app id '); define('YOUR_APP_SECRET', 'your app secret'); function get_facebook_cookie($app_id, $app_secret) {

$args = array();

parse_str(trim($_COOKIE['fbs_' . $app_id], '\\"'), $args); ksort($args);

$payload = '';

foreach ($args as $key => $value) { if ($key != 'sig') {

$payload .= $key . '=' . $value; }

}

if (md5($payload . $app_secret) != $args['sig']) { return null;

}

return $args; }

$cookie = get_facebook_cookie(YOUR_APP_ID, YOUR_APP_SECRET); $user = json_decode(file_get_contents( 'https://graph.facebook.com/me?access_token=' . $cookie['access_token'])); ?> <html> <body> <?php if ($cookie) { ?> Welcome <?= $user->name ?> <?php } else { ?> <fb:login-button></fb:login-button> <?php } ?> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : '<?= YOUR_APP_ID ?>', status : true, cookie : true, xfbml : true, oauth : true, }); FB.Event.subscribe('auth.login', function(response) { window.location.reload(); }); }; (function(d){

Using the JavaScript SDK cookie is only one of several ways to access user credentials and information from server-side code. OurSecurity Guidehighlights how to perform authentication and authorization directly from your web server allowing you to access the Graph API without using any client-side code.

Analytics

You can get detailed analytics about the demographics of your users and how users are sharing from your website with Insights.

(13)

Report Documentation Bug

Insightsprovides reports broken down by domain and by app. These reports include rich data about users sharing content from your site within Facebook and other Facebook-enabled apps no matter where those activity originated. For example, if a user puts a URL from your site into a Facebook status message, that data is included in the analytics for your domain. The data from Insights is alsoavailable in the Graph APIso you can integrate the Facebook analytics data with your own, in-house analytics systems.

If you use an external analytics system, there are a couple of steps you can take to ensure proper counts for page hits on your domain. First, exclude requests with a user agent matchingfacebookexternalhit/*. This user agent is used by the Facebook Open Graph tools to retrieve yourogmeta tags. Second, track clicks from plugins embedded on your site separately from clicks with a facebook.com referrer. Social Plugins with have a referral URL matching

http://www.facebook.com/plugins/*.

Next Steps

This was a quick survey of the major features available to your website from Facebook Platform. Our core concepts documents provide deeper insight into the various pieces of Facebook Platform. TheGraph APIis a great place to start. If you are looking for a real world examples to help you get started building please see ourSamples. If you are looking for inspiration, check out ourShowcase.

Diperbarui pada hari Senin

Kirim 160.777

(14)

Getting Started Websites

Apps on Facebook Mobile

Tutorials Canvas Tutorial Page Tab Tutorial

Core APIs Achievements Scores Requests

Apps on Facebook.com

Getting Started›Apps on Facebook.com

Building an app on Facebook gives you the opportunity to deeply integrate into the core Facebook experience. Your app can integrate with many aspects of Facebook.com, including the News Feed and Notifications. All of the core Facebook Platform technologies, such asSocial Plugins, theGraph APIandPlatform Dialogsare available to Apps on Facebook. In this document we will explain the following concepts:

Canvas Page: The Page in which your app is loaded.

Social Channels: The key channels that help you grow your user base and re-engage existing users. Analytics: Accessing analytics for your application.

If you wish to start building an App on Facebook now, please refer to ourgetting started tutorial. If you want to build an app to add to the tab of aFacebook Pagethen you should refer toPage Tabs.

Canvas Page

Apps on Facebook are web apps that are loaded in the context of Facebook in what we refer to as a Canvas Page. You can build your app using any language or tool chain that supports web programming, such as PHP, Python, Java or C#.

Canvas for your app

Apps on Facebook are loaded into a Canvas Page. A Canvas Page is quite literally a blank canvas within Facebook on which to run your app. You populate the Canvas Page by providing a Canvas URL that contains the HTML, JavaScript and CSS that make up your app. When a user requests the Canvas Page, we load the Canvas URL within aniframeon that page. This results in your app being displayed within the standard Facebook chrome.

The canvas chrome is 760px width by default but you can set it to be a Fluid Canvas so that it is left aligned and takes up the full width and height of the user browser.

If you want to get started with building an App on Facebook right away, please read thegetting started tutorial.

Bookmarks for quick re-engagement

Once a user starts using your app, we create a bookmark to enable users to easily navigate back to your app from within Facebook. These Bookmarks are available on theFacebook homepageas well as on the Canvas Page on the top right

(15)

corner.

These Bookmarks are ordered based on how often and recently the user used your app. The red counters on the bookmarks notify users of outstandingRequests 2.0related requests for your apps and encourage them to respond.

Real-time social app activity

To drive greater engagement with platform apps, on the upper right side of canvas pages we present a live ticker of app-specific updates from the users' friends.

When a user first enters an application, we present stories that are most relevant to that app. These stories are about the user and their friends interacting with the app or game currently being used.

As a user continues to use the app, we broaden what is presented to updates from friends using the app that the user both currently uses and has not yet installed.

Note that content in the app ticker is specific to the app context the user is in. So, if the user is playing a game, the messages the user will see will be specific to what their friends are doing in other games only.

Discovery stories

To help users discover new apps and games, Facebook generates ‘playing’ and ‘using’ stories by default, when friends use an app or play a game respectively. These stories show up in the canvas Ticker in real-time. The user is marked as playing if we have had a ping from them in the last 15 minutes. We ping 5 seconds in, then 5 minutes in, then every 10 minutes. We change the language to 'played' and 'used' if the user played or used the app more than 15 minutes ago.

Developers of app associated with more personal behavior such as dating, weight management or pregnancy, can turn these stories off by disabling the social discovery field in theDeveloper appin the ‘On Facebook’ tab under the ‘Canvas’ section.

Game stories

Developers of apps categorized as 'Games' can publish additional stories into the ticker by using the Graph APIs for achievementsandscores. These stories are only shown to users, when using an app categorized as 'Games'.

Theachievements APIallows you to publish stories about the user and their friends achieving a set of achievements you define for your app. Thescores APIallows you to publish stories about the user and their friends passing each others' scores in your app as well as High Score stories when the user earns a new high score. The user needs to grant your app with thepublish_actionspermission before you can publish a user's scores and achievements.

User control

(16)

users want people to see that they are playing one game, but not another, they can control that.

They can also control individual stories by x-ing them out real-time from the ticker.

Social Channels

To drive more traffic to apps on Facebook, we enable various channels that enable new users to discover your app as well as existing users to re-engage with your app. Each channel is designed to help engage users and our algorithms help surface the best content for each user. The current channels include:

Bookmarks

Bookmarks enable users to easily navigate back to your app from within Facebook. Bookmarks are automatically added for your app after the user engages with your apps. The bookmark will appear on left column of the homepage as well as on the top right of a Canvas Page. Users can add a bookmark to 'favorite' which pins them to the top. Bookmarks also show a counter next to them which represents the number of outstandingrequestsfor the user for your app. Themorelink next to the app bookmarks takes the user to the app dashboard which shows the outstanding app requests as well as the full list of apps the user has authenticated.

(17)

Notifications on Facebook are meant to provide prominent but lightweight heads-up about interesting changes to content relevant to users. Requests from your app may trigger a notification to users who will find it relevant.

Requests are a great way to enable users to invite their friends to your application. You can also use requests to have a user notify their friends to take a specific action in your app, such as accepting a gift or helping the user complete a quest. There are two types of requests that can be sent from an app:

User-generated requests: These requests are confirmed by a user’s explicit action on a request dialog. These requests update the bookmark count for the recipient.

App-generated requests: These requests can be initiated and sent only to users who have authorized your app. You should use these requests to update the bookmark count to encourage a user to re-engage in the app (e.g., your friend finished her move in a game and it’s now your turn).

You can learn more about how to enable users to send request from your app in ourgetting started tutorial

News Feed stories

The News Feed is shown immediately to users upon logging into Facebook, making it core to the Facebook experience. Discovery stories

Similar to thediscovery storiesin the Ticker, Facebook also shares stories with friends when a user starts using a new app or first installs a new game. These installation discovery stories show up in friends' News Feed and enables users to discovery popular apps their friends are using. Similar to the Tickerdiscovery stories, you can turn these stories off by disabling the social discovery field in thedeveloper appin the ‘On Facebook’ tab under the ‘Canvas’ section.

Publishing stories

In addition you can publish content to the stream using theFeed Dialog. You can prompt users to publish stories about what they are doing in your app. If a user chooses to publish, the story will appear on the user’s profile and may appear to the user’s friends’ News Feeds. Stories published from your app will include a link to your app, and can optionally include a rich attachment. You can learn more about how to enable users to publish stories from your app in ourgetting started tutorial.

Search

Each new app has its own App Profile Page (for example, seeFacebook Live's page). This Page is similar to other Pages and user profiles on Facebook, and it includes Wall and Info tabs as well as other configurable tabs. When users search for your app, this Page shows up in the search type-ahead or on the search results page. From this Page, users can navigate to your app or Like the App Profile Page. You can also choose toupdate userswho have liked your profile Page with news about your app.

When your App reaches 10 monthly active users it will be automatically queued to be included in the search index the next time we rebuild our search index (we rebuild every 2-4 weeks). After the index is rebuilt your app will be discoverable via Search.

Analytics

Use Insights for your app to track how users are interacting with your app to build the best possible experience for your users. For app administrators, Insights includes feedback for stream stories, referral traffic to your app, a breakdown of

(18)

Report Documentation Bug what user actions contribute to active user count, demographics on authorized users and active users, and the number of times permissions are prompted and granted.

In addition, it provides diagnostics for your app so that you can track API errors as well as get access to allocations and throttling information.

You can access Insights for your app directly through theInsights Dashboardor by selecting your app in theDeveloper app and clicking the “insights" link.

Developers can also track referral traffic from the Ticker stories via the following ref_params.

Param Description

fb_source Source of the referral for examplecanvas_ticker fb_action_type type of action for examplegame.plays.

fb_ticker_mod ticker module, for examplenow_playing, leaderboard_passing, now_using, achievement_landing

Next Steps

Get started with building an App on Facebook by reading ourtutorial.

To learn more about our Game APIs, read theachievementsandscoresAPI docs. Please read about our core concepts -authentication,Graph API,Social Channels. To learn how to buildFacebook Pagetabs, starthere.

Diperbarui hari Kamis lalu

Kirim Fajar

(19)

Getting Started Websites Apps on Facebook Mobile

Getting Started Mobile Distribution

Mobile Web Mobile Web Tutorial

iOS iOS Tutorial iOS SDK Android Android Tutorial Android SDK Hackbook for Android

Mobile

Getting Started›Mobile

Over 350 million users access Facebook from a mobile device every month. Facebook Platform

lets you bring these users and their friends to your mobile apps, creating a more engaging and

personalized experience for your users.

Seamless Social Experiences

Facebook Platform enables seamless social experiences across a large variety of devices.

Distribution. Users can share with their friends using Requests, News Feed, and Open Graph.

Engagement. Bring users back to your app through a bookmark or search. Keep them there by letting them connect with their friends.

Cross-platform. The same Javascript SDK works across web and mobile, so it's easy to build one experience that works across multiple devices.

Login

Authenticated referrals is a new authentication mode for Facebook applications that ensures all referral traffic from Facebook to your application is already connected with Facebook.

This means that visitors arrive on your app already "logged in" and with whatever data permissions (email, likes and interests, etc.) you requested in the Required Permissions section. You can use this information to provide a personalized experience for Facebook visitors the moment they land on your app.

The flow below shows what happens when a user receives a Request (more on that below) and taps on it.

Social Channels

One benefit of using Facebook Platform is the potential reach you have when Facebook users share content from your app or website with their friends. Because of the strength of a friend’s endorsement, communication through Facebook Platform can help high-quality products grow tremendously. When users tap on links, they are deep-linked directly into your app.

All of the screenshots below illustrate a Mobile Web App integration running on iPhone. To understand the availability of See it in action: Android Phones Android Tablets iPhone and iPod iPad

(20)

each channel across web apps, iOS and Android, view themobile distribution supportdoc.

Requests

Requests are a great way to enable users to invite specific friends to play a turn in a game, complete a task, or just generally use your app.

Timeline and Open Graph

After a user adds your app to their Timeline, app specific actions are shared on Facebook via the Open Graph. As your app becomes an important part of how users express themselves, these actions are more prominently displayed throughout the Facebook Timeline and News Feed.

Timeline is coming soon to mobile. In preparation, you can start integrating with the Open Graph today.Learn more about the Open Graph beta program.

News Feed

When users log into Facebook, the News Feed is the first thing they see, making it core to the Facebook experience. The screenshots below show you how a user can post to their own wall, which will appear in their friends' News Feeds. See it in action: Android Phones Android Tablets iPhone and iPod iPad

(21)

Bookmarks

Bookmarks are automatically displayed to the user within Facebook once they login to your app. On our mobile web site, users can now navigate to web apps via bookmarks. Similarly, on our iPhone and iPad apps, users are now able to navigate to native iOS apps. This list of bookmarks is in sync across desktop and mobile so the apps you use most frequently are there when you want them.

Search

User can also search for your app within Facebook, whether they have already logged into your app in the past or not.

Social Plugins

Social plugins let you see what your friends have liked, commented on or shared on sites across the web. The like button allows your users to easily share interesting content from your app back to Facebook. Like stories appear on the user's Wall and their friends’ News Feeds. Currently,the Like buttonis only available in mobile web apps.

Email

When the user authenticates with your app, you can ask them for theemail permission, which grants you access to their email address. You can use this to send them information like important updates to your app or actions that their friends have been taking in your app.

See it in action: Android Phones Android Tablets iPhone and iPod iPad

(22)

Payments

Facebook Credits allows you to accept payments for digital goods or services within your app.

See ourCredits API docfor information on how to integrate Credits into your mobile web app. Credits is not supported within iOS native apps or web apps running within the Facebook iOS app.

Building Mobile Web Apps

Get maximum distribution by integrating social into your mobile web app across all iOS and Android phones and tablets. It will even run in the Facebook iOS native app. You can also ship it in native app stores by using thePhoneGap Facebook plugin. Check out some of thegreat mobile experiencesthat developers have built using Facebook Platform.

Click here to get started.

Building iOS Native Apps

If you already have a native iOS app (iPad, iPhone, iPod), then Facebook Platform enables you to integrate with Facebook login and APIs to create personalized experiences for your users and drive engagement and distribution for your app. You can also use Single Sign-on to let users sign into your app using their Facebook identity. They're signed in immediately, without having to enter their username and password, if they are already signed into the Facebook iOS app.

Click here to get started.

Building Android Native Apps

If you already have a native Android app (phone or tablet), then Facebook Platform enables you to integrate with Facebook login and APIs to create personalized experiences for your users and drive engagement and distribution for your app. You can also use Single Sign-on to let users sign into your app using their Facebook identity. They're signed in immediately, without having to enter their username and password, if they are already signed into the Facebook Android app.

Click here to get started.

Diperbarui sekitar 2 bulan yang lalu

Kirim 17.167

(23)

Getting Started Websites Apps on Facebook Mobile

Samples & How-Tos

Videos Core Concepts Advanced Topics SDKs & Tools Open Graph Beta

Samples Sample Canvas App

Samples & How-Tos

Getting Started›Samples & How-Tos

Social Plugins

winefriends

Download|Run

This sample outlines how to build asocial web sitewith the following features:Like Button, Activity Feed,Recommendations,Comments BoxandOpen Graph Protocol.

Canvas

Run with Friends

Overview|Download|Run

This sample outlines how to build aFacebook Canvas Applicationwith the following features: JavaScript SDK,Social Plugin(Login with Faces),Platform Dialogs,Graph APIusing OAuth 2.0andReal-time Updates

Insights

Export Insights Data

Download

This sample demonstrates how to export data about your Facebook Apps and Pages.

Credits

(24)

Credits Sample App

Download

This sample demonstrates how to use Credits with your Facebook Applications. Read the Credits API documentationto learn more.

How-Tos

How-To: Use the Graph API to pull the movies friends like How-To: Paging with the Graph API and FQL

How-To: Publish updates to people who like your Open Graph Page How-To: Implement Facebook Credits

How-To: Use the Graph API to Upload Photos to a user’s profile How-To: Handle expired access tokens

How-To: How to upload a video to user's profile

How-To: Use the Graph API to upload a video to a Group, Page or Application

How-To: Use the Graph API to access, add or update tags to a picture. Also see how-to get video upload limits for a user How-To: Use the Graph API to Upload a Video (iOS)

How-To: Optimize Social Plugin Performance How-To: Build an app on Facebook with Fluid Canvas How-To: Use the Graph API to Manage Events How-To: Handle Revoked Auth Permissions

Kirim 8.752

(25)

Videos

Getting Started›Videos

Mobile Hack (October 28, 2011)

Social Discovery on Mobile

Bringing Social Channels to Mobile

Partner Presentations: Wooga & AudioVroom

Partner Presentation: PhoneGap

Getting Started

Websites Apps on Facebook Mobile

Samples & How-Tos Videos

(26)

Open Graph and Mobile Native

Q&A

f8 Hack (September 23, 2011)

Overview and Demo of New Developer Tools

(27)

Games on the Open Graph

Open Graph and Mobile

Facebook Platform for Marketers (August 8, 2011)

Open Graph Protocol

(28)

Presentation:PDF

Social Design: A Definition

Presentation:PDF

Social Channels: Driving traffic to your app

Presentation:PDFCode:Zip

Authentication: An Overview

(29)

Mobile Single Sign-On

Presentation:PDFCode:iOS demo

Graph API

Presentation:PDFCode:Graph API explorer

Insights: Understanding your users

Presentation:PDF

Making Euros: Ads and Credits

(30)

Getting Started Core Concepts

Social Design Social Plugins Open Graph Protocol Social Channels Authentication Graph API Advanced Topics SDKs & Tools Open Graph Beta

Core Concepts

Social Design

The Social Design Guidelines helps you understand why you should build great social experiences as well as how to use Facebook Platform effectively to create them. Social design is a product strategy that builds upon users’ trusted communities, encourages conversation between them and ultimately creates a stronger sense of identity for everyone. Social Plugins

Social Plugins enable you to provide engaging social experiences to your users with just a line of HTML. Because the plugins are served by Facebook, the content is personalized to the viewer whether or not they have signed into your site. Open Graph Protocol

The Open Graph protocol enables you to integrate your pages into the social graph. These pages gain the functionality of other graph objects including profile links and stream updates for connected users.

Social Channels

Facebook Platform lets you integrate with social channels such as News Feed and Requests to help you drive growth and engagement with your app, site or content.

Authentication

Facebook authentication enables your app to interact with the Graph API on behalf of Facebook users and provides a powerful single-sign on mechanism across Web, mobile, and desktop apps.

Graph API

The Graph API is the core of Facebook Platform, enabling you to read and write data to Facebook. It provides a simple and consistent view of the social graph, uniformly representing objects (like people, photos, events, and pages) and the connections between them (friendships, likes, and photo tags).

Kirim 38.032

(31)

1. Utilizing Community

Facebook profile data can be used to personalize the user experience in your app so that it feels familiar, relevant and trusted by default.

2. Building Conversations

Build tools and experiences that give people the power to connect and share, allowing them to effectively listen and learn from each other.

3. Curating Identity

Users share and interact with others because self expression feels good and rewarding. Help them learn more about themselves and curate their identity.

Social Design

Core Concepts›Social Design

Social Design is a way of thinking about product design that puts social

experiences at the core. Create these social experiences with the features

available on Facebook Platform.

Three Elements of Social Design

Social Design defines how we understand ourselves and each other and can be broken down into three core elements: Identity, Conversation and Community.

Community refers to the people we know and trust and who help us make decisions. Conversation refers to the various interactions we have with our communities. Identity refers to our own sense of self and how we are seen by our communities. From our experience building Facebook and helping partner companies think about social design, we've put this document together to try to explain how we think about social design and some patterns and best practices we've observed.

Modeling a Social Experience

One way to model a social product is by working from the inside out: allow people to create an identity, let them share it and build a community over time. Facebook began this way. However, if community is already curated, as it is via Facebook Platform, you can instead

work from the outside in: utilize the existing community users have built, define new

conversations and let them continue to build their identities further. Facebook Platform makes it easy to take the "outside in" approach.

Start by defining the domain or interest that is core to your app or website (music, books, movies, etc.). Then follow the set of key guidelines below and utilize the tools that Facebook Platform provides to help you build a great social experience.

Social Design Social Plugins Open Graph Protocol Social Channels Authentication Graph API Advanced Topics SDKs & Tools Open Graph Beta

Guidelines Utilizing Community Building Conversation Curating Identity Kirim 26.605 orang

(32)

Utilizing Community

Core Concepts›Social Design›Utilizing Community

Communities feel familiar, relevant and trusted by default. Surface users' interests and their

friends in your app to create personalized user experiences.

Start by implementingFacebook Authenticationwhich enables a user to authorize your app to access profile information. You can ask for specific pieces of data about the user by requestingpermissionsrelevant to your app.

Suggest Relevant Content

Utilize Facebookprofile datain your app. If users grant the required set ofpermissions, you can utilize theGraph APIto accessusers'likes, interests, activities, movies and more to recommend content in your app. In addition you can also access their friends' likes to suggest content they may be interested in. Users have spent a lot of time curating their Facebook profiles, so using that information effectively can drastically enhance their experience, provided you clearly communicate how you are using it.

BothRotten TomatoesandAirbnb, for example, use profile information and connections to enhance the

user experience, offering users personalized and valuable information.

Connect Friends

Users feel comfortable and engaged knowing their friends are already actively participating in your app. When users join, automatically connect them to the friends who are already there, instead of making them search and add friends manually. Not only is this easier for the user, but it provides your app with social data at the start that helps engage the user.

When users connect theirSpotifyaccounts to Facebook, for example, an additional panel automatically displays their friends, allowing them to see friends' playlists, favorite songs and listening history. You can use theGraph APIto easily access users' friends.

Show Social Context

Whenever you display information from other users, always show real names and profile pictures. Social apps are about real identity, and users of Facebook expect this. If you show content from non-friends, use the same interface, but also provide other contextual information such as mutual friends, where the user is from or where they work. Context helps make the experience more authentic and personal. Seeing a comment from “Sam, a designer in New York City, 3 friends in common” is more valuable and useful than just seeing “Sam.” Use theGraph APIto access information about the user such as their workplace, their hometown, their relationship to the viewer (e.g., mutual friends), and much more. We've found it best to only show faces when they are of friends, so as not to dilute their value in the interface.

Facebook uses a variety of methods to show context about a person, such as mutual friends, school and/or location, both inline and in

hover cards. TheComments Plugin, for example, displays profile information about the people writing the comments. Getting Started

Core Concepts Social Design Social Plugins Open Graph Protocol Social Channels Authentication Graph API Advanced Topics SDKs & Tools Open Graph Beta

Guidelines

Utilizing Community

Building Conversation Curating Identity

(33)

Next: Building Conversation »

Report Documentation Bug Associating content to people that users care about naturally draws them in. Even something as simple as theFacepile plugin- which shows users the friends already using your app before they sign in - can increase sign-ups and positive feelings about the experience.

Be Transparent and Give Users Control

Be straightforward with the data you are utilizing from the user’s Facebook profile and why you are using it. Only ask for thepermissionsyou actually need; the more you ask for, the less likely users will grant them. Users may join your app and automatically trust their friends, but the first hurdle is trusting your app when first prompted with the permissions dialog.

Airbnb, for example, is clear on how they utilize data from Facebook to enhance a user's experience on the site.

Ensure that users of your app have control over the data they give you and the data your app creates from this information. Users should never feel as though something personal of theirs is being taken without permission or utilized in ways they don’t understand.

« Previously: Social Design Overview

Kirim 1.152

(34)

Building Conversation

Core Concepts›Social Design›Building Conversation

Conversations are how people express their identities to communities and how they receive

feedback from them. Build experiences that give people the power to connect and share.

An effective conversation is based in two experiences:

1. "Listening" : Displaying personalized content, social context and user activity 2. "Speaking" : Making it easy for users to talk, share, give feedback and engage Listening and speaking create a positive feedback loop that, if done right, grows exponentially.

Listening

Users are encouraged to participate when they can listen to and watch other active users on your site. OnClicker, for example, users can see the shows that their friends have watched along with recommendations based on friend activity. Many sites likeEventBriteorTripAdvisorrely on reviews from people to help with decision-making. When you can use information from the Facebook social graph to highlight content from friends, this can be even more powerful.

Showing a history of activity (highlighting friend activity) is an effective way to generate interest and conversation. Users will better understand what is expected of them and will likely seek out ways to participate.

Surface User Activity

Presenting information about the activity and actions of others is an effective and natural way to inform and engage other users. Oursocial plugins- specifically theActivity Feedand

Recommendations plugin- are simple ways to allow a user to easily see their friends' activity on your site, when paired with theLike Button.

TheLike Buttonlets people express what they like on their profile and with their friends on Facebook. Because other users see what friends like and, more importantly, because they trust their friends, they are more likely to care about the content.

A number of websites are already using thesesocial pluginsto showcase the actions that users take on their site. ForSporting News, it's a great way to see the articles most popular amongst friends. ForRdio, it's a great way to discover new music.

Provide Notifications

Create directed conversation through notifications. Use Requests on Facebookto inform users of activity in your app that is specifically relevant to them and requires their input. When users proactively engage with one another, conversation is more effective and personal. Without these, no one will know if anyone is speaking to them directly.

Speaking and Sharing

The other half of the conversation is speaking and sharing. People have to engage in the first place, and will do so when they have the right motivation. If people are sharing with people they trust, they are likely to share more often and be more open and honest.

Guidelines Utilizing Community

Building Conversation

Curating Identity

(35)

Focus the Conversation

Rather than build tools for conversation around anything, it's advantageous to decide the core theme of your app and build tools to focus conversation around that. For example, if you were creating a social cooking app, you might want users to specifically share:

Recipes

Photos of dishes they’ve made Favorite ingredients

Cooking techniques

Great social apps get users to engage in interesting ways about things they care about. The easier, more fun and

useful a sharing interface can be, the more likely a user will contribute.

Reduce Sharing Friction

Simple actions taken by users can initiate conversations. Placing theLike Buttonon your website is a simple and effective way to get users to engage and start sharing. TheSend Buttonsimilarly allows users to share with a smaller set of friends. Apps can use any number of these quick actions to involve users. In aggregate and over time, these simple interactions can provide a more complex and meaningful data set around which you can build conversation.

Encourage Feedback

Users are far more likely to start engaging with your app by responding to content created by their friends than they are likely to create their own. Because of this, users should be able to interact with nearly every piece of content in your app, for every piece of content can be its own conversation topic.

TheComments Pluginis an easy and effective tool that you can integrate into your site to enable friends to easily give feedback on content created on your site. All of the activity in the plugin will be surfaced to users’ friends through varioussocial channelson Facebook. This builds an effective listening experience that prompts more conversation.

Encourage Sharing

When conversation is directed, it becomes more personal. You can use theGraph APIto enable users to tag friends in photos or posts which enables sharing directly with them. This is an effective way to involve friends in the sharing experience, prompting them to interact more. InSpotify, for example, users can send songs to specific friends or post to their own walls and share with everyone. In our experience, we have found that the rate of sharing and feedback is dramatically impacted by how easy and intuitive it is to share. Think carefully about your sharing interfaces and make them as simple as possible.

Share Outside Too

The relationship your app has with your users not only happens inside your app but also outside. Posting stories back to a user's Facebook profile, for example, is a great way for a user to share their engagement in your app and encourage their friends to visit. It's strongly recommended that you give the user control over their voice and that the content is interesting and useful to friends. It's also important that you be transparent on setting appropriate user expectations around the timing and content of the post.

(36)

Next: Curating Identity »

Report Documentation Bug Enable users to post to Facebook using theFeed Dialog. You can also use theRequest Dialogto enable users to invite specific friends to your app or send more targeted app specific requests.

A number of apps arealready effectively utilizing our social channelsto get new users and traffic back to their apps while deepening conversations.

« Previously: Utilizing Community

Kirim 894

(37)

Curating Identity

Core Concepts›Social Design›Curating Identity

Social Design plays to the most powerful form of motivation: the self. People share and interact

with communities because they want to, because they learn more about themselves and enjoy

feeling known by their community.

Creating and curating an identity within an app is a basic principle that leads to a stronger emotional connection with that app over time. Building a profile that represents a user's identity provides self motivation and personal value to users. The key principles below demonstrate how to add elements of the community and conversations with them to a user's profile in your app.

Be Context-Relevant

While Facebook serves as a representative profile, your app should focus on a particular vertical or domain. Make the user's profile relevant to this context and focus on this aspect of the user's identity.

For example, in the social cooking app, a profile could consist of: A shareable and organized list of recipes users have created A shareable photo album of all the dishes they’ve created

A space to house a list of their favorite ingredients with their own descriptions and reviews Shared articles on cooking they’ve found interesting or useful

Don’t just think of features common to all social apps; think of what will be special to your app only. Explore what people can do with your app that they can’t do anywhere else.

Curate Content

Users should feel that the content they contribute is theirs and that you provide them a place to house it. If you’re asking users to contribute thoughts, photos and other content, they should be able to keep a record of this activity. Your app should use their input to organize content intelligently for them.

Facebook organizes a user's interests into a clean, structured interface. Use theGraph APIto let usersupload photosandvideosfrom your app to share on Facebook. Last.fmcompiles your listening history and favorite songs into an easy-to-read interface as well.

Tell Stories

People want to share experiences they have everywhere - not just on Facebook. Part of what builds identity is the storytelling of these experiences. Although displaying a history of user activity and posts to their wall helps, it's not the full picture. Use theLike buttonwith Open Graph tagsto enable users to share likes and interests from your app. By allowing users to like objects in your app, those experiences are integrated into their Facebook profile and shared with friends.

Guidelines Utilizing Community Building Conversation

Curating Identity

(38)

Next: Social Design Showcase »

Highlight Interesting Information

Part of what makes building a useful profile is not simply presenting the data, but additionally analyzing it to tell users something they don't know about themselves. For example,Spotifyinforms users of their top tracks and top artists. In a social movies app, you may highlight the user's most-viewed actors or genres. In a social cooking app, you may want to highlight what ingredients a user uses most of the time.

« Previously: Building Conversation

Kirim 498

(39)

Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta)

Social Plugins

Core Concepts›Social Plugins

Social plugins let you see what your friends have liked, commented on or shared on sites across the web.

Like Button

The Like button lets users share pages from your site back to their Facebook profile with one click.

Send Button

The Send button allows your users to easily send your content to their friends.

Subscribe Button

The Subscribe button allows people to subscribe to other Facebook users directly from your site.

Comments

The Comments plugin lets users comment on any piece of content on your site.

Activity Feed

The Activity Feed plugin shows users what their friends are doing on your site through likes and comments.

Recommendations

The Recommendations plugin gives users personalized suggestions for pages on your site they might like.

Like Box

The Like Box enables users to like yourFacebook Pageand view its stream directly from your website.

Login Button

The Login Button shows profile pictures of the user's friends who have already signed up for your site in addition to a login button.

Registration

The registration plugin allows users to easily sign up for your website with their Facebook account.

Facepile

The Facepile plugin displays the Facebook profile pictures of users who have liked your page or have signed up for your site.

Live Stream

(40)

Live Stream

The Live Stream plugin lets your users share activity and comments in real-time as they interact during a live event.

Diperbarui hari Jumat yang lalu

Kirim 856.937

(41)

Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta) URL to Like

Send Button (XFBML Only) Send Button Layout Style Width 450 Show Faces Show faces Verb to display Color Scheme Font Get Code

Like Button

Core Concepts›Social Plugins›Like Button

The Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your website.

When your Web page represents a real-world entity, things like movies, sports teams, celebrities, and restaurants, use the Open Graph protocolto specify information about the entity. If you include Open Graph tags on your Web page, your page becomes equivalent to a Facebook page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the "Likes and Interests" section of the user's profile, and you have the ability to publish updates to the user. Your page will show up in same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content.

There are two Like button implementations: XFBML and Iframe. The XFBML (also available in HTML5-compliant markup) version is more versatile, but requires use of theJavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display, gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like. If users do add a comment, the story published back to Facebook is given more prominence. To get started, just use the configurator below to get code to add to your site.

Step 1 - Get Like Button Code

Attributes

href- the URL to like. The XFBML version defaults to the current page.

send- specifies whether to include aSend buttonwith the Like button. This only works with the XFBML version. layout- there are three options.

standard- displays social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Minimum increases by 40px if action is 'recommend' by and increases by 60px if send is 'true'. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).

button_count- displays the total number of likes to the right of the button. Minimum width: 90 pixels.

(?) (?) (?) standard (?) (?) (?) like (?) light (?) Kirim 70.932 orang