Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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 using Social Plugins such as the Like Button and simplify your registration and sign-in process using Login Button and Registration 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 as Requests and Bookmarks to 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. 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.

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.

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. Legacy APIs REST API, FBML, and the old Javascript API are legacy APIs that

Ads API The Facebook Ads API lets you create and manage your own ads on Facebook programmatically, without using the Facebook 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.

we are in the process of deprecating. Please use Graph API, JavaScript SDK and Social Plugins instead.

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. 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 Linter are some of the many tools we provide to help you develop, test and monitor your app. 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.

Kirim

107.479 orang

Report Documentation Bug

Diperbarui sekitar sebulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Getting Started Websites Apps on Facebook Mobile Samples & How-Tos Videos Core Concepts Advanced Topics SDKs & Tools Open Graph Beta

Facebook for Websites

Getting Started Facebook for Websites

Facebook Platform enables you to make your website more social. You can use our Social Plugins, such as the Like Button to drive user engagement with a single line of HTML. Our Login Button and Registration Plugin let you simplify or eliminate your own user registration and sign-in. Lastly, the Graph API lets 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 Plugins are 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 the Like Button, which enables users to share your page with their friends with one click. You can add a Like button to any page with an iframe tag:

<html> <head> <title>My Great Web page</title> </head> <body> <iframe src="https://www.facebook.com/plugins/like.php?href=YOUR_URL" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe> </body> </html>
There are a number of options for 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:
Suka 39.301 orang menyukai ini. Jadilah orang pertama di antara teman-teman.

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 the Activity Feed Plugin to show users a stream of the recent likes and comments from their friends on your site. You can use the Recommendations Plugin to 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:

Aktivitas Terbaru
Sandi Febriyanto dan Teguh Mafandi berbagi Like 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

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

Most Social Plugins can be integrated with your site by simply including the iframe on December 13th oauth:true tag for the plugin within your page. 353 orang menyarankan ini. 353 orang menyarankan ini. There are several Social Plugins, such as Comments and Live Stream, that require the use of XFBML (eXtended Facebook
Removing a set of XML elements that can be included in your HTML pages to display Social Plugins. Markup Language). XFBML is App Profile Pages Removing App Profile Pages 710 orang menyarankan ini. When your page is loaded, any XFBML elements found in the document are processed by the JavaScript SDK, resulting in 710 orang menyarankan ini.

the appropriate plugin being rendered on your page. Page title

106 orang menyarankan ini.

Page title

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

<html> Plugin sosial Facebook Plugin sosial Facebook <head> <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> <div class="fb-like"></div> </body> </html>
The iframe versions 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 our Social Plugin page and 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 uses OAuth 2.0 for authentication and authorization. While you can add login to your site using OAuth

2.0 directly (see our Authentication Overview), the open source JavaScript SDK is the simplest way to use Facebook for login. The JavaScript SDK requires that you register your website with 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:

<html> <head> <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 the Login Button to your page using the <div class="fb-login-button"> element as shown below:

<html> <head> <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> <div class="fb-login-button">Login with Facebook</div> </body> </html>
When the user loads the page in their browser, the JavaScript SDK renders the Login Button on your page:

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 the User Graph object for 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 the perms attribute of the Login Button like below:

<html> <head> <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> <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 our permissions 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 the Registration 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:

<html> <head> <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> <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.

Once the user reviews the information and/or enters any custom fields (in the above example, favorite_car is 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 the redirect-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 the Login Button, the Registration Plugin and the JavaScript SDK.

Personalization
While Social Plugins offer a easy way to personalized your site, once you have added login to your site, you can access the full power of the Graph API to 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. The Javascript SDK provides 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:

<html> <head> <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 the FB.ui function. This function invokes our Platform Dialogs within 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:

<html> <head> <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){ 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>
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 our JavaScript 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 named fbs_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:

<?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){ 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>
Using the JavaScript SDK cookie is only one of several ways to access user credentials and information from server-side code. Our Security Guide highlights 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.

Insights provides 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 also available in the Graph API so 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 matching facebookexternalhit/*. This user agent is used by the Facebook Open Graph tools to retrieve your og meta 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. The Graph API is a great place to start. If you are looking for a real world examples to help you get started building please see our Samples. If you are looking for inspiration, check out our Showcase.
Kirim 160.777 orang Report Documentation Bug

Diperbarui pada hari Senin

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Getting Started Websites Apps on Facebook Mobile Samples & How-Tos Videos Core Concepts Advanced Topics SDKs & Tools Open Graph Beta

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 as Social Plugins, the Graph API and Platform Dialogs are 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 our getting started tutorial. If you want to build an app to add to the tab of a Facebook Page then you should refer to Page Tabs.

Tutorials Canvas Tutorial Page Tab Tutorial

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#.

Core APIs Achievements Scores Requests

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 an iframe on 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 the getting 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 the Facebook homepage as well as on the Canvas Page on the top right

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 outstanding Requests 2.0 related 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 appspecific 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 the Developer app in 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 achievements and scores. These stories are only shown to users, when using an app categorized as 'Games'. The achievements API allows you to publish stories about the user and their friends achieving a set of achievements you define for your app. The scores API allows 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 the publish_actions permission before you can publish a user's scores and achievements.

User control On the Application Settings Page users can control the maximum audience each app can share with on their behalf. So if

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 outstanding requests for the user for your app. The more link 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.

Notifications

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 users 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 its now your turn). You can learn more about how to enable users to send request from your app in our getting 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 the discovery stories in 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 Ticker discovery stories, you can turn these stories off by disabling the social discovery field in the developer app in the On Facebook tab under the Canvas section. Publishing stories In addition you can publish content to the stream using the Feed 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 users profile and may appear to the users 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 our getting started tutorial.

Search
Each new app has its own App Profile Page (for example, see Facebook 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 to update users who 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

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 the Insights Dashboard or by selecting your app in the Developer app and clicking the insights" link.

Developers can also track referral traffic from the Ticker stories via the following ref_params. Param fb_source fb_action_type fb_ticker_mod Description Source of the referral for example canvas_ticker type of action for example game.plays. ticker module, for example now_playing, leaderboard_passing, now_using,

achievement_landing

Next Steps
Get started with building an App on Facebook by reading our tutorial. To learn more about our Game APIs, read the achievements and scores API docs. Please read about our core concepts - authentication, Graph API, Social Channels. To learn how to build Facebook Page tabs, start here.
Kirim Fajar Sani Report Documentation Bug

Diperbarui hari Kamis lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Getting Started Websites Apps on Facebook Mobile Samples & How-Tos Videos Core Concepts Advanced Topics SDKs & Tools Open Graph Beta

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.

Getting Started Mobile Distribution

Mobile Web Mobile Web Tutorial

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.

iOS iOS Tutorial iOS SDK

Android Android Tutorial Android SDK Hackbook for Android

See it in action:

Android Phones

Android Tablets

iPhone and iPod

iPad

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 friends 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

each channel across web apps, iOS and Android, view the mobile distribution support doc.

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.

See it in action:

Android Phones

Android Tablets

iPhone and iPod

iPad

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

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.

See it in action:

Android Phones

Android Tablets

iPhone and iPod

iPad

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

See it in action:

Android Phones

Android Tablets

iPhone and iPod

iPad

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 button is only available in mobile web apps.

Email
When the user authenticates with your app, you can ask them for the email 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.

Payments
Facebook Credits allows you to accept payments for digital goods or services within your app. See our Credits API doc for 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 the PhoneGap Facebook plugin. Check out some of the great mobile experiences that 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.
Kirim 17.167 orang Report Documentation Bug

Diperbarui sekitar 2 bulan yang lalu

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Getting Started Websites Apps on Facebook Mobile Samples & HowTos Videos Core Concepts Advanced Topics SDKs & Tools Open Graph Beta

Samples & How-Tos

Getting Started Samples & How-Tos

Social Plugins winefriends

Download | Run This sample outlines how to build a social web site with the following features: Like Button, Activity Feed, Recommendations, Comments Box and Open Graph Protocol.

Samples Sample Canvas App

Canvas Run with Friends

Overview | Download | Run This sample outlines how to build a Facebook Canvas Application with the following features: JavaScript SDK, Social Plugin (Login with Faces), Platform Dialogs, Graph API using OAuth 2.0 and Real-time Updates

Insights Export Insights Data

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

Credits

Credits Sample App

Download This sample demonstrates how to use Credits with your Facebook Applications. Read the Credits API documentation to 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 users 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 orang Report Documentation Bug

Diperbarui sekitar 2 bulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Getting Started Websites Apps on Facebook Mobile Samples & How-Tos Videos Core Concepts Advanced Topics SDKs & Tools Open Graph Beta

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

Open Graph and Mobile Native

Q&A

f8 Hack (September 23, 2011)

Overview and Demo of New Developer Tools

Open Graph Deep-Dive

Games on the Open Graph

Open Graph and Mobile

Facebook Platform for Marketers (August 8, 2011)

Open Graph Protocol

Value of the Like Button

Presentation: PDF

Social Design: A Definition

Presentation: PDF

Social Channels: Driving traffic to your app

Presentation: PDF Code: Zip

Authentication: An Overview

Presentation: PDF

Mobile Single Sign-On

Presentation: PDF Code: iOS demo

Graph API

Presentation: PDF Code: Graph API explorer

Insights: Understanding your users

Presentation: PDF

Making Euros: Ads and Credits

Presentation: PDF Code: Credits sample app

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 orang Report Documentation Bug

Diperbarui sekitar 2 bulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

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.

Guidelines Utilizing Community Building Conversation Curating Identity

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.

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.

Kirim

26.605 orang

Report Documentation Bug

Diperbarui sekitar 3 bulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

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 implementing Facebook Authentication which enables a user to authorize your app to access profile information. You can ask for specific pieces of data about the user by requesting permissions relevant to your app.

Suggest Relevant Content

Utilize Facebook profile data in your app. If users grant the required set of permissions, you can utilize the Graph API to access users' 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. Both Rotten Tomatoes and Airbnb, for example, use profile information and connections to enhance the user experience, offering users personalized and valuable information.

Guidelines Utilizing Community Building Conversation Curating Identity

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 their Spotify accounts 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 the Graph API to 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 the Graph API to 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. The Comments Plugin, for example, displays profile information about the people writing the comments.

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

Be Transparent and Give Users Control

Be straightforward with the data you are utilizing from the users Facebook profile and why you are using it. Only ask for the permissions you 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 dont understand.

Previously: Social Design Overview

Kirim 1.152 orang

Next: Building Conversation

Report Documentation Bug

Diperbarui sekitar 2 bulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

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
Guidelines Utilizing Community Building Conversation Curating Identity

Users are encouraged to participate when they can listen to and watch other active users on your site. On Clicker, for example, users can see the shows that their friends have watched along with recommendations based on friend activity. Many sites like EventBrite or TripAdvisor rely 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. Our social plugins - specifically the Activity Feed and Recommendations plugin - are simple ways to allow a user to easily see their friends' activity on your site, when paired with the Like Button. The Like Button lets 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 these social plugins to showcase the actions that users take on their site. For Sporting News, it's a great way to see the articles most popular amongst friends. For Rdio, it's a great way to discover new music.

Provide Notifications
Create directed conversation through notifications. Use Requests on Facebook to 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.

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 theyve 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 the Like Button on your website is a simple and effective way to get users to engage and start sharing. The Send Button similarly 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. The Comments Plugin is 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 various social channels on Facebook. This builds an effective listening experience that prompts more conversation.

Encourage Sharing
When conversation is directed, it becomes more personal. You can use the Graph API to 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. In Spotify, 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.

Enable users to post to Facebook using the Feed Dialog. You can also use the Request Dialog to enable users to invite specific friends to your app or send more targeted app specific requests.

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

Previously: Utilizing Community

Kirim 894 orang

Next: Curating Identity

Report Documentation Bug

Diperbarui sekitar 4 bulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

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.

Guidelines Utilizing Community Building Conversation Curating 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 theyve created A space to house a list of their favorite ingredients with their own descriptions and reviews Shared articles on cooking theyve found interesting or useful Dont 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 cant 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 youre 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 the Graph API to let users upload photos and videos from your app to share on Facebook. Last.fm compiles 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 the Like button with Open Graph tags to 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.

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, Spotify informs 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 orang

Next: Social Design Showcase

Report Documentation Bug

Diperbarui sekitar 4 bulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Getting Started Core Concepts Social Design Social Plugins Open Graph Protocol Social Channels Authentication Graph API Advanced Topics SDKs & Tools Open Graph 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
Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button 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.

Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta)

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 your Facebook Page and 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

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

Kirim

856.937 orang

Report Documentation Bug

Diperbarui hari Jumat yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

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 protocol to 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 the JavaScript 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.

Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button

To get started, just use the configurator below to get code to add to your site.

Step 1 - Get Like Button Code

URL to Like (?)
Kirim 70.932 orang

Send Button (XFBML Only) (?) Send Button Layout Style (?)
standard

Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta)

Width (?)
450

Show Faces (?) Show faces Verb to display (?)

like

Color Scheme (?)

light

Font (?)

Get Code

Attributes
href - the URL to like. The XFBML version defaults to the current page. send - specifies whether to include a Send button with 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.

Default width: 90 pixels. Height: 20 pixels.

box_count - displays the total number of likes above the button. Minimum width: 55 pixels. Default width:
55 pixels. Height: 65 pixels.

show_faces - specifies whether to display profile photos below the button (standard layout only) width - the width of the Like button. action - the verb to display on the button. Options: 'like', 'recommend' font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms',
'verdana'

colorscheme - the color scheme for the like button. Options: 'light', 'dark' ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and
some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:

fb_ref - the ref parameter fb_source - the stream type ('home', 'profile', 'search', 'other') in which the click occurred and the story type
('oneline' or 'multiline'), concatenated with an underscore.

Step 2 - Get Open Graph Tags

Title (?)

Type (?)

URL (?)

Image (?)

Site name (?)

Admin (?)
1217658662

Get Tags

Open Graph Tags

Open Graph tags are <meta> tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else. An Open Graph tag looks like this:

<meta property="og:tag name" content="tag value"/>

If you use Open Graph tags, the following six are required:

og:title - The title of the entity. og:type - The type of entity. You must select a type from the list of Open Graph types. og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square
images work best, but you are allowed to use images up to three times as wide as they are tall.

og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the
Like button posts a link to the og:url instead of the URL in the Like button code.

og:site_name - A human-readable name for your site, e.g., "IMDb". fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a
Facebook Platform application ID. At a minimum, include only your own Facebook ID. More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocol documentation .

FAQ
How do I know when a user clicks a Like button?
If you are using the XFBML version of the button, you can subscribe to the 'edge.create' event through FB.Event.subscribe.

When will users have the option to add a comment to the like?
If you are using the XFBML version of the Like button, users will always have the option to add a comment. If you are using the Iframe version of the button, users will have the option to comments if you are using the 'standard' layout with a width of at least 400 pixels. If users do add a comment, the story published back to Facebook is given more prominence.

What analytics are available about the Like button?

If you visit facebook.com/insights and register your domain, you can see the number of likes on your domain each day and the demographics of who is clicking the Like button.

Can I link the Like button to my Facebook page?

Yes. Simply specify the URL of your Facebook page in the href parameter of the button.

What is the best way to know which Like button on my page generated the traffic?
Add the 'ref' parameter to the plugin (see "Attributes" above). Examples:

<fb:like ref="top_left"></fb:like> <iframe src="...&ref=top_left"></iframe>

When a user clicks a link back to your website, we will pass back both the ref value as a fb_ref parameter and the fb_source parameter in the referrer URL. Example:

http://www.facebook.com/l.php?fb_ref=top_left&fb_source=profile_oneline
Aggregated stream stories contain all ref parameters, concatenated with commas.

When does Facebook scrape my page?

Facebook needs to scrape your page to know how to display it around the site. Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when an admin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook URL Linter. Facebook observes cache headers on your URLs - it will look at "Expires" and "Cache-Control" in order of preference. However, even if you specify a longer time, Facebook will scrape your page every 24 hours. The user agent of the scraper is: "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"

How do I display the Like button in different languages?

If you are using the XFBML version include the language code when you instantiate the library. Replace en_US in this line with the correct locale code:

'//connect.facebook.net/en_US/all.js';
If you are using the Iframe version include a locale parameter with the proper country code in the src URL. Example:

src="http://www.facebook.com/plugins/like.php?locale=fr_FR&..."
You may need to adjust the width of the Like button to accommodate different languages.

What makes up the number shown on my Like button?

The number shown is the sum of: The number of likes of this URL The number of shares of this URL (this includes copy/pasting a link back to Facebook) The number of likes and comments on stories on Facebook about this URL

The number of inbox messages containing this URL as an attachment.

What happened to the old Share button?

We deprecated the Share Button when we launched the Like button, because the Like button improves clickthrough rates by allowing users to connect with one click, and by allowing them to see which of their friends have already connected. For reference, the Share button documentation is still available here.

When I click the Like button, the popup window (or "flyout") doesn't show. Why?
If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto.
Kirim Ioyy Ranjauu Report Documentation Bug

Diperbarui 2 minggu yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Send Button
Core Concepts Social Plugins Send Button

The Send Button allows users to easily send content to their friends. People will have the option to send your URL in a message to their Facebook friends, to the group wall of one of their Facebook groups, and as an email to any email address. While the Like Button allows users to share content with all of their friends, the Send Button allows them to send a private message to just a few friends. The message will include a link to the URL specified in the send button, along with a title, image, and short description of the link. You can specify what is shown for the title, image, and description by using Open Graph meta tags. The Send button requires the JavaScript SDK.

Get a combined Like and Send button

You can implement the send button on its own, but if you also want a Like button on your site, you can simply add send=true as an attribute to the XFBML version of the Like button (or data-send="true" to the HTML5 version). This

Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button

will render the Like button and Send button next to each other. Find the documentation on the Like button page.

Get a Send button

URL to Send (?)
example.com Kirim

Font (?)

Color Scheme (?)

light

Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta)

Get Code

Attributes
href - the URL to send. font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms',
'verdana'

colorscheme - the color scheme for the button. Options: 'light', 'dark' ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and
some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Send action:

fb_ref - the ref parameter fb_source - the story type ('message', 'group', 'email') in which the click occurred.

FAQ
How do I know when someone sends a message from the plugin?
If you use the XFBML version you can subscribe to the 'message.send' event through FB.Event.subscribe.

How do I display the Send button in different languages?

Include the language code when you instantiate the library. Replace en_US in this line with the correct locale code:

'//connect.facebook.net/en_US/all.js';

What analytics are available about the Send button?

If you visit facebook.com/insights and register your domain, you can see the number of sends from your domain each day and the demographics of who is clicking the Send button.

What is the best way to know which Send button on my page generated the traffic?
Add the 'ref' parameter to the plugin (see "Attributes" above). Examples:

<fb:send ref="top_left"></fb:send> <iframe src="...&ref=top_left"></iframe>

When a user clicks a link back to your website, we will pass the ref value as a fb_ref parameter in the referrer URL. Example:

http://www.yoursite.com/home?fb_ref=top_left&fb_source=message
Aggregated stream stories contain all ref parameters, concatenated with commas.

When I click the Send button, the popup window (or "flyout") doesn't show. Why?
If the Send button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto.
Report Documentation Bug Diperbarui sekitar 3 bulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Subscribe Button
Core Concepts Social Plugins Subscribe Button

The Subscribe button lets a user subscribe to your public updates on Facebook. There are two Subscribe button implementations: XFBML and Iframe. The XFBML (also available in HTML5-compliant markup) version is more versatile, and requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display and gives you the ability (through the JavaScript library) to listen for subscribe events so that you know in real time when a user clicks the Subscribe button. To get started, just use the configurator below to get code to add to your site.

Get Your Subscribe Button Code

Profile URL (?)
Berlangganan Trisna Wanto, Vevi Noviati Larosa dan 10.350.012 lainnya berlangganan.

Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button

https://www.facebook.com/zuck

Layout Style (?)

standard

Show Faces (?) Show faces Color Scheme (?)

light

Font (?)

Width (?)
Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta) Get Code 450

Attributes
href - profile URL of the user to subscribe to. This must be a facebook.com profile URL. layout - there are three options. standard - displays social text to the right of the button and friends' profile photos below. Minimum width:
225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).

button_count - displays the total number of subscribers to the right of the button. Minimum width: 90
pixels. Default width: 90 pixels. Height: 20 pixels.

box_count - displays the total number of subscribers above the button. Minimum width: 55 pixels. Default
width: 55 pixels. Height: 65 pixels.

show_faces - specifies whether to display profile photos below the button (standard layout only) colorscheme - the color scheme for the plugin. Options: 'light' (default) and 'dark' font - the font to display in the plugin. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms',
'verdana'

width - the width of the plugin.

Kirim 1.350 orang Report Documentation Bug

Diperbarui hari Kamis lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Comments
Core Concepts Social Plugins Comments

Comments Box is a social plugin that enables user commenting on your site. Features include moderation tools and distribution. Social Relevance: Comments Box uses social signals to surface the highest quality comments for each user. Comments are ordered to show users the most relevant comments from friends, friends of friends, and the most liked or active discussion threads, while comments marked as spam are hidden from view. Distribution: Comments are easily shared with friends or with people who like your Page on Facebook. If a user leaves the Post to Facebook box checked when she posts a comment, a story appears on her friends News Feed indicating that shes made a comment on your website, which will also link back to your site. Friends and people who like the Page can then respond to the discussion by liking or replying to the comment directly in the News Feed on Facebook or in the Comments Box on your site. Threads stay synced across Facebook and on the Comments Box on your site regardless of where the comment was made.

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 comment on (?)

http://example.com

Number of posts (?)

2

Width (?)
500

Color Scheme (?)

light

Get Code

29.227 komentar

Tambahkan komentar

[email protected](masuk menggunakan Hotmail) hey guys... I implemented facebook comments on my site, you can have a look : http://freemovierepublic.com btw, its a site to watch movies online for free.. Balas 459 Suka Ikuti Kiriman 25 Oktober pukul 13:30 Sonorita Lopez Universitas Negeri California, Long Beach nice one... i just looked at FREEMOVIEREPUBLIC.COM good implementation there.. Balas 179 Suka 25 Oktober pukul 13:37

Cynthia Kramer cool site you got there. Now i know where to watch movies from now on :P Balas 165 Suka 25 Oktober pukul 13:40

Emma Tyler San Diego, California ooooooooohhh Yeeeaaaaahhhhhhhhh !!!!!!! Balas Lihat 187 lainnya Mujeres Bellas Berlangganan Bekerja di Consigue Trfico Web Perpetuo!! Entrenamiento Gratuito 18.628 pelanggan A QUIEN LE GUSTA LAS MUJERES COLOMBIANAS? Balas 335 Suka Ikuti Kiriman 16 Oktober pukul 4:43 Raul Done Berlangganan Presidente di Kaarnivoros Asadero Parrillada soy dominicano y me encantan las colombianas Balas 26 Suka 16 Oktober pukul 6:25 147 Suka 25 Oktober pukul 13:43

Juan Antonio Najera Bekerja di Leize eswiper truck & ac contruccion Ami. Me encantan las colombianas Balas 53 Suka 16 Oktober pukul 6:34

Julio Ren Cruz Caal Profesor di MINEDUC Aaaaa mi.... Balas Lihat 188 lainnya Lihat 29.225 lainnya 55 Suka 17 Oktober pukul 3:35

Attributes
href - the URL for this Comments plugin. News feed stories on Facebook will link to this URL. width - the width of the plugin in pixels. Minimum recommended width: 400px.

colorscheme - the color scheme for the plugin. Options: 'light', 'dark' num_posts - the number of comments to show by default. Default: 10. Minimum: 1 mobile - (beta) whether to show mobile version. Default: false.

Moderation tools
Admins can choose to make the default for new comments entered either visible to everyone or has limited visibility on the site (i.e., the comment is only visible to the commenter and their friends), to help mitigate irrelevant content. Admins can also blacklist words and ban users. If a new comment is published from a banned user or contains a blacklisted word, this comment will automatically have limited visibility. To moderate, you need to list yourself as an admin. To do this, simply include open graph meta tags on the URL specified as the href parameter of the plugin. Include:

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>

To add multiple moderators, separate the uids by comma without spaces. If your site has many comments boxes, we strongly recommend you specify a Facebook app id as the administrator (all administrators of the app will be able to moderate comments). Doing this enables a moderator interface on Facebook where comments from all plugins administered by your app id can be easily moderated together.

<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>

You can moderate comments from just this plugin inline. If you have specified your app id as the admin, you can moderate all your plugins at http://developers.facebook.com/tools/comments. When you implement multiple comments boxes on your site and tie them together using an app_id, the moderation settings you choose will apply to all your comments boxes. For example, changing the moderation setting to 'has limited visibility' will affect all comments boxes under the same app_id. If you need to apply different moderation paradigms in different areas of your site, you should use two or more app_ids. You may then apply different moderation settings each group of comments boxes.

FAQ
How do I access the number of comments left of my page?
The fb:comments-count tag will emit the number of comments on your URL in a <span> tag. You can then style this however appropriate to match your site. For example, to show the number of comments on example.com:.

<fb:comments-count href=http://example.com/></fb:comments-count> awesome comments

Will emit: 29227 awesome comments You can also load an iframe from Facebook which will display the number of comments with a link to your URL. For example, this shows the number of comments for example.com.

<iframe src="http://www.facebook.com/plugins/comments.php?href=example.com&permalink=1

The number of comments left on a particular URL can be accessed via the Graph API. For example, the number of comments on example.com is the 'comments' field of: https://graph.facebook.com/?ids=http://example.com/. You can also use the comment FQL table.

How do I know when someone comments on my site?

You can subscribe to the 'comment.create' and 'comment.remove' events through FB.Event.subscribe.

What does the grammar filter do?

Adds punctuation (e.g. periods at the end of sentences) Trims extra whitespace Expands slang words (e.g. plz becomes please) Adds a space after punctuation (e.g. Hi,Cat would become Hi, Cat)

Fix common grammar mistakes (e.g. convert dont' to dont) You can enable the grammar filter from the settings section of the plugin.

How do I access the comments left on my site?

The comments for every URL can be accessed via the graph API. Simply go to: https://graph.facebook.com/comments/? ids={YOUR_URL}. For example, the comments on this URL can be accessed via: https://graph.facebook.com/comments/? ids=http://developers.facebook.com/docs/reference/plugins/comments. Sample code for pulling comments can be found on this blog post.

How can I get an SEO boost from the comments left on my site?
The Facebook comments box is rendered in an iframe on your page, and most search engines will not crawl content within an iframe. However, you can access all the comments left on your site via the graph API as described above. Simply grab the comments from the API and render them in the body of your page behind the comments box. We recommend you cache the results, as pulling the comments from the graph API on each page load could slow down the rendering time of the page.

How do I enable users to comment using other login providers?

On the settings section of the plugin, you can choose to enable third party login on your comments boxes. Currently this will enable users to comment using a Yahoo!, AOL or Hotmail account.

How does the blacklisting words work?

You can enter blacklisted terms from the settings section of the comments box. The content of new comments is checked against the blacklist of terms to see if this comment should have limited visibility. The comment is checked via substring matching. This means if you blacklist the word 'at', if the comment contains the sequence 'a' 't' anywhere it will be marked with limited visibility; e.g. if the comment contained the words 'bat', 'hat', 'attend', etc it would be caught.

I have the first version of the Facebook Comments box, how do I upgrade?
If you are using the original version of the Facebook Comments box, just add 'migrated=1' to the <fb:comments> tag, and the comments box will automatically switch to the new version. In this case, you should not specify the href parameter, and you must keep the XID parameter the same. Once you migrate, you can access the comments as described above. Note that the moderation tools only work with the newer version of the comments plugin.
Kirim 36.193 orang Report Documentation Bug

Diperbarui hari Kamis lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Activity Feed
Core Concepts Social Plugins Activity Feed

The Activity Feed plugin displays the most interesting recent activity taking place on your site. Since the content is hosted by Facebook, the plugin can display personalized content whether or not the user has logged into your site. The activity feed displays stories when users like content on your site, when users share content from your site in Facebook or if they comment on a page on your site in the Comments box. If a user is logged into Facebook, the plugin will be personalized to highlight content from their friends. If the user is logged out, the activity feed will show recommendations from across your site, and give the user the option to log in to Facebook. The plugin is filled with activity from the user's friends. If there isn't enough friend activity to fill the plugin, it is backfilled with recommendations. If you set the recommendations param to true, the plugin is split in half, showing friends activity in the top half, and recommendations in the bottom half. If there is not enough friends activity to fill half of the plugin, it will include more recommendations. You must specify a domain to show activity for. The domain is matched exactly, so a plugin with site=facebook.com would not include activity from developers.facebook.com or www.facebook.com. You can specify multiple domains and the results will be mixed together.

Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button

The plugin is available either via a simple iframe you can drop into your page, or if you are using the new JavaScript SDK, you can use the <fb:activity> XFBML tag (or <div class="fb-activity"> if you prefer HTML5 markup).

Domain (?)

Aktivitas Terbaru
Sandi Febriyanto dan Teguh Mafandi berbagi Like Box. sekitar 4 bulan yang lalu

Width (?)
300

Introducing the Subscribe Button for Websites 2.035 orang menyarankan ini.

Height (?)
300

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

Header (?)
Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta)

Show header Color Scheme (?)

light

Plugin sosial Facebook

Link Target (?)

_blank

Border Color (?)

Font (?)

Recommendations (?) Show recommendations

Get Code

Attributes
site - a comma separated list of domains to show activity for. The XFBML version defaults to the current domain. width - the width of the plugin in pixels. Default width: 300px. height - the height of the plugin in pixels. Default height: 300px. header - specifies whether to show the Facebook header. colorscheme - the color scheme for the plugin. Options: 'light', 'dark'

font - the font to display in the plugin. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms',
'verdana'

border_color - the border color of the plugin. recommendations - specifies whether to always show recommendations in the plugin. If recommendations is set to true, the plugin will display recommendations in the bottom half. filter - allows you to filter which URLs are shown in the plugin. The plugin will only include URLs which contain
the filter string in the first two path parameters of the URL. If nothing in the first two path parameters of the URL matches the filter, the URL will not be included. For example, if the 'site' parameter is set to 'www.example.com' and the 'filter' parameter was set to '/section1/section2' then only pages which matched 'http://www.example.com/section1/section2/*' would be included in the activity feed section of this plugin. The filter parameter does not apply to any recommendations which may appear in this plugin (see above); Recommendations are based only on 'site' parameter.

linktarget - This specifies the context in which content links are opened. By default all links within the plugin will open a new window. If you want the content links to open in the same window, you can set this parameter to _top or _parent. Links to Facebook URLs will always open in a new window. ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and
some punctuation (currently +/=-.:_). Specifying a value for the ref attribute adds the 'fb_ref' parameter to the any links back to your site which are clicked from within the plugin. Using different values for the ref parameter for different positions and configurations of this plugin within your pages allows you to track which instances are performing the best.

max_age - the maximum age of a URL to show in the plugin. The default is 0 (we dont take age into account).
Otherwise the valid values are 1-180, which specifies the number of days. For example, if you specify '7' the plugin will only show URLs which were created in the past week.

What is the best way to know which plugin on my site generated the traffic?
Add the 'ref' parameter to the plugin (see "Attributes" above). Examples:

<fb:activity ref="homepage"></fb:activity> <iframe src="...&ref=homepage"></iframe>

When a user clicks a link on the plugin, we will pass back the ref value as a fb_ref parameter in the referrer URL. Example:

http://www.facebook.com/l.php?u=<your_url>&fb_ref=homepage

Kirim

Fajar Sani

Report Documentation Bug

Diperbarui sekitar 3 bulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Recommendations
Core Concepts Social Plugins Recommendations

The Recommendations plugin shows personalized recommendations to your users. Since the content is hosted by Facebook, the plugin can display personalized recommendations whether or not the user has logged into your site. To generate the recommendations, the plugin considers all the social interactions with URLs from your site. For a logged in Facebook user, the plugin will give preference to and highlight objects her friends have interacted with. You must specify a domain for which to show recommendations. The domain is matched exactly, so a plugin with site=facebook.com would not include activity from developers.facebook.com or www.facebook.com. You can specify multiple domains and the results will be mixed together. The plugin is available either via a simple iframe you can drop into your page or by using the JavaScript SDK. With the SDK you can use the <fb:recommendations> XFBML tag or <div class="fb-recommendations"> if you prefer HTML.

Domain (?)
Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button

Saran
Like Box

Width (?)
300

Sandi Febriyanto, Teguh Mafandi, dan 314.897 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 355 orang menyarankan ini.

Height (?)
300

Header (?) Show header Color Scheme (?)

light

Removing App Profile Pages 710 orang menyarankan ini.

Plugin sosial Facebook

Link Target (?)

Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta) Get Code _blank

Border Color (?)

Font (?)

Attributes
site - a comma separated list of domains to show recommendations for. The XFBML version defaults to the current
domain.

width - the width of the plugin in pixels. Default width: 300px. height - the height of the plugin in pixels. Default height: 300px. header - specifies whether to show the Facebook header. colorscheme - the color scheme for the plugin. Options: 'light', 'dark' font - the font to display in the plugin. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms',
'verdana'

border_color - the border color of the plugin. linktarget - This specifies the context in which content links are opened. By default all links within the plugin will open a new window. If you want the content links to open in the same window, you can set this parameter to _top or _parent. Links to Facebook URLs will always open in a new window. ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and
some punctuation (currently +/=-.:_). Specifying a value for the ref attribute adds the 'fb_ref' parameter to the any links back to your site which are clicked from within the plugin. Using different values for the ref parameter for

different positions and configurations of this plugin within your pages allows you to track which instances are performing the best.

max_age - the maximum age of a URL to show in the plugin. The default is 0 (we dont take age into account).
Otherwise the valid values are 1-180, which specifies the number of days. For example, if you specify '7' the plugin will only show URLs which were created in the past week.

What is the best way to know which plugin on my site generated the traffic?
Add the 'ref' parameter to the plugin (see "Attributes" above). Examples:

<fb:recommendations ref="homepage"></fb:recommendations> <iframe src="...&ref=homepage"></iframe>

When a user clicks a link on the plugin, we will pass back the ref value as a fb_ref parameter in the referrer URL. Example:

http://www.facebook.com/l.php?fb_ref=homepage

Kirim

Fajar Sani

Report Documentation Bug

Diperbarui sekitar 3 bulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Like Box
Core Concepts Social Plugins Like Box

The Like Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website. The Like Box enables users to: See how many users already like this Page, and which of their friends like it too Read recent posts from the Page Like the Page with one click, without needing to visit the Page The minimum supported plugin width is 292px.

Facebook Page URL (?)

http://www.facebook.com/platform

Temukan kami di Facebook

Facebook Platform
Suka Facebook Platform Prom otion s Guide lines Traini ng Durasi : 4:10 5 jam yang lalu Facebook Platform

Width (?)
Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button 292

Height (?)

Color Scheme (?)

light

Show Faces (?) Show Faces Border Color (?)

Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta)

Stream (?) Show stream Header (?) Show header

Get Code

Platfo rm Polici es 3,621,354 orang menyukai Facebook Platform.

Muhammad

Umar

Muhammad

Ahmad

Rado

Danang

Sandi

Scouter Jos

Sandi

Ahrn

Plugin sosial Facebook

Attributes
href - the URL of the Facebook Page for this Like Box width - the width of the plugin in pixels. Default width: 300px. height - the height of the plugin in pixels. The default height varies based on number of faces to display, and
whether the stream is displayed. With the stream displayed, and 10 faces the default height is 556px. With no faces, and no stream the default height is 63px.

colorscheme - the color scheme for the plugin. Options: 'light', 'dark' show_faces - specifies whether or not to display profile photos in the plugin. Default value: true. stream - specifies whether to display a stream of the latest posts from the Page's wall header - specifies whether to display the Facebook header at the top of the plugin. border_color - the border color of the plugin. force_wall - for Places, specifies whether the stream contains posts from the Place's wall or just checkins from
friends. Default value: false.

How do I know when a user clicks a Like button?

If you are using the XFBML version of the button, you can subscribe to the 'edge.create' event through

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Login Button
Core Concepts Social Plugins 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. You can specify the maximum number of rows of faces to display. The plugin dynamically sizes its height; for example, if you specify a maximum of four rows of faces, and there are only enough friends to fill two rows, the height of the plugin will be only what is needed for two rows of faces. Using the new JavaScript SDK, the plugin is available via the <fb:login-button> XFBML tag or the <div class="fb-

login-button"> HTML tag.

Note: If the user is already logged in, no login button is shown.
Masuk Erik Pratama menggunakan Developer Site.

Show faces (?) Show faces

Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button Get Code

Width (?)
200

Max Rows (?)

1

Attributes
show-faces - specifies whether to show faces underneath the Login button. width - the width of the plugin in pixels. Default width: 200px. max-rows - the maximum number of rows of profile pictures to display. Default value: 1. scope - a comma separated list of extended permissions. By default the Login button prompts users for their public
information. If your application needs to access other parts of the user's profile that may be private, your application can request extended permissions. A complete list of extended permissions can be found here.
Kirim 22.173 orang Report Documentation Bug

Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta)

Diperbarui sekitar sebulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Registration
Core Concepts Social Plugins Registration

Introduction
The Registration plugin allows users to easily sign up for your website with their Facebook account. The plugin is a simple iframe that you can drop into your page. When logged into Facebook, users see a form that is pre-filled with their Facebook information where appropriate. The registration plugin gives you the flexibility to ask for additional information which is not available through the Facebook API (e.g. favorite movie). The plugin also allows users who do not have a Facebook account, or do not wish to sign up for your site using Facebook to use the same form as those who are connecting with Facebook. This eliminates the need to provide two separate login experiences.

Example
Plugins Registration Registration Advanced Uses User Registration Flows Tanggal Lahir: 15 1986 Jenis Kelamin: Lokasi Sekarang: Alamat Email: Laki-laki Lombok, Nusa Tenggara Barat, Indon [email protected] Nama dan Informasi Publik: Ramdhan Hidayat
832 teman

Untuk menghemat waktu, formulir pendaftaran di bawah telah diisi sebelumnya menggunakan profil Facebook Anda.

Beta Plugins

Mei

Mendaftar

1 teman telah mendaftar.

Ketentuan Layanan Kebijakan Privasi Mengklik Daftar juga akan memberi Developer Site akses ke daftar teman Facebook Anda dan informasi publik lainnya. Tak ada yang diungkapkan kepada Developer Site sampai Anda mengklik Daftar. Pelajari selengkapnya

<iframe src="https://www.facebook.com/plugins/registration.php? client_id=113869198637480& redirect_uri=https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fdevelopers.facebook.com%2Ftools%2Fecho%2F& fields=name,birthday,gender,location,email" scrolling="auto" frameborder="no" style="border:none" allowTransparency="true" width="100%" height="330"> </iframe>

Attributes
Attribute client_id redirect_uri fields fb_only Description Your App ID. The URI that will process the signed_request. It must be prefixed by your Site URL. Comma separated list of Named Fields, or JSON of Custom Fields. Optional. (boolean) Only allow users to register by linking their Facebook profile. Use this if you do not have your own registration system. Default: false. Optional. (boolean) Allow users to register for Facebook during the registration process. Use this if you do not have your own registration system. Default: false.

fb_register

width border_color target

Optional. (int) The width of the iframe in pixels. If the width is < 520 the plugin will render in a small layout. Optional. The border color of the plugin. Optional. The target of the form submission: _top (default), _parent, or _self.

Named Fields
Specify these in the order you want them to appear in the form. The name field must always be the first field. Field type name birthday email Description Full name of the user Returned as mm/dd/yyyy Email address of user (if the user registers with her Facebook account, this will be a verified email address) Gender of user Name and ID of the user's current city A newly created password (not their Facebook password) A test to stop automatic registration

gender location password captcha

Less common fields: Field type first_name last_name Description The first name of the user. Useful with view= not_prefilled. The last name of the user.

Custom Fields
You may also request data from users that isn't present on Facebook. To do this, you can use a JSON string in the fields attribute instead of the CSV. For example:

Untuk menghemat waktu, formulir pendaftaran di bawah telah diisi sebelumnya menggunakan profil Facebook Anda.

Nama dan Informasi Publik:

Ramdhan Hidayat
832 teman

Alamat Email: Lokasi Sekarang: Jenis Kelamin: Tanggal Lahir:

[email protected] Lombok, Nusa Tenggara Barat, Indon Laki-laki 15 1986 Mei

Kata Sandi Developer Site: Masukkan Ulang Kata Sandi: Do you like this plugin?: Phone Number: Anniversary: Tanggal: Tahun: Best Captain: Which side?: Best Place to Live: Security Check: Pilih Satu: Sith Bulan:

Mendaftar

1 teman telah mendaftar.

Ketentuan Layanan Kebijakan Privasi Mengklik Daftar juga akan memberi Developer Site akses ke daftar teman Facebook Anda dan informasi publik lainnya. Tak ada yang diungkapkan kepada Developer Site sampai Anda mengklik Daftar. Pelajari selengkapnya

Which has fields set to

[ {'name':'name'}, {'name':'email'}, {'name':'location'}, {'name':'gender'}, {'name':'birthday'}, {'name':'password'}, {'name':'like', 'description':'Do you like this plugin?', {'name':'phone', 'description':'Phone Number', {'name':'anniversary','description':'Anniversary', {'name':'captain', 'description':'Best Captain', {'name':'force', 'description':'Which side?', {'name':'live', 'description':'Best Place to Live', {'name':'captcha'} ]

'type':'checkbox', 'type':'text'}, 'type':'date'}, 'type':'select', 'type':'select', 'type':'typeahead',

fields is a JSON Array of Objects. Any built in fields only have a name field. Custom fields have:
Name name Description The name on the HTML <input> element. This will be the name of the attribute when you decode the

signed_request.
description type view The label to show the user. The field type. Supported values are text, date, select, checkbox, typeahead, and hidden. When to show this field. There are two views: prefilled and not_prefilled. prefilled means the user is registering using her Facebook account, not_prefilled means the user is not registering with her Facebook account. This parameter is useful if, for example, you only require a password for users not

registering using their Facebook account. Default: Display this field in both views. Some attributes only apply to fields of a certain type: Name options categories default Description For type:select. An object of "submit value" to "user description ". For type:typeahead. An array of Open Graph protocol types that are valid for this field. For type:select and type:checkbox. Contains the key to select by default instead of showing "Select on" for type:select. Contains the word checked to make a type:checkbox checked by default. There are advanced features if you are asking for custom fields, including custom client side validation, async validation, and a no_submit feature if you don't want to pass fields through Facebook.

XFBML
There is also an XFBML tag for use with the Javascript SDK. It will resize the iframe fluidly as its size changes.
Untuk menghemat waktu, formulir pendaftaran di bawah telah diisi sebelumnya menggunakan profil Facebook Anda.

Nama dan Informasi Publik: Tanggal Lahir: 15 1986 Jenis Kelamin: Lokasi Sekarang: Alamat Email:

Ramdhan Hidayat
832 teman

Mei

Laki-laki Lombok, Nusa Tenggara Barat, Indon [email protected]

Mendaftar

1 teman telah mendaftar.

Ketentuan Layanan Kebijakan Privasi Mengklik Daftar juga akan memberi Developer Site akses ke daftar teman Facebook Anda dan informasi publik lainnya. Tak ada yang diungkapkan kepada Developer Site sampai Anda mengklik Daftar. Pelajari selengkapnya

<div id="fb-root"></div> <script src="https://connect.facebook.net/en_US/all.js#appId={YOUR_APP_ID}&xfbml=1"></ <fb:registration fields="name,birthday,gender,location,email" redirect-uri="https://developers.facebook.com/tools/echo/" width="530"> </fb:registration>

Login + Registration Flows

When prompting your users to login or register, there is an XFBML button that you will probably find useful.
Daftar

<fb:login-button registration-url="https://developers.facebook.com/docs/plugins/registration" />

If the user arrives at your site logged out of Facebook, the button will say Login. When the user clicks it, she will be prompted to enter her Facebook username and password. If she has not registered for your site, she will be redirected to the URL you specify in the registration-url parameter. If she has already registered for your site, the button will fire an onlogin() Javascript event. When this event is fired you should login the user to your site. If the user arrives logged into Facebook, but has not registered for your site, the button will say Register and clicking it will take the user to your registration-url. Lastly, if the user is logged into Facebook and already connected to your application, the button will say Login and won't do anything when clicked (but your application should detect this state using the getLoginStatus method and not show

the button). See our best practices and diagrams of how all of this fits together, for an overview of how to structure your application.

Reading the data

The data is passed to your application as a signed request. The signed_request parameter is a simple way to make sure that the data you're receiving is the actual data sent by Facebook. It is signed using your application secret which is only known by you and Facebook. If someone were to make a change to the data, the signature would no longer validate as they wouldn't know your application secret to also update the signature. Read more about signed requests on the canvas authentication documentation. The result of decoding the signed_request will be a JSON Object with the following format:

{ "oauth_token": "...big long string...", "algorithm": "HMAC-SHA256", "expires": 1291840400, "issued_at": 1291836800, "registration": { "name": "Paul Tarjan", "email": "[email protected]", "location": { "name": "San Francisco, California", "id": 114952118516947 }, "gender": "male", "birthday": "12/16/1985", "like": true, "phone": "555-123-4567", "anniversary": "2/14/1998", "captain": "K", "force": "jedi", "live": { "name": "Denver, Colorado", "id": 115590505119035 } }, "registration_metadata": { "fields": "[\n {'name':'name'},\n {'name':'email'},\n {'name':'location'},\n {'n }, "user_id": "218471" }

This format is designed to very closely resemble the output of the Graph API. The signed request includes a

registration_metadata field. You should verify this field exactly matches the field param you specified in the
registration plugin to ensure the data is from your registration form. An example of the importance of checking this field is on the advanced page. If the user chooses to register without using her Facebook account, the oauth_token, user_id, and expires parameters will not be included in the signed request.

PHP Example reading signed_request

Note: Replace your_app_id with your own application id and your_app_secret with your own application secret key

<?php define('FACEBOOK_APP_ID', 'your_app_id'); define('FACEBOOK_SECRET', 'your_app_secret'); function parse_signed_request($signed_request, $secret) { list($encoded_sig, $payload) = explode('.', $signed_request, 2); // decode the data $sig = base64_url_decode($encoded_sig); $data = json_decode(base64_url_decode($payload), true); if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') { error_log('Unknown algorithm. Expected HMAC-SHA256'); return null; } // check sig $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true); if ($sig !== $expected_sig) { error_log('Bad Signed JSON signature!'); return null; } return $data; } function base64_url_decode($input) { return base64_decode(strtr($input, '-_', '+/')); } if ($_REQUEST) { echo '<p>signed_request contents:</p>'; $response = parse_signed_request($_REQUEST['signed_request'], FACEBOOK_SECRET); echo '<pre>'; print_r($response); echo '</pre>'; } else { echo '$_REQUEST is empty'; } ?>

Kirim

3.806 orang

Report Documentation Bug

Diperbarui sekitar 4 bulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Facepile
Core Concepts Social Plugins Facepile

The Facepile plugin displays the Facebook profile pictures of users who have liked your page or have signed up for your site. If you want the plugin to display users who have liked your page, specify the URL of your page as the href parameter. If you want the plugin to display users who have signed up for your site, specify your application id as the

app_id parameter.
The plugin is available either via a simple iframe you can drop into your page, or if you are using the new JavaScript SDK, you can use the <fb:facepile> XFBML tag (or <div class="fb-facepile"> if you prefer HTML5 markup).

URL (?)
http://example.com

Size (?)
Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button small

Width (?)
200

Num rows (?)

1

Color Scheme (?)

light

Get Code

Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta)

Attributes
href - the URL of the page. The plugin will display photos of users who have liked this page. app_id - if you want the plugin to display users who have connected to your site, specify your application id as this
parameter. This parameter is only available in the iframe version of the Facepile. If you are using the XFBML version of the plugin, specify your application id when you initialize the Javascript library.

max_rows - the maximum number of rows of faces to display. The XFBML version will dynamically size its height; if
you specify a maximum of four rows of faces, but there are only enough friends to fill two rows, the XFBML version of the plugin will set its height for two rows of faces. Default: 1.

width - width of the plugin in pixels. Default width: 200px. size - size of the photos and social context. Default size: small. colorscheme - the color scheme for the like button. Options: 'light', 'dark'.

Why is nothing displaying?

The plugin only displays friends photos. If the user does not have friends who have liked your page or have connected to your site, no faces will be shown. If you are displaying users who have liked your page, and no users have liked it yet, the plugin will render nothing. If some users have liked your page, but none of the viewing users friends have liked it, the plugin will display the total number of users who have liked your page. If you are displaying users who have connected to your site, and none of the users friends have connected yet, the plugin will render nothing.

How to show users who have connected to your site

You need to specify your application id. If you are using the iframe version simply include it as another query parameter. Example:

<iframe src="http://www.facebook.com/plugins/facepile.php? app_id={YOUR_APP_ID}" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px;" allowTransparency="true"></iframe>

If you are using the XFBML version specify your application id when you initialize the Javascript library. Example:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js #appId={YOUR_APP_ID}&amp;xfbml=1"></script><fb:facepile></fb:facepile>

Kirim

13.100 orang

Report Documentation Bug

Diperbarui sekitar seminggu yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Live Stream
Core Concepts Social Plugins Live Stream

The Live Stream plugin lets users visiting your site or application share activity and comments in real time. Live Stream works best when you are running a real-time event, like live streaming video for concerts, speeches, or webcasts, live Web chats, webinars, massively multiplayer games. The minimum supported plugin width is 400px.
Privasi Keluar

App ID (?)
164266186973440

Diskusikan acara ini

Kirim ke Facebook?

Width (?)
400

Bagikan

Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button

Height (?)
500

Jadilah orang pertama yang berbagi pikiran di acara ini

XID (?)

Via Attribution URL (?)

Always post to friends (?) Always post to friends

Get Code

Beta Plugins Activity Feed (Beta) Add To Timeline (Beta) Facepile (Beta) Recommendations Bar (Beta) Recommendations Box (Beta) Kirim Fajar Sani Report Documentation Bug

Diperbarui sekitar sebulan yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Open Graph Protocol

Core Concepts Open Graph Protocol

We announced the next version of the Open Graph at f8 2011. It is currently in beta. You can view the Open Graph Beta documentation here. The below documentation refers to the first version of the Open Graph that shipped with the Like Button at f8 2010. This is the current production version of the Open Graph and will work with the Like Button and other social plugins.

The Open Graph Protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things things like movies, sports teams, celebrities, and restaurants. Including Open Graph tags on your Web page, makes your page 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 the same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content. The structured data you provide via the Open Graph Protocol defines how your page will be represented on Facebook.

Getting Started
To turn your web pages into graph objects, you'll need to add Open Graph protocol <meta> tags and the Like button to your webpages. The tags allow you to specify structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today and in the future. Here's an example for a movie page:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock"/> <meta property="og:type" content="movie"/> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/> <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/> <meta property="og:site_name" content="IMDb"/> <meta property="fb:admins" content="USER_ID"/> <meta property="og:description" content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/> ... </head> ... </html>
The Open Graph protocol defines four required properties:

og:title - The title of your object as it should appear within the graph, e.g., "The Rock". og:type - The type of your object, e.g., "movie". See the complete list of supported types. og:image - An image URL which should represent your object within the graph. The image must be at least 50px

by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.

og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://www.imdb.com/title/tt0117500/.
In addition, we've extended the basic meta data to add a required field to connect your webpage with Facebook:

fb:app_id - A Facebook Platform application ID that administers this page.

It's also recommended that you include the following properties as well as these multi-part properties.

og:site_name - A human-readable name for your site, e.g., "IMDb". og:description - A one to two sentence description of your page.
If a user likes your URL using a Like button, a News Feed story similar to the one below will be published to Facebook. The

og:title links to og:url and the og:site_name is rendered pointing to your site's domain automatically.
On a user's profile, og:type defines which category your link will appear within; og:image is the image thumbnail.

For some objects, it makes sense to specify additional meta data, such as location for a restaurant. You can add as many

og:-prefixed properties as you would like to provide additional context about your web pages. Learn more about the other
property fields.

Adding a Like button

Once you configure the meta tags on your web page, you can now add a Like button associated to this page. The Like button can be simply added with an <iframe>, or you can use the JavaScript SDK for the <fb:like> XFBML tag:

<fb:like href="https://developers.facebook.com/" width="450" height="80"/>

Go here to learn about additional Like button options. Here's a sample Like button for an Open Graph-enabled page:
5.630 orang menyukai ini. Jadilah orang pertama di antara teman-teman.

Suka

You can also add any of a number of social plugins to your site with a line of HTML.

Check your work

There are many tools to ensure you put the <meta> tags correctly on your page. The official Facebook URL Linter which uses the same code that we use for the Like button and other Open Graph Protocol consumption. Therefore, it gives you the closest possible match as to how we will treat your page when we crawl it in production. opengraphprotocol.org has many community tools for consuming its protocol.

Page Administration
To administer your page, you need to associate it with either your Facebook account or your Facebook Platform application. It is valid to associate your page with both user accounts and a Facebook Platform Application. To associate the page with your Facebook account, add the additional property fb:admins to your page with a commaseparated list of the user IDs or usernames of the Facebook accounts who own the page, e.g.:

<meta property="fb:admins" content="USER_ID1,USER_ID2"/>

Each listed user must click Like on the URL to be approved as an admin. This is to prevent users being made admins

without their consent. Some sites may have hundreds or even thousands of pages with Open Graph protocol meta data. To handle a site with lots of pages, you can link your pages to your Facebook Platform application. This will enable you to publish stream updates to your pages programmatically. To connect your Page to your Facebook application ID, include your application's id in the fb:app_id property on your pages:

<meta property="fb:app_id" content="1234567"/>

Editing Meta Tags

You can update the attributes of your page by updating your page's <meta> tags. Note that og:title and og:type are only editable initially - after your page receives 50 likes the title becomes fixed, and after your page receives 10,000 likes the type becomes fixed. These properties are fixed to avoid surprising users who have liked the page already. Changing the title or type tags after these limits are reached does nothing, your page retains the original title and type. For the changes to be reflected on Facebook, you must force your page to be scraped. The page is scraped when an admin for the page clicks the Like button or when the URL is entered into the Facebook URL Linter. You can programmatically force your page to be scraped by cURL'ing the linter. For example:

curl https://developers.facebook.com/tools/lint/?url={YOUR_URL}&format=json

Publishing
You can publish stream updates to the users who have liked your page just like you can with Facebook Pages. There are two ways to get to the publishing interface: From your Web page, click Admin Page next to the Like button. From Facebook, click Manage Pages under the Account tab, then click Go To Page next to your page name You can publish stories to your users the same way you write a Facebook post from your own wall: by typing in the Publisher, the field at the top of the screen that says "What's on your mind?" The stories appear in the News Feed of anyone who has clicked the Like button on your webpage. If you associate your page with a Facebook application using the fb:app_id meta tag, you can publish updates to the users who have liked your pages via the Graph API. First you need to get an access token for your application. This can be obtained with

curl -F grant_type=client_credentials \ -F client_id=your_app_id \ -F client_secret=your_app_secret \ https://graph.facebook.com/oauth/access_token

Using this access token and the URL of your page, you can publish to users via the API with

curl -F 'access_token=...' \ -F 'message=Hello Likers' \ -F 'id=http://www.myopengraphpage.com/page1.html' \ https://graph.facebook.com/feed

Some sample PHP code to help you get started:

<?php $ogurl = "INSERT_YOUR_OG_URL_HERE"; define(FACEBOOK_APP_ID, "YOUR_APP_ID_HERE"); define(FACEBOOK_SECRET, "YOUR_SECRET_KEY_HERE"); $mymessage = "Hello World!"; $access_token_url = "https://graph.facebook.com/oauth/access_token"; $parameters = "grant_type=client_credentials&client_id=" . FACEBOOK_APP_ID . "&client_secret=" . FACEBOOK_SECRET; $access_token = file_get_contents($access_token_url . "?" . $parameters); $apprequest_url = "https://graph.facebook.com/feed"; $parameters = "?" . $access_token . "&message=" . urlencode($mymessage) . "&id=" . $ogurl . "&method=post"; $myurl = $apprequest_url . $parameters; $result = file_get_contents($myurl); // output the post id echo "post_id" . $result; } ?>

The story will be published with the attribution of your application name.

Recommended Meta Data

Two common pieces of information many profile pages have are location and contact information. Below are examples of how you can provide this information as meta data.

Location
This is useful if your pages is a business profile or about anything else with a real-world location. You can specify location via latitude and longitude, a full address, or both. For example:

<html xmlns:og="http://ogp.me/ns#"> <head> ... [REQUIRED TAGS] <meta property="og:latitude" content="37.416343"/> <meta property="og:longitude" content="-122.153013"/> <meta property="og:street-address" content="1601 S California Ave"/> <meta property="og:locality" content="Palo Alto"/> <meta property="og:region" content="CA"/> <meta property="og:postal-code" content="94304"/> <meta property="og:country-name" content="USA"/> ... </head>

Contact Information
Consider including contact information if your page is about an entity that can be contacted. For example:

<html xmlns:og="http://ogp.me/ns#"> <head> ... [REQUIRED TAGS] <meta property="og:email" content="[email protected]"/> <meta property="og:phone_number" content="650-123-4567"/> <meta property="og:fax_number" content="+1-415-123-4567"/> ... </head>

Object types
Facebook currently supports the following object types. They're specified using the og:type property. For example:

<meta property="og:type" content="athlete" />

Note that the Open Graph protocol is currently designed to support real-life objects. If your URL is a piece of content such as a news article, photo, video, or similar you should set og:type to article (see below). Pages of type

article do not have publishing rights, and will not show up on user's profiles because they are not real world objects.

Activities
activity sport

Businesses
bar company cafe hotel restaurant

Groups
cause sports_league sports_team

Organizations
band government non_profit school university

People
actor athlete author director musician politician public_figure

Places
city country landmark state_province

Products and Entertainment

album book drink food game product song movie tv_show
For products which have a UPC code or ISBN number, you can specify them using the og:upc and og:isbn properties. These properties help uniquely identify products.

Websites
blog website article
Use article for any URL that represents transient content - such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types

website or blog should usually only appear on the root of a domain.

If your object does not fit into one of the types above, you can specify your own type. This will be represented as type

other on Facebook. We will monitor the most commonly used types and graduate them to fully supported og:types. If
you are specifying your own type we recommend that you use your own namespace. For example if you are moviesite.com, and you want to mark a URL on your site as a director you would do:

<html xmlns:moviesite="http://www.moviesite.com/ns#" > <head> .... <meta property="og:type" content="moviesite:director"/>

Game Achievements
You can also define game achievements using Open Graph metadata and type game.achievement. For more information about achievements please refer achievements documentation. When creating achievements, you also need to set the game:points property which defines the associated points for the achievement.

<html xmlns:og="http://ogp.me/ns#"> <head> ... [REQUIRED TAGS] <meta property="og:type" content="game.achievement"/> <meta property="game:points" content="POINTS_FOR_ACHIEVEMENT"/> ... </head>

Attaching Audio and Video Data

If you want to attach a video to your Open Graph page you can specify a video url:

og:video - e.g., "http://example.com/awesome.swf"

If you specify a non-HTTPS url, we will only embed your video for users who are browsing Facebook without HTTPS enabled. You can use the additional parameter og:video:secure_url to specify an HTTPS video url which we will embed for users who do have HTTPS browsing enabled. HTTPS urls require a valid certificate and it is important that you do not cause the browser to load any non-HTTPS resources, as this will prevent your embedded video from playing correctly.

og:video:secure_url - e.g., "https://secure.example.com/awesome.swf"

You can optionally add additional metadata:

og:video:width - e.g. "640" og:video:height - e.g. "480" og:video:type - e.g. "application/x-shockwave-flash"

You may specify more than one og:video. If you specify more than one og:video, then og:video:type is required for each video. You must include a valid og:image for your video to be displayed in the news feed. For example:

<html xmlns:og="http://ogp.me/ns#"> <head> ... [REQUIRED TAGS] <meta property="og:video" content="http://example.com/awesome.swf" /> <meta property="og:video:height" content="640" /> <meta property="og:video:width" content="385" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:video:secure_url" content="https://secure.example.com/awesome.swf" /> <meta property="og:video" content="http://example.com/html5.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video" content="http://example.com/fallback.vid" /> <meta property="og:video:type" content="text/html" /> ... </head>
In the above example, Facebook uses the og:video:type to determine how to render the video in the news feed. In desktop browsers and Flash-enabled mobile browsers, Facebook will render "http://example.com/awesome.swf" (or the secure alternative) as a Flash video. In Safari on the iPad, Facebook will render "http://example.com/html5.mp4" inside an HTML 5 <video> tag. In browsers which support neither Flash nor HTML 5, Facebook will link to "http://example.com/fallback.vid" when the video thumbnail is clicked. In a similar fashion to og:video you can add an audio file to your markup:

og:audio - e.g., "http://example.com/amazing.mp3"

and optionally

og:audio:title - e.g. "Amazing Soft Rock Ballad" og:audio:artist - e.g. "Amazing Band" og:audio:album - e.g. "Amazing Album" og:audio:type - e.g. "application/mp3"
For example:

<html xmlns:og="http://ogp.me/ns#"> <head> ... [REQUIRED TAGS] <meta property="og:audio" content="http://example.com/amazing.mp3" /> <meta property="og:audio:title" content="Amazing Song" /> <meta property="og:audio:artist" content="Amazing Band" /> <meta property="og:audio:album" content="Amazing Album" /> <meta property="og:audio:type" content="application/mp3" /> ... </head>

Best practices
Make it easy for users to Like things on your site. Place the Like button close to the object they are liking. When publishing, use only the 'voice' of the object. For example, if users are liking an actor in a TV show, that actor should publish stories about themselves, not general information on the show, or the TV network. If your website applies any geographical restrictions that excludes the United States, Facebook's servers will be unable to verify your Open Graph Tags and properly scrape your page. You should whitelist the Facebook User Agent in order to guarantee we can confirm your Open Graph Tags. The user agent is currently

facebookexternalhit/1.0 (+https://www.facebook.com/externalhit_uatext.php)

Building standards
Facebook Platform uses the Open Graph protocol to enable integrations of your web pages into the social graph. While a new technology, we've tried to build off of existing open standards to create a more semantically aware web.
Kirim 11.567 orang Report Documentation Bug

Diperbarui 2 minggu yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Social Channels
Core Concepts 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 friends endorsement, communication through Facebook Platform can help high-quality products grow tremendously. This document provides an overview of the available channels, so you can choose the ones which make the most sense for your user experience. Unless noted, all channels will work for Websites, mobile and Apps on Facebook.com.

News Feed
The News Feed is shown immediately to users upon logging into Facebook, making it core to the Facebook experience. There are several ways you can publish content to the stream: Feed Dialog, Feed Graph object and Like Button. Feed Dialog: Prompt Users to Publish The recommended way to publish to the stream is with the Feed Dialog. Without requiring users to log into your application or grant any special permission, you can prompt users to publish stories about what they are doing in your application. If a user chooses to publish, the story will appear on the users profile and may appear to the users friends News Feeds. Stories published from your application will include a link to your application, and can optionally include a rich attachment. Here is a basic example of how to prompt a user to publish a story:

<html> <head> <title>My Great Website</title> </head> <body> <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"> </script> <script> FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true }); FB.ui({ method: 'feed', message: 'Facebook for Websites is super-cool'}); </script> </body> </html>
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. Read more about Feed Dialog options including other defaults for the dialog, which the user can then modify or override prior to posting. The code above prompts the user with this dialog:

Feed Graph Object: Publish via the Graph API There are some cases when you may want to provide a customized experience for publishing to the user's news feed. You can publish via the Graph API for users who have authorized your application and who have granted you the publish_stream permission. The available fields are the same as the feed dialog fields. The following POST action will render the same story as in the example above. For example, you can publish to a user's wall by issuing a POST request to

https://graph.facebook.com/<username>/feed: curl -F 'access_token=...' \ -F 'message=Facebook for Websites is super-cool.' \ https://graph.facebook.com/<username>/feed

Read the complete documentation on posting and attachments and also the Facebook Platform Policies. Like button The Like button lets your users easily share interesting content from your application or website back to Facebook. Like stories appear on users Wall and their friends News Feeds. In addition, if you specify meta information via the Open Graph protocol, your pages becomes equivalent to Facebook Pages. 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 users News Feed. There are two Like button implementations: XFBML and Iframe. The XFBML version is more versatile, but requires use of the JavaScript SDK.

Requests
Requests are a great way to enable users to invite their friends to your application. Requests integrate with Facebook notifications and dashboards, ensuring that a user will see the requests from their friends whenever they are on Facebook. 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 users explicit action on a request dialog. These requests update the bookmark count for the recipient. You send requests by using the Request Dialog. App-generated requests: These requests can be initiated and sent only to users who have authorized your app. Developers can send these requests using the Graph API. 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 its now your turn). The following HTML/JavaScript example shows how to create a User-generated request:

<html> <head> <title>My Great Website</title> </head> <body> <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"> </script> <script> FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true }); FB.ui({ method: 'apprequests', message: 'Here is a new Requests dialog...'}); </script> </body> </html>
This example uses the JavaScript SDK to render a Request Form. When the above example is loaded, it results in the following request experience:

If you prefer to have your app send requests directly to the user (an App-generated request), you post a request to the

apprequest connection of the User Graph object:

<?php $app_id = YOUR_APP_ID; $app_secret = YOUR_APP_SECRET; $token_url = "https://graph.facebook.com/oauth/access_token?" . "client_id=" . $app_id . "&client_secret=" . $app_secret . "&grant_type=client_credentials"; $app_access_token = file_get_contents($token_url); $user_id = THE_CURRENT_USER_ID; $apprequest_url ="https://graph.facebook.com/" . $user_id . "/apprequests?message='INSERT_UT8_STRING_MSG'" . "&data='INSERT_STRING_DATA'&" . $app_access_token . "&method=post"; $result = file_get_contents($apprequest_url); echo("App Request sent?", $result); ?>
The message parameter is a UTF-8 string which describes the request. The data parameter is a string which the app can use to store any relevant data in order to process the request. Once sent, new requests a user has received are visible as a counter on your application's bookmark and it also increments the counter next to the appropriate Dashboard.

When the user clicks on the bookmark to load your application, we are passed two parameters in the URL querystring: ref and count (i.e. ref=bookmarks&count=1). The ref parameter contains the value "bookmark". The count parameter will contain the total count set on the bookmark. When the user accepts your request via the dashboard, we pass the request id that they are acting on via the

request_ids parameter.
A good common practice for Apps on Facebook.com is to detect if a user has any requests pending when your application loads and then prompt the user to complete the actions associated with the requests before continuing. This way users don't have to process your requests out of the context of your app. You can determining all the pending requests for a given user by accessing the apprequests connection of the User Object in the Graph API. The following PHP example demonstrates how to access the pending requests for a user and then delete the requests once you have completed any associated actions:

<?php $app_id = 'YOUR_APP_ID'; $app_secret = 'YOUR_APP_SECRET'; $token_url = "https://graph.facebook.com/oauth/access_token?" . "client_id=" . $app_id . "&client_secret=" . $app_secret . "&grant_type=client_credentials"; $access_token = file_get_contents($token_url); $signed_request = $_REQUEST["signed_request"]; list($encoded_sig, $payload) = explode('.', $signed_request, 2); $data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true); $user_id = $data["user_id"]; //Get all app requests for user $request_url ="https://graph.facebook.com/" . $user_id . "/apprequests?" . $access_token; $requests = file_get_contents($request_url); //Print all outstanding app requests echo '<pre>'; print_r($requests); echo '</pre>'; //Process and delete app requests $data = json_decode($requests); foreach($data->data as $item) { $id = $item->id; $delete_url = "https://graph.facebook.com/" . $id . "?" . $access_token; $delete_url = $delete_url . "&method=delete"; $result = file_get_contents($delete_url); echo("Requests deleted? " . $result); } ?>

Automatic Channels
To drive more traffic to Facebook Platform applications and websites, in addition to the channels above, we enable some distribution automatically as people use your applications. You do not need to do anything extra to enable this distribution. Each automatic channel is designed to help engage users and our algorithms help surface the best content for each user. As Facebook evolves as a product, expect these channels to change and improve. The current automatic channels include: Bookmarks Notifications Dashboards Usage Stories App Profiles & Search Bookmarks Bookmarks enable users to easily navigate back to your application from within Facebook. Bookmarks are automatically added for your application after the user engages with your applications. The bookmark will appear on left column of the homepage as well as on the top right of a Canvas Page.

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

Dashboards Apps on Facebook.com have the opportunity to appear on one of two dashboards -- the Apps Dashboards and the Games Dashboard. Dashboards appear as bookmarked links on Facebook's homepage and shows users outstanding requests, apps they've recently used and apps their friends have recently used. The Application Directory is also accessible from the Dashboard. Usage Stories Many actions on Facebook are shared with friends. Similarly, a variety of feed stories may be published to share with users the popular applications their friends are using. These stories are typically targeted at people who have not used your application to provide a way for new users to discover your application. App Profiles & Search Each new applications has its own App Profiles Page (for example, see Facebook 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 application, this Page shows up in the search typeahead or on the search results page. From this Page, users can navigate to your application or Like your Page. You can also choose to update users who have liked your profile Page with news about your application.
Kirim 8.083 orang Report Documentation Bug

Diperbarui pada hari Selasa

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Dukungan

Blog

Aplikasi

Search Documentation / Apps

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

Authentication
Core Concepts Authentication

Facebook Platform uses the OAuth 2.0 protocol for authentication and authorization. We support a number of different OAuth flows that you can use within your Website, mobile and desktop apps. This document outlines that different mechanisms Facebook Platform uses to support each of these flows. The examples in this document use PHP for server-side programming and HTML/JavaScript for client-side code. These examples are very straightforward and easily translatable to other languages.

User Login
Facebook Platform supports two different OAuth 2.0 flows for user login: server-side (known as the authentication code flow in the specification) and client-side (known as the implicit flow). The server-side flow is used whenever you need to call the Graph API from your web server. The client-side flow is used when you need to make calls to the Graph API from a client, such as JavaScript running in a Web browser or from a native mobile or desktop app. Regardless of the flow you utilize, our implementation of the OAuth 2.0 involves three different steps: user authentication, app authorization and app authentication. User authentication ensures that the user is who they say they are. App authorization ensures that the user knows exactly what data and capabilities they are providing to your app. App authentication ensures that the user is giving their information to your app and not someone else. Once these steps are complete, your app is issued an user access token that enables you to access the user's information and take actions on their behalf.

Reference Authenticating Devices Legacy Canvas Auth Legacy Connect Auth Permissions Re-Authentication Signed Request

Server-side Flow
User authentication and app authorization are handled at the same time by redirecting the user to our OAuth Dialog. When invoking this dialog, you must pass in your app id that is generated when you create your application in our Developer App (the client_id parameter) and the URL that the user's browser will be redirected back to once app authorization is completed (the redirect_uri parameter). The redirect_uri must be in the path of the Site URL you specify in Website section of the Summary tab in the Developer App. Note, your redirect_uri can not be a redirector.

https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL
See the Alternate Redirect URIs section below for more information. If the user is already logged in, we validate the login cookie that we have stored on the user's browser, authenticating the user. If the user is not logged in, they are prompted to enter their credentials:

Once we have successfully authenticated the user, the OAuth Dialog will prompt the user to authorize the app:

By default, the user is asked to authorize the app to access basic information that is available publicly or by default on Facebook. If your app needs more than this basic information to function, you must request specific permissions from the user. This is accomplished by adding a scope parameter to the OAuth Dialog request followed by comma separated list of the required permissions. The following example shows how to ask for access to user's email address and their news feed:

https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream
This results in the following dialog being presented to the user after they are authenticated:

A full list of permissions is available in our permissions reference. There is a strong inverse correlation between the number of permissions your app 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 app. If the user presses Don't Allow, your app is not authorized. The OAuth Dialog will redirect (via HTTP 302) the user's browser to the URL you passed in the redirect_uri parameter with the following error information:

http://YOUR_URL?error_reason=user_denied& error=access_denied&error_description=The+user+denied+your+request.
If the user presses Allow, your app is authorized. The OAuth Dialog will redirect (via HTTP 302) the user's browser to the URL you passed in the redirect_uri parameter with an authorization code:

http://YOUR_URL?code=A_CODE_GENERATED_BY_SERVER
With this code in hand, you can proceed to the next step, app authentication, to gain the access token you need to make API calls. In order to authenticate your app, you must pass the authorization code and your app secret to the Graph API token endpoint - along with the exact same redirect_uri used above - at

https://graph.facebook.com/oauth/access_token. The app secret is available from the Developer App and
should not be shared with anyone or embedded in any code that you will distribute (you should use the client-side flow for these scenarios).

https://graph.facebook.com/oauth/access_token? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL& client_secret=YOUR_APP_SECRET&code=THE_CODE_FROM_ABOVE

If your app is successfully authenticated and the authorization code from the user is valid, the authorization server will return the access token:

In addition to the access token (the access_token parameter), the response contains the number of seconds until the token expires (the expires parameter). Once the token expires, you will need to re-run the steps above to generate a new code and access_token, although if the user has already authorized your app, they will not be prompted to do so again. If your app needs an access token with an infinite expiry time (perhaps to take actions on the user's behalf after they are not using your app), you can request the offline_access permission. If there is an issue authenticating your app, the authorization server will issue an HTTP 400 and return the error in the body of the response:

{ "error": { "type": "OAuthException", "message": "Error validating verification code." } }

The diagram below illustrates the HTTP calls made through the server-side flow:

The following PHP example demonstrates the server-side flow with CSRF protection in one self-contained example:

<?php $app_id = "YOUR_APP_ID"; $app_secret = "YOUR_APP_SECRET"; $my_url = "YOUR_URL"; session_start(); $code = $_REQUEST["code"]; if(empty($code)) { $_SESSION['state'] = md5(uniqid(rand(), TRUE)); //CSRF protection $dialog_url = "https://www.facebook.com/dialog/oauth?client_id=" . $app_id . "&redirect_uri=" . urlencode($my_url) . "&state=" . $_SESSION['state']; echo("<script> top.location.href='" . $dialog_url . "'</script>"); } if($_REQUEST['state'] == $_SESSION['state']) { $token_url = "https://graph.facebook.com/oauth/access_token?" . "client_id=" . $app_id . "&redirect_uri=" . urlencode($my_url) . "&client_secret=" . $app_secret . "&code=" . $code; $response = @file_get_contents($token_url); $params = null; parse_str($response, $params); $graph_url = "https://graph.facebook.com/me?access_token=" . $params['access_token']; $user = json_decode(file_get_contents($graph_url)); echo("Hello " . $user->name); } else { echo("The state does not match. You may be a victim of CSRF."); } ?>

Client-side Flow
The client-side flow also uses the OAuth Dialog for user authentication and app authorization. The only difference is that you must specify the response_type parameter with a value of token:

https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&response_type=token
As with the server-side flow, you can also request additional permissions using the scope parameter:

https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream& response_type=token

Once the user is authenticated and authorizes your application, the browser will be redirected to redirect_uri but rather than being passed a authorization code (via the code parameter) as in the server-side flow, the redirect_uri is passed the access token in a URI fragment (#access_token):

http://YOUR_URL#access_token=166942940015970%7C2.sa0&expires_in=64090
Because the access token is passed in an URI fragment, only client-side code (such as JavaScript executing in the browser or desktop code hosting a web control) can retrieve the token. App authentication is handled by verifying that the redirect_uri is in the same path as the Site URL configured in the Developer App. See the Alternate Redirect URIs section below for more information. The diagram below illustrates the HTTP calls made through the client-side flow:

The following HTML/JavasScript example demonstrates the client-side flow in one self-contained example:

<html> <head> <title>Client Flow Example</title> </head> <body> <script> function displayUser(user) { var userName = document.getElementById('userName'); var greetingText = document.createTextNode('Greetings, ' + user.name + '.'); userName.appendChild(greetingText); } var appID = "YOUR_APP_ID"; if (window.location.hash.length == 0) { var path = 'https://www.facebook.com/dialog/oauth?'; var queryParams = ['client_id=' + appID, 'redirect_uri=' + window.location, 'response_type=token']; var query = queryParams.join('&'); var url = path + query; window.open(url); } else { var accessToken = window.location.hash.substring(1); var path = "https://graph.facebook.com/me?"; var queryParams = [accessToken, 'callback=displayUser']; var query = queryParams.join('&'); var url = path + query; // use jsonp to call the graph var script = document.createElement('script'); script.src = url; document.body.appendChild(script); } </script> <p id="userName"></p> </body> </html>

Using the Access Token

With a valid access token you can invoke the Graph API by appending the access_token parameter to Graph API (and Legacy REST API) requests:

https://graph.facebook.com/me?access_token=ACCESS_TOKEN
If the user changes their password, the access token expires or the user deauthorizes your app in the App Dashboard, the Graph API will issue an HTTP 400 and return the error in the body of the response:

{ "error": { "type": "OAuthException", "message": "Error validating access token." } }

Your app can request a new access token by re-running the appropriate flow if this error occurs.

App Deauthorization
When a user of your app removes it in the App Dashboard or blocks the app in the News Feed, your app can be notified by specifying a Deauthorize Callback URL in the Developer App. During app removal we will send an HTTP POST request containing a single parameter, signed_request, which contains the user id (UID) of the user that just removed your app. You will not receive an user access token in this request and all existing user access tokens will be automatically expired.

Alternate Redirect URIs

When redirect_uris are specified in the authentication flows, the user is normally redirected to a path under the Site URL that you specify in the Basic Info section on the Summary tab in the Developer App. However, you can override this

behavior and redirect to one or more other related or sub-domains by specifying each domain name in the App Domain field in the Basic Info section of the Summary Tab in the Developer App:

Specifying additional App Domains for your app is useful for redirecting users to other servers for geographic distribution of load, for example. However, please note that your redirect_uri can not be a redirector.

Logout
You can log a user out of their Facebook session by directing them to the following URL:

https://www.facebook.com/logout.php?next=YOUR_URL&access_token=ACCESS_TOKEN YOUR_URL must be a URL in your site domain, as defined in the Developer App.

App Login
In addition to User Login, Facebook Platform support App Login using the OAuth 2.0 Client Credential flow. App Login allows you to take various administrative actions for your app, such as retrieving Insights data or approving Requests. Graph API calls that require an app access token are clearly denoted in the API reference. You can obtain the app access token from the Graph API token endpoint at

https://graph.facebook.com/oauth/access_token by specifying your app id, app secret and client_credentials

in the grant_type parameter. Both the app id and app secret are generated when your app is created in the Developer App.

https://graph.facebook.com/oauth/access_token? client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET& grant_type=client_credentials

Sending an HTTP GET request to the above URL will return an access_token in the body of the response:

You then use this access token when calling app specific parts of the Graph API (such as App Insights):

https://graph.facebook.com/YOUR_APP_ID/insights? access_token=TOKEN_FROM_ABOVE

Page Login
Facebook Pages follow a slightly different flow from user and app login. Every Page has one or more administrator which can perform privileged operations on the Page. In order for your app to perform these privileged operations, the user must grant your app the manage_pages permission:

https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=manage_pages& response_type=token

Once an administrator has granted your app this permission, you can then access the account connection of the User Graph API:

https://graph.facebook.com/me/accounts?access_token=TOKEN_FROM_ABOVE
This connection returns a list of all the Pages the user administers including Page specific access token for each Page:

You can use the access token returned for a given Page to perform administrative actions on behalf of the user on that Page.

App Types
Facebook Platform provides a number of ways to use the above OAuth flows in different app types, including Websites, Apps on Facebook.com, Mobile and Desktop Apps.

Websites
Our Website Getting Started Guide provides an overview of adding user login to your Website using our JavaScript SDK and Login Social Plugin.

Apps on Facebook.com
Our Apps on Facebook.com Getting Started Guide provides details on how to handle user login when integrating your app into our core experience on Facebook.

Mobile Apps
The Mobile App Getting Started Guide highlights how to use our mobile SDKs and the mobile support in the OAuth Dialog to perform user login on mobile devices.

Desktop Apps
Our OAuth 2.0 implementation does not include explicit desktop app support. However, if your desktop app can embed a web browser (most desktop frameworks such as .NET, AIR and Cocoa support embedding browsers), you can use the client-side flow with one modification: a specific redirect_uri. Rather than requiring desktop apps to host a web server and populate the Site URL in the Developer App, we provide a specific URL you can use with desktop apps:

https://www.facebook.com/connect/login_success.html.
Embed a web browser and load the OAuth Dialog (https://www.facebook.com/dialog/oauth) using the client-side flow (i.e. response_type=token):

https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID& redirect_uri=https://www.facebook.com/connect/login_success.html

After the user authorizes your app, we redirect the user back to the redirect_uri with the access token in the URI fragment:

https://www.facebook.com/connect/login_success.html#access_token=...

Detect this redirect and then read the access token out of the URI using whatever mechanisms provided by your framework of choice.

Security Considerations
Cross Site Request Forgery (CSRF)
Cross site request forgery is an attack in which a trusted (authenticated and authorized) user unknowingly performs an action on website. To prevent this attack, you should pass an identifier in the state parameter, and then validate the state parameter matches on the response. We strongly recommend that any app implementing Facebook user login implement CSRF protection using this mechanism.

Redirect_URI
Please be aware that you can not specify a redirector for the redirect_uri. Visit the OAuth 2.0 section 10.15 for further details.
Kirim 5.253 orang Report Documentation Bug

Diperbarui sekitar seminggu yang lalu

Facebook 2011 Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi