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

oauth : true. </script> </body> </html> Once you have loaded the JavaScript SDK into your page and initialized it with your appId. js. xfbml : true. if (d.async = true.src = "//connect. js. }. status : true.createElement('script'). d. }). id = 'facebook-jssdk'. </script> <div class="fb-login-button">Login with Facebook</div> </body> </html> When the user loads the page in their browser.getElementsByTagName('head')[0].net/en_US/all. id = 'facebook-jssdk'. the JavaScript SDK renders the Login Button on your page: . status : true.net/en_US/all. oauth : true.fbAsyncInit = function() { FB. cookie : true.getElementsByTagName('head')[0]. }(document)). if (d. }.async = true.js".id = id. (function(d){ var js.} js = d. the open source JavaScript SDK is the simplest way to use Facebook for login. 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. 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. js.facebook.init({ appId : 'YOUR_APP_ID'. 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.appendChild(js).getElementById(id)) {return. d. The JavaScript SDK requires that you register your website with Facebook to get an App ID (or appId).init({ appId : 'YOUR_APP_ID'. (function(d){ var js.} js = d.0 directly (see our Authentication Overview).src = "//connect. cookie : true.js".id = id.getElementById(id)) {return.facebook.fbAsyncInit = function() { FB. js. xfbml : true.2. js. }).createElement('script'). js. }(document)).appendChild(js).

the JavaScript SDK will ensure that the user is signed into Facebook and that the request is coming from your website. This ensures that the user is giving their information to your site and not someone else. If the user clicks. If you can do this by adding the permissions you need to the perms attribute of the Login Button like below: . When the user does so. we give you access to the user's name. These steps may seem complex. Facebook needs to authenticate the user. three things need to happen. Second. but fortunately all you need to do is use the Login Button and all the user needs to do is click it. this dialog looks like the below: If the user clicks Allow. First. you must request permissions for this information. This ensures that the user is who they say they are. This ensures that the user knows exactly what data they are disclosing to your site. Lastly. If you need access to more information. By default. Facebook needs to authenticate your website. We then present an authorization dialog in their browser that provides information about your site and the user data you are requesting. such as the user's email address.In order to log the user into your site. picture and any other data they have shared with everyone on Facebook (see the User Graph object for more details). etc. By default. Don't Allow the dialog will close and no information will be available to your website. we will give your site access to the requested information. the user must explicitly authorize your website to access their information.

we offer the Registration Plugin. The greater the number of permissions you ask for.id = id.getElementById(id)) {return. the lower the number of users that will grant them. You merely need to use the <div class="fb- registration"> element in your page. status : true.facebook. There is a strong inverse correlation between the number of permissions your site requests and the number of users that will allow those permissions. id = 'facebook-jssdk'. they will see the below authorization dialog. In addition to Login Button.src = "//connect.getElementsByTagName('head')[0]. }).appendChild(js). (function(d){ var js.net/en_US/all.<html> <head> <title>My Facebook Login Page</title> </head> <body> <div id="fb-root"></div> <script> window.user_checkins"> Login with Facebook </div> </body> </html> When the user clicks the login button from this page.init({ appId : 'YOUR_APP_ID'. }(document)). 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. js.} js = d. cookie : true. }. d. A full list of permissions is available in our permissions reference. oauth : true. </script> <div class="fb-login-button" data-perms="email. Note that there are now two new sections that outline the additional information that your site is requesting permission to access. Using the Registration Plugin is just as simple as using the Login Button. rather than the Login Button: . js. if (d. xfbml : true.async = true.createElement('script').fbAsyncInit = function() { FB. so we recommend that you only request the permissions you absolutely need for your site. js.js".

Notice that the form is not prefilled with any user information. If the user is already logged into Facebook or decides to login from the registration form.net/en_US/all. cookie : true. if (d. }). . status : true.getElementsByTagName('head')[0]. js.init({ appId : 'YOUR_APP_ID'.async = true. Notice that the form is now prefilled with their Facebook information. 'type':'text'}]" data-redirect-uri="URL_TO_LOAD_AFTER_REGISTRATION" </div> </body> </html> If the user is not already logged into Facebook.fbAsyncInit = function() { FB.'description':'What is your favorite car?'. (function(d){ var js.createElement('script'). </script> <div class="fb-registration" data-fields="[{'name':'name'}. {'name':'favorite_car'.} js = d. but there is a link to login to Facebook to do so.<html> <head> <title>My Facebook Login Page</title> </head> <body> <div id="fb-root"></div> <script> window. js. js. {'name':'email'}.id = id. they will see the below form.js". they will see the below. xfbml : true.src = "//connect. oauth : true. d. }(document)). id = 'facebook-jssdk'.facebook.appendChild(js).getElementById(id)) {return. }.

You can learn more about how to add Login with Facebook to your site by reading the documentation for the Login Button. 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. once you have added login to your site. You can use the Graph API to access the user's Facebook profile. favorite_car is a custom field that the user must populate directly.Once the user reviews the information and/or enters any custom fields (in the above example. The Javascript SDK provides a straightforward way to access the Graph API: FB. In doing so. you can also eliminate or reduce whole parts of your codebase.api. we redirect the user to whatever URL you placed into the redirect-uri attribute of the plugin which completes the registration process. Personalization While Social Plugins offer a easy way to personalized your site. the Registration Plugin and the JavaScript SDK. using this data in your own custom experience. you can access the full power of the Graph API to create an even deeper personalized experience for your users. The Login Button and the Registration Plugin allow you to easily bring the more than 500 million Facebook users to your site. You can use the Graph API to publish to the user's Facebook Wall and their News Feed.api() to retrieve the user's picture and name from the Graph API and display it on a page within your site: . as it is not data that is currently part of the user's Facebook profile). The following demonstrates how to use FB. the user clicks Register. 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. This will start the authentication and authorization process which is denoted by the below dialog: With authentication/authorization complete.

js.getElementById('image').fbAsyncInit = function() { FB. </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.getElementsByTagName('head')[0]. d. function(user) { if (user) { var image = document.js".createElement('script'). js.src = "//connect.appendChild(js).async = true.} js = d.net/en_US/all.src = 'https://graph. You can use the FB. FB.facebook. }(document)). id = 'facebook-jssdk'.getElementById('name'). oauth : true.ui function. }).id + '/picture'.getElementById(id)) {return. The following demonstrates how to use the Feed Dialog from your site: . if (d.innerHTML = user. js.facebook. This function invokes our Platform Dialogs within the context of your site.<html> <head> <title>My Facebook Login Page</title> </head> <body> <div id="fb-root"></div> <script> window.name } }). image. }. name.init({ appId : 'YOUR_APP_ID'. (function(d){ var js.ui function to post to the user's Feed or allow them to invite new friends. xfbml : true.api('/me'. var name = document. cookie : true.id = id. status : true.com/' + user.

js. xfbml : true.async = true. cookie : true. The tool offers a host of examples that you can execute directly in the console itself before you make any changes to your site. which the user can then modify or override prior to posting.fbAsyncInit = function() { FB.src = "//connect. (function(d){ var js.appendChild(js).getElementById(id)) {return. }.getElementsByTagName('head')[0]. if (d. js. </script> </body> </html> When this page is loaded in the user's browser. The JavaScript SDK saves the details for the logged in user in a cookie named fbs_YOUR_APP_ID. status : true. message: 'Facebook for Websites is super-cool'}).js". the JavaScript SDK will render the below dialog that the user can use to post to their feed.id = id. id = 'facebook-jssdk'. js. }).facebook. The following PHP example shows you how to use access this cookie and then customize the generated page based on this information: .} js = d. }(document)).ui({ method: 'feed'.init({ appId : 'YOUR_APP_ID'.<html> <head> <title>My Facebook Login Page</title> </head> <body> <div id="fb-root"></div> <script> window. One of the best ways to learn what is possible with the JavaScript SDK is our JavaScript Console. You can set a number of defaults for the dialog.createElement('script'). d. FB. oauth : true. 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.net/en_US/all.

$app_secret) != $args['sig']) { return null.<?php define('YOUR_APP_ID'. id = 'facebook-jssdk'. js. }(document)).appendChild(js). $value.getElementById(id)) {return. }). '\\"').} js = d.async = true. foreach ($args as $key => $value) { if ($key != 'sig') { $payload . if (d.reload().fbAsyncInit = function() { FB. $args). cookie : true. status : true. '=' . }). FB. js. oauth : true. function(response) { window. ?> <html> <body> <?php if ($cookie) { ?> Welcome <?= $user->name ?> <?php } else { ?> <fb:login-button></fb:login-button> <?php } ?> <div id="fb-root"></div> <script> window.subscribe('auth.init({ appId : '<?= YOUR_APP_ID ?>'.getElementsByTagName('head')[0]. js. function get_facebook_cookie($app_id. $user = json_decode(file_get_contents( 'https://graph. $app_secret) { $args = array().location. 'your app id '). } } if (md5($payload .id = id. define('YOUR_APP_SECRET'. } return $args.src = "//connect.com/me?access_token=' . ksort($args). $cookie['access_token'])). YOUR_APP_SECRET). }. } $cookie = get_facebook_cookie(YOUR_APP_ID.facebook. 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.net/en_US/all.facebook.login'. </script> </body> </html> Using the JavaScript SDK cookie is only one of several ways to access user credentials and information from server-side code. (function(d){ var js.Event. $app_id]. Analytics You can get detailed analytics about the demographics of your users and how users are sharing from your website with Insights.createElement('script'). $payload = ''. d.js". parse_str(trim($_COOKIE['fbs_' . .= $key . 'your app secret'). xfbml : true.

The Graph API is a great place to start. First. Our core concepts documents provide deeper insight into the various pieces of Facebook Platform. If you use an external analytics system. if a user puts a URL from your site into a Facebook status message.com referrer. track clicks from plugins embedded on your site separately from clicks with a facebook. Next Steps This was a quick survey of the major features available to your website from Facebook Platform. If you are looking for a real world examples to help you get started building please see our Samples. in-house analytics systems. Kirim 160.facebook.Insights provides reports broken down by domain and by app. The data from Insights is also available in the Graph API so you can integrate the Facebook analytics data with your own. check out our Showcase. For example. that data is included in the analytics for your domain. If you are looking for inspiration.777 orang Report Documentation Bug Diperbarui pada hari Senin Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi . Second. there are a couple of steps you can take to ensure proper counts for page hits on your domain.com/plugins/*. This user agent is used by the Facebook Open Graph tools to retrieve your og meta tags. Social Plugins with have a referral URL matching http://www. 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. exclude requests with a user agent matching facebookexternalhit/*.

If you want to get started with building an App on Facebook right away. 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. Java or C#. such as PHP. Analytics: Accessing analytics for your application. including the News Feed and Notifications. If you wish to start building an App on Facebook now.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. please read the getting started tutorial. please refer to our getting started tutorial. You can build your app using any language or tool chain that supports web programming. Bookmarks for quick re-engagement Once a user starts using your app. When a user requests the Canvas Page. You populate the Canvas Page by providing a Canvas URL that contains the HTML. Your app can integrate with many aspects of Facebook. 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.com Getting Started › Apps on Facebook. If you want to build an app to add to the tab of a Facebook Page then you should refer to Page Tabs. Core APIs Achievements Scores Requests Canvas for your app Apps on Facebook are loaded into a Canvas Page. Social Channels: The key channels that help you grow your user base and re-engage existing users. These Bookmarks are available on the Facebook homepage as well as on the Canvas Page on the top right . such as Social Plugins. A Canvas Page is quite literally a blank canvas within Facebook on which to run your app. we load the Canvas URL within an iframe on that page. All of the core Facebook Platform technologies. This results in your app being displayed within the standard Facebook chrome. JavaScript and CSS that make up your app. In this document we will explain the following concepts: Canvas Page: The Page in which your app is loaded. Python.com Building an app on Facebook gives you the opportunity to deeply integrate into the core Facebook experience. the Graph API and Platform Dialogs are available to Apps on Facebook. we create a bookmark to enable users to easily navigate back to your app from within Facebook.

corner. Developers of app associated with more personal behavior such as dating. User control On the Application Settings Page users can control the maximum audience each app can share with on their behalf. When a user first enters an application. The red counters on the bookmarks notify users of outstanding Requests 2. We ping 5 seconds in. So. when friends use an app or play a game respectively. can turn these stories off by disabling the social discovery field in the Developer app in the ‘On Facebook’ tab under the ‘Canvas’ section. 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. then every 10 minutes. Real-time social app activity To drive greater engagement with platform apps. we present stories that are most relevant to that app. on the upper right side of canvas pages we present a live ticker of appspecific updates from the users' friends. The user needs to grant your app with the publish_actions permission before you can publish a user's scores and achievements. So if . Note that content in the app ticker is specific to the app context the user is in. We change the language to 'played' and 'used' if the user played or used the app more than 15 minutes ago. The user is marked as playing if we have had a ping from them in the last 15 minutes. These Bookmarks are ordered based on how often and recently the user used your app. weight management or pregnancy. These stories show up in the canvas Ticker in real-time. when using an app categorized as 'Games'. As a user continues to use the app. then 5 minutes in. Discovery stories To help users discover new apps and games. These stories are about the user and their friends interacting with the app or game currently being used.0 related requests for your apps and encourage them to respond. The achievements API allows you to publish stories about the user and their friends achieving a set of achievements you define for your app. Facebook generates ‘playing’ and ‘using’ stories by default. the messages the user will see will be specific to what their friends are doing in other games only. we broaden what is presented to updates from friends using the app that the user both currently uses and has not yet installed. Game stories Developers of apps categorized as 'Games' can publish additional stories into the ticker by using the Graph APIs for achievements and scores. if the user is playing a game. These stories are only shown to users.

users want people to see that they are playing one game. we enable various channels that enable new users to discover your app as well as existing users to re-engage with your app. Notifications . They can also control individual stories by x-ing them out real-time from the ticker. they can control that. The current channels include: Bookmarks Bookmarks enable users to easily navigate back to your app from within Facebook. Each channel is designed to help engage users and our algorithms help surface the best content for each user. 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. Bookmarks are automatically added for your app after the user engages with your apps. Social Channels To drive more traffic to apps on Facebook. Bookmarks also show a counter next to them which represents the number of outstanding requests for the user for your app. Users can add a bookmark to 'favorite' which pins them to the top. The bookmark will appear on left column of the homepage as well as on the top right of a Canvas Page. but not another.

Notifications on Facebook are meant to provide prominent but lightweight heads-up about interesting changes to content relevant to users.. App-generated requests: These requests can be initiated and sent only to users who have authorized your app. You can prompt users to publish stories about what they are doing in your app.g. Facebook also shares stories with friends when a user starts using a new app or first installs a new game. users can navigate to your app or Like the App Profile Page. When users search for your app. referral traffic to your app. 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. Analytics Use Insights for your app to track how users are interacting with your app to build the best possible experience for your users. a breakdown of . Discovery stories Similar to the discovery stories in the Ticker. such as accepting a gift or helping the user complete a quest. the story will appear on the user’s profile and may appear to the user’s friends’ News Feeds. Stories published from your app will include a link to your app. and can optionally include a rich attachment. your friend finished her move in a game and it’s now your turn). this Page shows up in the search type-ahead or on the search results page. Insights includes feedback for stream stories. Publishing stories In addition you can publish content to the stream using the Feed Dialog. After the index is rebuilt your app will be discoverable via Search. For app administrators. This Page is similar to other Pages and user profiles on Facebook. From this Page. There are two types of requests that can be sent from an app: User-generated requests: These requests are confirmed by a user’s explicit action on a request dialog. Similar to the Ticker discovery stories. making it core to the Facebook experience. These installation discovery stories show up in friends' News Feed and enables users to discovery popular apps their friends are using. 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. These requests update the bookmark count for the recipient. Search Each new app has its own App Profile Page (for example. 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). You should use these requests to update the bookmark count to encourage a user to re-engage in the app (e. see Facebook Live's page). Requests from your app may trigger a notification to users who will find it relevant. You can also choose to update users who have liked your profile Page with news about your app. If a user chooses to publish. and it includes Wall and Info tabs as well as other configurable tabs. Requests are a great way to enable users to invite their friends to your application. You can learn more about how to enable users to publish stories from your app in our getting started tutorial. You can also use requests to have a user notify their friends to take a specific action in your app.

authentication. now_using. To learn more about our Game APIs. read the achievements and scores API docs. leaderboard_passing. demographics on authorized users and active users. Please read about our core concepts . To learn how to build Facebook Page tabs. Kirim Fajar Sani Report Documentation Bug Diperbarui hari Kamis lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi . and the number of times permissions are prompted and granted. Developers can also track referral traffic from the Ticker stories via the following ref_params.plays. achievement_landing Next Steps Get started with building an App on Facebook by reading our tutorial. In addition. Graph API. for example now_playing. Social Channels. it provides diagnostics for your app so that you can track API errors as well as get access to allocations and throttling information. Param fb_source fb_action_type fb_ticker_mod Description Source of the referral for example canvas_ticker type of action for example game. start here.what user actions contribute to active user count. 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. ticker module.

This means that visitors arrive on your app already "logged in" and with whatever data permissions (email. so it's easy to build one experience that works across multiple devices. Keep them there by letting them connect with their friends. 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. You can use this information to provide a personalized experience for Facebook visitors the moment they land on your app.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. Because of the strength of a friend’s endorsement. Distribution. Users can share with their friends using Requests. likes and interests. communication through Facebook Platform can help high-quality products grow tremendously. To understand the availability of . The same Javascript SDK works across web and mobile. creating a more engaging and personalized experience for your users. Engagement. Facebook Platform lets you bring these users and their friends to your mobile apps. and Open Graph. News Feed. Cross-platform. etc. 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. 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.) you requested in the Required Permissions section. Seamless Social Experiences Facebook Platform enables seamless social experiences across a large variety of devices. Bring users back to your app through a bookmark or search.

Learn more about the Open Graph beta program. which will appear in their friends' News Feeds. you can start integrating with the Open Graph today. iOS and Android. Timeline is coming soon to mobile. these actions are more prominently displayed throughout the Facebook Timeline and News Feed. News Feed When users log into Facebook. app specific actions are shared on Facebook via the Open Graph. or just generally use your app. making it core to the Facebook experience. In preparation. view the mobile distribution support doc. As your app becomes an important part of how users express themselves. the News Feed is the first thing they see.each channel across web apps. complete a task. 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. Requests Requests are a great way to enable users to invite specific friends to play a turn in a game. See it in action: Android Phones Android Tablets iPhone and iPod iPad . The screenshots below show you how a user can post to their own wall.

This list of bookmarks is in sync across desktop and mobile so the apps you use most frequently are there when you want them. Currently. whether they have already logged into your app in the past or not. users can now navigate to web apps via bookmarks.Bookmarks Bookmarks are automatically displayed to the user within Facebook once they login to your app. on our iPhone and iPad apps. the Like button is only available in mobile web apps. On our mobile web site. commented on or shared on sites across the web. You can use this to send them information like important updates to your app or actions that their friends have been taking in your app. See it in action: Android Phones Android Tablets iPhone and iPod iPad Search User can also search for your app within Facebook. users are now able to navigate to native iOS apps. Like stories appear on the user's Wall and their friends’ News Feeds. . See it in action: Android Phones Android Tablets iPhone and iPod iPad Social Plugins Social plugins let you see what your friends have liked. The like button allows your users to easily share interesting content from your app back to Facebook. Email When the user authenticates with your app. Similarly. which grants you access to their email address. you can ask them for the email permission.

Credits is not supported within iOS native apps or web apps running within the Facebook iOS app. It will even run in the Facebook iOS native app. if they are already signed into the Facebook Android app. Check out some of the great mobile experiences that developers have built using Facebook Platform. Click here to get started. Building Android Native Apps If you already have a native Android app (phone or tablet). Building iOS Native Apps If you already have a native iOS app (iPad. 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. iPod). They're signed in immediately.Payments Facebook Credits allows you to accept payments for digital goods or services within your app. Click here to get started. Kirim 17. iPhone. You can also use Single Sign-on to let users sign into your app using their Facebook identity. You can also use Single Sign-on to let users sign into your app using their Facebook identity. 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. if they are already signed into 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. Click here to get started. They're signed in immediately. You can also ship it in native app stores by using the PhoneGap Facebook plugin. without having to enter their username and password. without having to enter their username and password. See our Credits API doc for information on how to integrate Credits into your mobile web app.167 orang Report Documentation Bug Diperbarui sekitar 2 bulan yang lalu .

Credits . Graph API using OAuth 2. Platform Dialogs.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. 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). Recommendations. Activity Feed. Comments Box and Open Graph Protocol.0 and Real-time Updates Insights Export Insights Data Download This sample demonstrates how to export data about your Facebook Apps and Pages.

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 user’s profile How-To: Handle expired access tokens How-To: How to upload a video to user's profile How-To: Use the Graph API to upload a video to a Group, Page or Application How-To: Use the Graph API to access, add or update tags to a picture. Also see how-to get video upload limits for a user How-To: Use the Graph API to Upload a Video (iOS) How-To: Optimize Social Plugin Performance How-To: Build an app on Facebook with Fluid Canvas How-To: Use the Graph API to Manage Events How-To: Handle Revoked Auth Permissions
Kirim 8.752 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 .

and photo tags). Graph API The Graph API is the core of Facebook Platform. site or content. enabling you to read and write data to Facebook. Because the plugins are served by Facebook. likes. uniformly representing objects (like people. These pages gain the functionality of other graph objects including profile links and stream updates for connected users. mobile. Social design is a product strategy that builds upon users’ trusted communities. It provides a simple and consistent view of the social graph. Social Plugins Social Plugins enable you to provide engaging social experiences to your users with just a line of HTML.032 orang Report Documentation Bug Diperbarui sekitar 2 bulan yang lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi . Kirim 38. photos. 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.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 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. encourages conversation between them and ultimately creates a stronger sense of identity for everyone. the content is personalized to the viewer whether or not they have signed into your site. and desktop apps. events. Open Graph Protocol The Open Graph protocol enables you to integrate your pages into the social graph. and pages) and the connections between them (friendships.

Facebook began this way. you can instead work from the outside in: utilize the existing community users have built.605 orang Report Documentation Bug Diperbarui sekitar 3 bulan yang lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi . let them share it and build a community over time. 3. 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. Start by defining the domain or interest that is core to your app or website (music. books. Identity refers to our own sense of self and how we are seen by our communities. 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. 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.). Utilizing Community Facebook profile data can be used to personalize the user experience in your app so that it feels familiar.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. Kirim 26. define new conversations and let them continue to build their identities further. movies. 2. relevant and trusted by default. Facebook Platform makes it easy to take the "outside in" approach. Community refers to the people we know and trust and who help us make decisions. From our experience building Facebook and helping partner companies think about social design. as it is via Facebook Platform. However. Conversation refers to the various interactions we have with our communities. Conversation and Community. allowing them to effectively listen and learn from each other. Building Conversations Build tools and experiences that give people the power to connect and share. Then follow the set of key guidelines below and utilize the tools that Facebook Platform provides to help you build a great social experience. Help them learn more about themselves and curate their identity. Curating Identity Users share and interact with others because self expression feels good and rewarding. Create these social experiences with the features available on Facebook Platform. etc. 1. if community is already curated.

Start by implementing Facebook Authentication which enables a user to authorize your app to access profile information. and much more. always show real names and profile pictures. relevant and trusted by default. . use profile information and connections to enhance the user experience. and users of Facebook expect this. so using that information effectively can drastically enhance their experience. instead of making them search and add friends manually. Context helps make the experience more authentic and personal. for example. for example. Surface users' interests and their friends in your app to create personalized user experiences. allowing them to see friends' playlists. Guidelines Utilizing Community Building Conversation Curating Identity Connect Friends Users feel comfortable and engaged knowing their friends are already actively participating in your app. offering users personalized and valuable information. automatically connect them to the friends who are already there. Facebook uses a variety of methods to show context about a person. for example. interests. Seeing a comment from “Sam. Both Rotten Tomatoes and Airbnb. Not only is this easier for the user. Social apps are about real identity. activities. When users join. displays profile information about the people writing the comments. school and/or location. a designer in New York City. use the same interface. You can ask for specific pieces of data about the user by requesting permissions relevant to your app.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. mutual friends). but it provides your app with social data at the start that helps engage the user. If users grant the required set of permissions. where the user is from or where they work. If you show content from non-friends. but also provide other contextual information such as mutual friends.g. you can utilize the Graph API to access users' likes. favorite songs and listening history. both inline and in hover cards. an additional panel automatically displays their friends. their relationship to the viewer (e.” Use the Graph API to access information about the user such as their workplace. 3 friends in common” is more valuable and useful than just seeing “Sam. provided you clearly communicate how you are using it. Suggest Relevant Content Utilize Facebook profile data in your app. We've found it best to only show faces when they are of friends. such as mutual friends. When users connect their Spotify accounts to Facebook.. their hometown. so as not to dilute their value in the interface. Users have spent a lot of time curating their Facebook profiles. The Comments Plugin. In addition you can also access their friends' likes to suggest content they may be interested in. Show Social Context Whenever you display information from other users. movies and more to recommend content in your app. You can use the Graph API to easily access users' friends.

Be Transparent and Give Users Control Be straightforward with the data you are utilizing from the user’s Facebook profile and why you are using it. Only ask for the permissions you actually need.Associating content to people that users care about naturally draws them in. « Previously: Social Design Overview Kirim 1. is clear on how they utilize data from Facebook to enhance a user's experience on the site. the more you ask for. the less likely users will grant them. for example. Airbnb. Users may join your app and automatically trust their friends. Even something as simple as the Facepile plugin .which shows users the friends already using your app before they sign in . but the first hurdle is trusting your app when first prompted with the permissions dialog. Users should never feel as though something personal of theirs is being taken without permission or utilized in ways they don’t understand. Ensure that users of your app have control over the data they give you and the data your app creates from this information.can increase signups and positive feelings about the experience.152 orang Next: Building Conversation » Report Documentation Bug Diperbarui sekitar 2 bulan yang lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi .

Our social plugins . 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. For Rdio. People have to engage in the first place. "Speaking" : Making it easy for users to talk.are simple ways to allow a user to easily see their friends' activity on your site. Build experiences that give people the power to connect and share. For Sporting News. When users proactively engage with one another. When you can use information from the Facebook social graph to highlight content from friends. grows exponentially. this can be even more powerful. because they trust their friends. The Like Button lets people express what they like on their profile and with their friends on Facebook. If people are sharing with people they trust. Many sites like EventBrite or TripAdvisor rely on reviews from people to help with decision-making. they are likely to share more often and be more open and honest. when paired with the Like Button. more importantly. share. A number of websites are already using these social plugins to showcase the actions that users take on their site. and will do so when they have the right motivation. for example. they are more likely to care about the content. Use Requests on Facebook to inform users of activity in your app that is specifically relevant to them and requires their input.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. it's a great way to discover new music. Speaking and Sharing The other half of the conversation is speaking and sharing.specifically the Activity Feed and Recommendations plugin . no one will know if anyone is speaking to them directly. social context and user activity 2. Because other users see what friends like and. An effective conversation is based in two experiences: 1. "Listening" : Displaying personalized content. 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. it's a great way to see the articles most popular amongst friends. Without these. give feedback and engage Listening and speaking create a positive feedback loop that. if done right. conversation is more effective and personal. On Clicker. users can see the shows that their friends have watched along with recommendations based on friend activity. Provide Notifications Create directed conversation through notifications.

Share Outside Too The relationship your app has with your users not only happens inside your app but also outside. more fun and useful a sharing interface can be. Placing the Like Button on your website is a simple and effective way to get users to engage and start sharing.Focus the Conversation Rather than build tools for conversation around anything. 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. for example. In aggregate and over time. these simple interactions can provide a more complex and meaningful data set around which you can build conversation. 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. In Spotify. . the more likely a user will contribute. Because of this. it's advantageous to decide the core theme of your app and build tools to focus conversation around that. for every piece of content can be its own conversation topic. it becomes more personal. Reduce Sharing Friction Simple actions taken by users can initiate conversations. 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. Posting stories back to a user's Facebook profile. For example. The easier. users can send songs to specific friends or post to their own walls and share with everyone. you might want users to specifically share: Recipes Photos of dishes they’ve made Favorite ingredients Cooking techniques Great social apps get users to engage in interesting ways about things they care about. Think carefully about your sharing interfaces and make them as simple as possible. All of the activity in the plugin will be surfaced to users’ friends through various social channels on Facebook. The Send Button similarly allows users to share with a smaller set of friends. Encourage Sharing When conversation is directed. 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. users should be able to interact with nearly every piece of content in your app. This is an effective way to involve friends in the sharing experience. prompting them to interact more. You can use the Graph API to enable users to tag friends in photos or posts which enables sharing directly with them. if you were creating a social cooking app. Apps can use any number of these quick actions to involve users. It's also important that you be transparent on setting appropriate user expectations around the timing and content of the post. for example. This builds an effective listening experience that prompts more conversation.

Enable users to post to Facebook using the Feed Dialog. « 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 . 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.

structured interface. because they learn more about themselves and enjoy feeling known by their community. they should be able to keep a record of this activity. it's not the full picture. Although displaying a history of user activity and posts to their wall helps. Use the Graph API to let users upload photos and videos from your app to share on Facebook. The key principles below demonstrate how to add elements of the community and conversations with them to a user's profile in your app. photos and other content. Tell Stories People want to share experiences they have everywhere . a profile could consist of: A shareable and organized list of recipes users have created A shareable photo album of all the dishes they’ve created A space to house a list of their favorite ingredients with their own descriptions and reviews Shared articles on cooking they’ve found interesting or useful Don’t just think of features common to all social apps. Use the Like button with Open Graph tags to enable users to share likes and interests from your app. Last. think of what will be special to your app only. By allowing users to like objects in your app. Explore what people can do with your app that they can’t do anywhere else. Be Context-Relevant While Facebook serves as a representative profile. Make the user's profile relevant to this context and focus on this aspect of the user's identity. Curate Content Users should feel that the content they contribute is theirs and that you provide them a place to house it. If you’re asking users to contribute thoughts. Guidelines Utilizing Community Building Conversation Curating Identity For example.fm compiles your listening history and favorite songs into an easy-to-read interface as well. . Your app should use their input to organize content intelligently for them. in the social cooking app. Part of what builds identity is the storytelling of these experiences. those experiences are integrated into their Facebook profile and shared with friends. your app should focus on a particular vertical or domain. People share and interact with communities because they want to. Facebook organizes a user's interests into a clean. Building a profile that represents a user's identity provides self motivation and personal value to users.not just on Facebook.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. Creating and curating an identity within an app is a basic principle that leads to a stronger emotional connection with that app over time.

Spotify informs users of their top tracks and top artists. In a social movies app. For example. « 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 .Highlight Interesting Information Part of what makes building a useful profile is not simply presenting the data. you may want to highlight what ingredients a user uses most of the time. In a social cooking app. you may highlight the user's most-viewed actors or genres. but additionally analyzing it to tell users something they don't know about themselves.

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. Facepile The Facepile plugin displays the Facebook profile pictures of users who have liked your page or have signed up for your site. Activity Feed The Activity Feed plugin shows users what their friends are doing on your site through likes and comments. Live Stream .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. Like Box The Like Box enables users to like your Facebook Page and view its stream directly from your website. Comments The Comments plugin lets users comment on any piece of content on your site. 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. Registration The registration plugin allows users to easily sign up for your website with their Facebook account. Send Button The Send button allows your users to easily send your content to their friends. 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. 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.

Kirim 856.937 orang Report Documentation Bug Diperbarui hari Jumat yang lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi .Live Stream The Live Stream plugin lets your users share activity and comments in real-time as they interact during a live event.

Step 1 . If you include Open Graph tags on your Web page. use the Open Graph protocol to specify information about the entity. Minimum width: 90 pixels.there are three options.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. your page becomes equivalent to a Facebook page.specifies whether to include a Send button with the Like button. This means when a user clicks a Like button on your page. just use the configurator below to get code to add to your site. and you have the ability to publish updates to the user. send . layout . and restaurants. Minimum increases by 40px if action is 'recommend' by and increases by 60px if send is 'true'. but requires use of the JavaScript SDK. There are two Like button implementations: XFBML and Iframe. . and you can target ads to people who like your content.displays the total number of likes to the right of the button. celebrities. Your page will show up in same places that Facebook pages show up around the site (e. 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. Default width: 450 pixels. and it always gives the user the ability to add an optional comment to the like. Your page will appear in the "Likes and Interests" section of the user's profile. Minimum width: 225 pixels. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display. things like movies. Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button To get started. a connection is made between your page and the user.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 your Web page represents a real-world entity. The XFBML (also available in HTML5-compliant markup) version is more versatile. a story appears in the user's friends' News Feed with a link back to your website. If users do add a comment. When the user clicks the Like button on your site. sports teams.Get Like Button Code URL to Like (?) Kirim 70.g. search). This only works with the XFBML version. button_count . Height: 35 pixels (without photos) or 80 pixels (with photos).displays social text to the right of the button and friends' profile photos below. The XFBML version defaults to the current page. the story published back to Facebook is given more prominence. standard .

the Like button posts a link to the og:url instead of the URL in the Like button code.specifies whether to display profile photos below the button (standard layout only) width . More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocol documentation . og:url . 'tahoma'.g.a label for tracking referrals. 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 . 'search'. og:image . Minimum width: 55 pixels. e. restaurant. 'recommend' font .The URL to an image that represents the entity.the stream type ('home'.A human-readable name for your site. the following six are required: og:title . box_count . An Open Graph tag looks like this: <meta property="og:tag name" content="tag value"/> If you use Open Graph tags. Options: 'light'.Default width: 90 pixels.the font to display in the button.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.The canonical. 'profile'.the width of the Like button.the verb to display on the button. Height: 20 pixels. must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.The title of the entity. concatenated with an underscore. At a minimum. action . show_faces .the ref parameter fb_source .. Step 2 . or something else. 'other') in which the click occurred and the story type ('oneline' or 'multiline'). whether it is a band. Height: 65 pixels. 'lucida grande'. permanent URL of the page representing the entity. 'trebuchet ms'. fb:admins or fb:app_id . Options: 'like'. You must select a type from the list of Open Graph types.displays the total number of likes above the button. 'verdana' colorscheme . 'dark' ref .the color scheme for the like button. . "IMDb". og:site_name . When you use Open Graph tags.The type of entity. but you are allowed to use images up to three times as wide as they are tall. 'segoe ui'.A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. Images must be at least 50 pixels by 50 pixels. include only your own Facebook ID. Options: 'arial'. Square images work best. og:type .:_). Default width: 55 pixels. blog.

&ref=top_left"></iframe> When a user clicks a link back to your website. users will always have the option to add a comment.com/externalhit_uatext. What analytics are available about the Like button? If you visit facebook. If users do add a comment. you can see the number of likes on your domain each day and the demographics of who is clicking the Like button.it will look at "Expires" and "Cache-Control" in order of preference.create' event through FB. even if you specify a longer time.subscribe." You may need to adjust the width of the Like button to accommodate different languages.. Simply specify the URL of your Facebook page in the href parameter of the button. 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.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. Examples: <fb:like ref="top_left"></fb:like> <iframe src=".Event.com/l.. If you are using the Iframe version of the button. Can I link the Like button to my Facebook page? Yes. When does Facebook scrape my page? Facebook needs to scrape your page to know how to display it around the site. we will pass back both the ref value as a fb_ref parameter and the fb_source parameter in the referrer URL.FAQ How do I know when a user clicks a Like button? If you are using the XFBML version of the button. concatenated with commas.facebook. 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).1 (+http://www. users will have the option to comments if you are using the 'standard' layout with a width of at least 400 pixels. The user agent of the scraper is: "facebookexternalhit/1.. Example: src="http://www. you can subscribe to the 'edge. Facebook will scrape your page every 24 hours. 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 .php?locale=fr_FR&. the story published back to Facebook is given more prominence. However.facebook.net/en_US/all.facebook.com/plugins/like.facebook.php?fb_ref=top_left&fb_source=profile_oneline Aggregated stream stories contain all ref parameters. Facebook scrapes your page every 24 hours to ensure the properties are up to date.js'. Facebook observes cache headers on your URLs .. Example: http://www.com/insights and register your domain. When will users have the option to add a comment to the like? If you are using the XFBML version of the Like button. If you are using the Iframe version include a locale parameter with the proper country code in the src URL. Replace ‘en_US’ in this line with the correct locale code: '//connect.

When I click the Like button. the Share button documentation is still available here. What happened to the old Share button? We deprecated the Share Button when we launched the Like button. the flyout may be clipped or completely hidden when the button is clicked. or auto. Why? If the Like button is placed near the edge of an HTML element with the overflow property set to hidden. This can be remedied by setting setting the overflow property to a value other than hidden.The number of inbox messages containing this URL as an attachment. For reference. and by allowing them to see which of their friends have already connected. because the Like button improves clickthrough rates by allowing users to connect with one click. scroll. such as visible. Kirim Ioyy Ranjauu Report Documentation Bug Diperbarui 2 minggu yang lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi . the popup window (or "flyout") doesn't show.

How do I display the Send button in different languages? Include the language code when you instantiate the library.the URL to send. Find the documentation on the Like button page.the font to display in the button.js'. must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-. but if you also want a Like button on your site. Options: 'light'.send' event through FB. Get a combined Like and Send button You can implement the send button on its own. and short description of the link. and description by using Open Graph meta tags. Replace ‘en_US’ in this line with the correct locale code: '//connect.Event. Get a Send button URL to Send (?) example. 'lucida grande'. along with a title. image. 'group'. Options: 'arial'.the ref parameter fb_source .subscribe. 'trebuchet ms'. The Send button requires the JavaScript SDK. 'dark' ref . 'tahoma'.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. 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). What analytics are available about the Send button? . 'verdana' colorscheme . and as an email to any email address. image.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 . to the group wall of one of their Facebook groups. 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 . 'segoe ui'. 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.net/en_US/all. You can specify what is shown for the title. 'email') in which the click occurred. the Send Button allows them to send a private message to just a few friends.:_). 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. font .the color scheme for the button.a label for tracking referrals.facebook. While the Like Button allows users to share content with all of their friends.the story type ('message'. The message will include a link to the URL specified in the send button.

the flyout may be clipped or completely hidden when the button is clicked. Example: http://www. we will pass the ref value as a fb_ref parameter in the referrer URL. or auto.If you visit facebook. Examples: <fb:send ref="top_left"></fb:send> <iframe src=". This can be remedied by setting setting the overflow property to a value other than hidden. 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). you can see the number of sends from your domain each day and the demographics of who is clicking the Send button. such as visible. 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. concatenated with commas. When I click the Send button..yoursite. Report Documentation Bug Diperbarui sekitar 3 bulan yang lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi .com/home?fb_ref=top_left&fb_source=message Aggregated stream stories contain all ref parameters. scroll.com/insights and register your domain.&ref=top_left"></iframe> When a user clicks a link back to your website.

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. Kirim 1.displays the total number of subscribers to the right of the button. 'trebuchet ms'. Vevi Noviati Larosa dan 10. button_count . 'lucida grande'. Height: 20 pixels. Height: 65 pixels.facebook. 'tahoma'. Default width: 55 pixels.displays the total number of subscribers above the button.the font to display in the plugin. Minimum width: 55 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos). Get Your Subscribe Button Code Profile URL (?) Berlangganan Trisna Wanto.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.the color scheme for the plugin. The XFBML (also available in HTML5-compliant markup) version is more versatile.com profile URL. Minimum width: 225 pixels.350 orang Report Documentation Bug Diperbarui hari Kamis lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi .350.there are three options. Plugins Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button https://www. Options: 'light' (default) and 'dark' font . box_count . Minimum width: 90 pixels.displays social text to the right of the button and friends' profile photos below. Options: 'arial'. 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. standard . Default width: 450 pixels. To get started. 'segoe ui'. just use the configurator below to get code to add to your site.the width of the plugin. There are two Subscribe button implementations: XFBML and Iframe. 'verdana' width . Default width: 90 pixels. This must be a facebook.012 lainnya berlangganan. show_faces .specifies whether to display profile photos below the button (standard layout only) colorscheme . and requires use of the JavaScript SDK. layout .

Features include moderation tools and distribution. Comments are ordered to show users the most relevant comments from friends.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. while comments marked as spam are hidden from view. friends of friends. 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. a story appears on her friends’ News Feed indicating that she’s made a comment on your website. and the most liked or active discussion threads. 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. 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) . Threads stay synced across Facebook and on the Comments Box on your site regardless of where the comment was made. Social Relevance: Comments Box uses social signals to surface the highest quality comments for each user. which will also link back to your site.

Now i know where to watch movies from now on :P Balas · 165 · Suka · 25 Oktober pukul 13:40 Emma Tyler · San Diego. you can have a look : http://freemovierepublic. Balas · 459 · Suka · Ikuti Kiriman · 25 Oktober pukul 13:30 Sonorita Lopez · Universitas Negeri California.225 lainnya 55 · Suka · 17 Oktober pukul 3:35 Attributes href . Me encantan las colombianas Balas · 53 · Suka · 16 Oktober pukul 6:34 Julio René Cruz Caal · Profesor di MINEDUC Aaaaa mi. California ooooooooohhh Yeeeaaaaahhhhhhhhh !!!!!!! Balas · Lihat 187 lainnya Mujeres Bellas · Berlangganan · Bekerja di ¡¡Consigue Tráfico Web Perpetuo!! Entrenamiento Gratuito · 18. Minimum recommended width: 400px..the URL for this Comments plugin. i just looked at FREEMOVIEREPUBLIC.. I implemented facebook comments on my site.the width of the plugin in pixels. Balas · 179 · Suka · 25 Oktober pukul 13:37 Cynthia Kramer cool site you got there..... its a site to watch movies online for free. width .COM good implementation there. Long Beach nice one. News feed stories on Facebook will link to this URL. Balas · Lihat 188 lainnya Lihat 29.URL to comment on (?) http://example.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.com btw.com(masuk menggunakan Hotmail) hey guys...com Number of posts (?) 2 Width (?) 500 Color Scheme (?) light Get Code 29. ..227 komentar Tambahkan komentar davis6852@hotmail.

com. What does the grammar filter do? Adds punctuation (e. you should use two or more app_ids. Default: false. How do I know when someone comments on my site? You can subscribe to the 'comment. plz becomes please) Adds a space after punctuation (e.create' and 'comment. For example.com/?ids=http://example.Cat would become Hi.com/tools/comments.g. 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.facebook. changing the moderation setting to 'has limited visibility' will affect all comments boxes under the same app_id. For example.php?href=example.com/. You can also use the comment FQL table. You may then apply different moderation settings each group of comments boxes.com&permalink=1 The number of comments left on a particular URL can be accessed via the Graph API.facebook.g. <fb:comments-count href=http://example. you need to list yourself as an admin. If your site has many comments boxes. To moderate. you can moderate all your plugins at http://developers.facebook. the number of comments on example. For example. Cat) .subscribe. periods at the end of sentences) Trims extra whitespace Expands slang words (e. to show the number of comments on example.com is the 'comments' field of: https://graph.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.the color scheme for the plugin.Event. <meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/> You can moderate comments from just this plugin inline. You can then style this however appropriate to match your site. If you have specified your app id as the admin.com:. Options: 'light'. Admins can also blacklist words and ban users.colorscheme . 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. Minimum: 1 mobile . the moderation settings you choose will apply to all your comments boxes. Hi.the number of comments to show by default.g. When you implement multiple comments boxes on your site and tie them together using an app_id. separate the uids by comma without spaces.(beta) whether to show mobile version. to help mitigate irrelevant content. To do this.. this comment will automatically have limited visibility.com/plugins/comments. Include: <meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/> To add multiple moderators. Default: 10. the comment is only visible to the commenter and their friends). For example. <iframe src="http://www.e. simply include open graph meta tags on the URL specified as the href parameter of the plugin. 'dark' num_posts . If you need to apply different moderation paradigms in different areas of your site. this shows the number of comments for example. If a new comment is published from a banned user or contains a blacklisted word.remove' events through FB. 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.

you should not specify the href parameter. convert ‘dont' to ‘don’t’) You can enable the grammar filter from the settings section of the plugin. How do I enable users to comment using other login providers? On the settings section of the plugin. and you must keep the XID parameter the same. 'hat'. I have the first version of the Facebook Comments box. the comments on this URL can be accessed via: https://graph.g.facebook. For example. how do I upgrade? If you are using the original version of the Facebook Comments box. if the comment contained the words 'bat'. as pulling the comments from the graph API on each page load could slow down the rendering time of the page. Note that the moderation tools only work with the newer version of the comments plugin. e.com/docs/reference/plugins/comments. 'attend'.com/comments/? ids={YOUR_URL}. In this case. The content of new comments is checked against the blacklist of terms to see if this comment should have limited visibility. How do I access the comments left on my site? The comments for every URL can be accessed via the graph API. etc it would be caught. and the comments box will automatically switch to the new version. you can access the comments as described above.193 orang Report Documentation Bug Diperbarui hari Kamis lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi . Sample code for pulling comments can be found on this blog post. We recommend you cache the results. just add 'migrated=1' to the <fb:comments> tag.Fix common grammar mistakes (e. Kirim 36. and most search engines will not crawl content within an iframe. Simply grab the comments from the API and render them in the body of your page behind the comments box. This means if you blacklist the word 'at'. if the comment contains the sequence 'a' 't' anywhere it will be marked with limited visibility. Simply go to: https://graph. However. Currently this will enable users to comment using a Yahoo!. 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.com/comments/? ids=http://developers.g. The comment is checked via substring matching. How does the blacklisting words work? You can enter blacklisted terms from the settings section of the comments box. you can choose to enable third party login on your comments boxes.facebook.facebook. Once you migrate. AOL or Hotmail account. you can access all the comments left on your site via the graph API as described above.

Domain (?) Aktivitas Terbaru Sandi Febriyanto dan Teguh Mafandi berbagi Like Box. 'dark' .com would not include activity from developers. width . · sekitar 4 bulan yang lalu Width (?) 300 Introducing the Subscribe Button for Websites 2. when users share content from your site in Facebook or if they comment on a page on your site in the Comments box.specifies whether to show the Facebook header. Since the content is hosted by Facebook. the plugin will be personalized to highlight content from their friends. Height (?) 300 Breaking Change: JavaScript SDK to oauth:true on December 13th 355 orang menyarankan ini. You can specify multiple domains and the results will be mixed together. Options: 'light'. showing friends activity in the top half. you can use the <fb:activity> XFBML tag (or <div class="fb-activity"> if you prefer HTML5 markup).the color scheme for the plugin.com or www. Default height: 300px. The XFBML version defaults to the current domain. or if you are using the new JavaScript SDK. so a plugin with site=facebook. colorscheme . it is backfilled with recommendations.com.035 orang menyarankan ini. the activity feed will show recommendations from across your site.a comma separated list of domains to show activity for. it will include more recommendations.the height of the plugin in pixels. Default width: 300px. The activity feed displays stories when users like content on your site. and recommendations in the bottom half. the plugin is split in half. height . Removing App Profile Pages 710 orang menyarankan ini.facebook. header . 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.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. 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 .facebook. If there isn't enough friend activity to fill the plugin. If the user is logged out. and give the user the option to log in to Facebook. The domain is matched exactly. You must specify a domain to show activity for. If a user is logged into Facebook. the plugin can display personalized content whether or not the user has logged into your site. The plugin is filled with activity from the user's friends. If you set the recommendations param to true. If there is not enough friends activity to fill half of the plugin.the width of the plugin in pixels.

recommendations . The filter parameter does not apply to any recommendations which may appear in this plugin (see above). if you specify '7' the plugin will only show URLs which were created in the past week. If recommendations is set to true.com/section1/section2/*' would be included in the activity feed section of this plugin. Options: 'arial'.the font to display in the plugin. If you want the content links to open in the same window. 'trebuchet ms'. you can set this parameter to _top or _parent. 'segoe ui'. Recommendations are based only on 'site' parameter. By default all links within the plugin will open a new window.facebook. if the 'site' parameter is set to 'www. max_age . If nothing in the first two path parameters of the URL matches the filter. the URL will not be included. 'lucida grande'.com' and the 'filter' parameter was set to '/section1/section2' then only pages which matched 'http://www.the maximum age of a URL to show in the plugin. 'verdana' border_color . 'tahoma'.example.com/l. which specifies the number of days. Example: http://www. The plugin will only include URLs which contain the filter string in the first two path parameters of the URL. ref . For example.&ref=homepage"></iframe> When a user clicks a link on the plugin.allows you to filter which URLs are shown in the plugin.This specifies the context in which content links are opened. linktarget ...the border color of the plugin. The default is 0 (we don’t take age into account). the plugin will display recommendations in the bottom half. Links to Facebook URLs will always open in a new window.font . filter . must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). Examples: <fb:activity ref="homepage"></fb:activity> <iframe src=".specifies whether to always show recommendations in the plugin. For example. 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. 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.example.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 . 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). Otherwise the valid values are 1-180. we will pass back the ref value as a fb_ref parameter in the referrer URL.a label for tracking referrals.

Teguh Mafandi. The XFBML version defaults to the current domain.the border color of the plugin. 'lucida grande'. 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. Default height: 300px.the height of the plugin in pixels. 'tahoma'.the width of the plugin in pixels.facebook.035 orang menyarankan ini. For a logged in Facebook user. the plugin considers all the social interactions with URLs from your site. To generate the recommendations.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. You must specify a domain for which to show recommendations. ref . 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 .This specifies the context in which content links are opened. Introducing the Subscribe Button for Websites 2. Links to Facebook URLs will always open in a new window. 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.the font to display in the plugin.:_). If you want the content links to open in the same window. 'trebuchet ms'. 'segoe ui'. so a plugin with site=facebook. linktarget . Default width: 300px.com would not include activity from developers. The domain is matched exactly.com or www. Using different values for the ref parameter for . colorscheme . the plugin will give preference to and highlight objects her friends have interacted with. Breaking Change: JavaScript SDK to oauth:true on December 13th 355 orang menyarankan ini. Options: 'light'.facebook. the plugin can display personalized recommendations whether or not the user has logged into your site.the color scheme for the plugin. you can set this parameter to _top or _parent. height . width .a label for tracking referrals. 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. Height (?) 300 Header (?) Show header Color Scheme (?) light Removing App Profile Pages 710 orang menyarankan ini. dan 314. With the SDK you can use the <fb:recommendations> XFBML tag or <div class="fb-recommendations"> if you prefer HTML. must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-. header . Options: 'arial'. Since the content is hosted by Facebook.specifies whether to show the Facebook header. 'verdana' border_color . By default all links within the plugin will open a new window.897 orang lainnya menyarankan ini.com.a comma separated list of domains to show recommendations for. 'dark' font .

if you specify '7' the plugin will only show URLs which were created in the past week. For example.the maximum age of a URL to show in the plugin.different positions and configurations of this plugin within your pages allows you to track which instances are performing the best.&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. which specifies the number of days..com/l. Otherwise the valid values are 1-180. The default is 0 (we don’t take age into account). Examples: <fb:recommendations ref="homepage"></fb:recommendations> <iframe src=". Example: http://www. 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).facebook.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 . max_age ..

border_color . and 10 faces the default height is 556px.for Places. Facebook Page URL (?) http://www.specifies whether or not to display profile photos in the plugin.the height of the plugin in pixels. 'dark' show_faces . The Like Box enables users to: See how many users already like this Page.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.specifies whether to display a stream of the latest posts from the Page's wall header .the width of the plugin in pixels. The default height varies based on number of faces to display. Options: 'light'. height . Default width: 300px.specifies whether to display the Facebook header at the top of the plugin.the color scheme for the plugin. stream . Muhammad Umar Muhammad Ahmad Rado Danang Sandi Scouter Jos Sandi Ahrn Plugin sosial Facebook Attributes href . and whether the stream is displayed. force_wall .621. With the stream displayed.facebook. and no stream the default height is 63px.create' event through .354 orang menyukai Facebook Platform. Default value: true. without needing to visit the Page The minimum supported plugin width is 292px. specifies whether the stream contains posts from the Place's wall or just checkins from friends.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. With no faces.the border color of the plugin. colorscheme . you can subscribe to the 'edge. How do I know when a user clicks a Like button? If you are using the XFBML version of the button.the URL of the Facebook Page for this Like Box width . and which of their friends like it too Read recent posts from the Page Like the Page with one click. Default value: false.

If your application needs to access other parts of the user's profile that may be private. max-rows . Using the new JavaScript SDK. if you specify a maximum of four rows of faces.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. scope .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 . width . for example. no login button is shown. Note: If the user is already logged in. Default width: 200px.the width of the plugin in pixels. the plugin is available via the <fb:login-button> XFBML tag or the <div class="fb- login-button"> HTML tag. The plugin dynamically sizes its height. A complete list of extended permissions can be found here. You can specify the maximum number of rows of faces to display. Kirim 22. Default value: 1. the height of the plugin will be only what is needed for two rows of faces. and there are only enough friends to fill two rows. 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 .the maximum number of rows of profile pictures to display.specifies whether to show faces underneath the Login button. By default the Login button prompts users for their public information. Masuk Erik Pratama menggunakan Developer Site. your application can request extended permissions.a comma separated list of extended permissions.

com%2Ftools%2Fecho%2F& fields=name. The plugin is a simple iframe that you can drop into your page.php? client_id=113869198637480& redirect_uri=https%3A%2F%2Fdevelopers. Optional. (boolean) Allow users to register for Facebook during the registration process.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 registration plugin gives you the flexibility to ask for additional information which is not available through the Facebook API (e. Pelajari selengkapnya <iframe src="https://www.facebook. formulir pendaftaran di bawah telah diisi sebelumnya menggunakan profil Facebook Anda. Default: false.location. This eliminates the need to provide two separate login experiences. The plugin also allows users who do not have a Facebook account. Tak ada yang diungkapkan kepada Developer Site sampai Anda mengklik Daftar. fb_register . Use this if you do not have your own registration system.g. It must be prefixed by your Site URL. favorite movie). Nusa Tenggara Barat.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. Ketentuan Layanan · Kebijakan Privasi · Mengklik Daftar juga akan memberi Developer Site akses ke daftar teman Facebook Anda dan informasi publik lainnya.com/plugins/registration. Default: false.com Nama dan Informasi Publik: Ramdhan Hidayat 832 teman Untuk menghemat waktu. or JSON of Custom Fields. Comma separated list of Named Fields. Example Plugins Registration Registration Advanced Uses User Registration Flows Tanggal Lahir: 15 1986 Jenis Kelamin: Lokasi Sekarang: Alamat Email: Laki-laki Lombok.birthday. Use this if you do not have your own registration system.facebook. Indon madoen_punkeh@yahoo. Beta Plugins Mei Mendaftar 1 teman telah mendaftar. Optional. or do not wish to sign up for your site using Facebook to use the same form as those who are connecting with Facebook.gender. When logged into Facebook. users see a form that is pre-filled with their Facebook information where appropriate. (boolean) Only allow users to register by linking their Facebook profile.

Useful with view= not_prefilled. 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. 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. _parent.width border_color target Optional. If the width is < 520 the plugin will render in a small layout. The name field must always be the first field. Named Fields Specify these in the order you want them to appear in the form. Custom Fields You may also request data from users that isn't present on Facebook. The target of the form submission: _top (default). Optional. you can use a JSON string in the fields attribute instead of the CSV. The last name of the user. To do this. For example: . The border color of the plugin. or _self. Optional. (int) The width of the iframe in pixels.

date. typeahead. Ketentuan Layanan · Kebijakan Privasi · Mengklik Daftar juga akan memberi Developer Site akses ke daftar teman Facebook Anda dan informasi publik lainnya. {'name':'anniversary'. formulir pendaftaran di bawah telah diisi sebelumnya menggunakan profil Facebook Anda. {'name':'captain'. Tak ada yang diungkapkan kepada Developer Site sampai Anda mengklik Daftar. 'description':'Phone Number'. 'description':'Which side?'. prefilled means the user is registering using her Facebook account.Untuk menghemat waktu. not_prefilled means the user is not registering with her Facebook account. select. checkbox.com Lombok. This parameter is useful if. 'type':'select'. 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. {'name':'like'. {'name':'phone'. {'name':'birthday'}.'description':'Anniversary'. fields is a JSON Array of Objects. {'name':'location'}. 'description':'Best Captain'. {'name':'live'. 'type':'typeahead'. Nusa Tenggara Barat. and hidden. Any built in fields only have a name field. 'description':'Best Place to Live'. {'name':'email'}. This will be the name of the attribute when you decode the signed_request. 'type':'select'. Nama dan Informasi Publik: Ramdhan Hidayat 832 teman Alamat Email: Lokasi Sekarang: Jenis Kelamin: Tanggal Lahir: madoen_punkeh@yahoo. {'name':'captcha'} ] 'type':'checkbox'. Supported values are text. The field type. you only require a password for users not . 'description':'Do you like this plugin?'. {'name':'force'. 'type':'date'}. There are two views: prefilled and not_prefilled. Custom fields have: Name name Description The name on the HTML <input> element. description type view The label to show the user. When to show this field. Pelajari selengkapnya Which has fields set to [ {'name':'name'}. for example. {'name':'gender'}. 'type':'text'}. {'name':'password'}.

Tak ada yang diungkapkan kepada Developer Site sampai Anda mengklik Daftar. When this event is fired you should login the user to your site. Daftar <fb:login-button registration-url="https://developers. if the user is logged into Facebook and already connected to your application. If the user arrives logged into Facebook.js#appId={YOUR_APP_ID}&xfbml=1"></ <fb:registration fields="name. the button will say Register and clicking it will take the user to your registration-url. If she has not registered for your site.com Mendaftar 1 teman telah mendaftar.com/docs/plugins/registration" /> If the user arrives at your site logged out of Facebook. Contains the key to select by default instead of showing "Select on" for type:select.birthday. If she has already registered for your site. It will resize the iframe fluidly as its size changes. but has not registered for your site. When the user clicks it. she will be prompted to enter her Facebook username and password. the button will say Login.email" redirect-uri="https://developers. Nama dan Informasi Publik: Tanggal Lahir: 15 1986 Jenis Kelamin: Lokasi Sekarang: Alamat Email: Ramdhan Hidayat 832 teman Mei Laki-laki Lombok. For type:select and type:checkbox. Indon madoen_punkeh@yahoo. Some attributes only apply to fields of a certain type: Name options categories default Description For type:select. Nusa Tenggara Barat. Ketentuan Layanan · Kebijakan Privasi · Mengklik Daftar juga akan memberi Developer Site akses ke daftar teman Facebook Anda dan informasi publik lainnya. and a no_submit feature if you don't want to pass fields through Facebook. async validation.net/en_US/all. Contains the word checked to make a type:checkbox checked by default. Pelajari selengkapnya <div id="fb-root"></div> <script src="https://connect.facebook. For type:typeahead.location. Untuk menghemat waktu.com/tools/echo/" width="530"> </fb:registration> Login + Registration Flows When prompting your users to login or register. XFBML There is also an XFBML tag for use with the Javascript SDK. 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 . An array of Open Graph protocol types that are valid for this field. she will be redirected to the URL you specify in the registration-url parameter. Default: Display this field in both views.facebook. Lastly. formulir pendaftaran di bawah telah diisi sebelumnya menggunakan profil Facebook Anda. There are advanced features if you are asking for custom fields.registering using their Facebook account.gender. including custom client side validation. the button will fire an onlogin() Javascript event. there is an XFBML button that you will probably find useful.facebook. An object of "submit value" to "user description ".

.\n {'name':'location'}. "registration_metadata": { "fields": "[\n {'name':'name'}. If the user chooses to register without using her Facebook account. "force": "jedi".com". "email": "fb@paulisageek. "live": { "name": "Denver. "birthday": "12/16/1985". Read more about signed requests on the canvas authentication documentation. "anniversary": "2/14/1998". and expires parameters will not be included in the signed request. 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. If someone were to make a change to the data. Colorado". "registration": { "name": "Paul Tarjan". The signed request includes a registration_metadata field. See our best practices and diagrams of how all of this fits together. California". 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 . "issued_at": 1291836800. "user_id": "218471" } This format is designed to very closely resemble the output of the Graph API. The result of decoding the signed_request will be a JSON Object with the following format: { "oauth_token": ".\n {'name':'email'}.. the signature would no longer validate as they wouldn't know your application secret to also update the signature. "like": true. An example of the importance of checking this field is on the advanced page. "id": 114952118516947 }.. It is signed using your application secret which is only known by you and Facebook. for an overview of how to structure your application.\n {'n }. "algorithm": "HMAC-SHA256"..". the oauth_token. 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. "expires": 1291840400. "phone": "555-123-4567". "location": { "name": "San Francisco. "id": 115590505119035 } }. "gender": "male".big long string. user_id. "captain": "K".the button).

function parse_signed_request($signed_request. '-_'. '+/')). echo '</pre>'. FACEBOOK_SECRET). } function base64_url_decode($input) { return base64_decode(strtr($input. $secret. 'your_app_id'). } return $data.'. } if ($_REQUEST) { echo '<p>signed_request contents:</p>'. print_r($response). $data = json_decode(base64_url_decode($payload). } else { echo '$_REQUEST is empty'. } // check sig $expected_sig = hash_hmac('sha256'. $secret) { list($encoded_sig. define('FACEBOOK_SECRET'.<?php define('FACEBOOK_APP_ID'. Expected HMAC-SHA256'). return null. if ($sig !== $expected_sig) { error_log('Bad Signed JSON signature!'). if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') { error_log('Unknown algorithm. $signed_request. // decode the data $sig = base64_url_decode($encoded_sig). return null. $response = parse_signed_request($_REQUEST['signed_request']. echo '<pre>'. true). $payload) = explode('. 'your_app_secret'). } ?> Kirim 3.806 orang Report Documentation Bug Diperbarui sekitar 4 bulan yang lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi . $payload. $raw = true). 2).

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 . If you are using the iframe version simply include it as another query parameter. and none of the users friends have connected yet. If you are displaying users who have liked your page. size . specify your application id as this parameter. if you specify a maximum of four rows of faces. If you want the plugin to display users who have liked your page. If you are displaying users who have connected to your site. If the user does not have friends who have liked your page or have connected to your site. app_id . width . Example: . Default width: 200px. The plugin is available either via a simple iframe you can drop into your page.width of the plugin in pixels. Options: 'light'. specify your application id when you initialize the Javascript library. If some users have liked your page. If you are using the XFBML version of the plugin. the XFBML version of the plugin will set its height for two rows of faces. max_rows . Default: 1.the color scheme for the like button. If you want the plugin to display users who have signed up for your site. The XFBML version will dynamically size its height. URL (?) http://example. and no users have liked it yet. you can use the <fb:facepile> XFBML tag (or <div class="fb-facepile"> if you prefer HTML5 markup). the plugin will render nothing. Default size: small. How to show users who have connected to your site You need to specify your application id. the plugin will display the total number of users who have liked your page. The plugin will display photos of users who have liked this page. colorscheme . specify the URL of your page as the href parameter.the URL of the page.size of the photos and social context. This parameter is only available in the iframe version of the Facepile.if you want the plugin to display users who have connected to your site. but there are only enough friends to fill two rows. Why is nothing displaying? The plugin only displays friends photos.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. the plugin will render nothing. specify your application id as the app_id parameter. 'dark'. but none of the viewing users friends have liked it.the maximum number of rows of faces to display. or if you are using the new JavaScript SDK. no faces will be shown.

Example: <div id="fb-root"></div><script src="http://connect." allowTransparency="true"></iframe> If you are using the XFBML version specify your application id when you initialize the Javascript library.com/plugins/facepile. width:200px.<iframe src="http://www.xfbml=1"></script><fb:facepile></fb:facepile> Kirim 13.facebook.100 orang Report Documentation Bug Diperbarui sekitar seminggu yang lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi .net/en_US/all.js #appId={YOUR_APP_ID}&amp.php? app_id={YOUR_APP_ID}" scrolling="no" frameborder="0" style="border:none.facebook. overflow:hidden.

like live streaming video for concerts. massively multiplayer games. live Web chats.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. The minimum supported plugin width is 400px. or webcasts. webinars. 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 . Live Stream works best when you are running a real-time event. speeches.

This means when a user clicks a Like button on your page. See the complete list of supported types. sports teams.org/1999/xhtml" xmlns:og="http://ogp. a connection is made between your page and the user. This is the current production version of the Open Graph and will work with the Like Button and other social plugins.com/title/tt0117500/"/> <meta property="og:image" content="http://ia..g. You can view the Open Graph Beta documentation here. Here's an example for a movie page: <html xmlns="http://www. og:image . It is currently in beta. Including Open Graph tags on your Web page.imdb. and you can target ads to people who like your content...media-imdb.. and you have the ability to publish updates to the user. The structured data you provide via the Open Graph Protocol defines how your page will be represented on Facebook. e.An image URL which should represent your object within the graph.g. </head> .The title of your object as it should appear within the graph. It is currently designed for Web pages representing profiles of real-world things — things like movies. The tags allow you to specify structured information about your web pages. Getting Started To turn your web pages into graph objects. The image must be at least 50px . </html> The Open Graph protocol defines four required properties: og:title . take over Alcatraz and threaten San Francisco Bay with biological weapons. Your page will appear in the "Likes and Interests" section of the user's profile. under command of a renegade general.g.me/ns#" xmlns:fb="https://www.com/rock. The below documentation refers to the first version of the Open Graph that shipped with the Like Button at f8 2010. e. "movie". og:type .S. Your page will show up in the same places that Facebook pages show up around the site (e. and restaurants. celebrities.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. search). the more opportunities your web pages can be surfaced within Facebook today and in the future. you'll need to add Open Graph protocol <meta> tags and the Like button to your webpages.w3. The more information you provide. The Open Graph Protocol enables you to integrate your Web pages into the social graph. makes your page equivalent to a Facebook Page..jpg"/> <meta property="og:site_name" content="IMDb"/> <meta property="fb:admins" content="USER_ID"/> <meta property="og:description" content="A group of U. Marines.facebook.The type of your object."/> .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. "The Rock"..

For some objects.org has many community tools for consuming its protocol.The canonical URL of your object that will be used as its permanent ID in the graph. e.630 orang menyukai ini. If a user likes your URL using a Like button. Suka You can also add any of a number of social plugins to your site with a line of HTML. og:description . 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. it gives you the closest possible match as to how we will treat your page when we crawl it in production. This is to prevent users being made admins .g. og:image is the image thumbnail. a News Feed story similar to the one below will be published to Facebook. "IMDb".A human-readable name for your site.USER_ID2"/> Each listed user must click Like on the URL to be approved as an admin. Here's a sample Like button for an Open Graph-enabled page: 5. it makes sense to specify additional meta data. e. you need to associate it with either your Facebook account or your Facebook Platform application. The og:title links to og:url and the og:site_name is rendered pointing to your site's domain automatically. Page Administration To administer your page. Jadilah orang pertama di antara teman-teman.A one to two sentence description of your page.imdb. og:url .com/" width="450" height="80"/> Go here to learn about additional Like button options. e. such as location for a restaurant. opengraphprotocol.A Facebook Platform application ID that administers this page. we've extended the basic meta data to add a required field to connect your webpage with Facebook: fb:app_id . you can now add a Like button associated to this page.g. http://www.g. 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. To associate the page with your Facebook account. It's also recommended that you include the following properties as well as these multi-part properties.: <meta property="fb:admins" content="USER_ID1. Therefore. In addition. The Like button can be simply added with an <iframe>. JPEG and GIF formats..by 50px and have a maximum aspect ratio of 3:1. og:type defines which category your link will appear within. 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. You may include multiple og:image tags to associate multiple images with your page. It is valid to associate your page with both user accounts and a Facebook Platform Application. Adding a Like button Once you configure the meta tags on your web page. or you can use the JavaScript SDK for the <fb:like> XFBML tag: <fb:like href="https://developers. og:site_name .com/title/tt0117500/. On a user's profile.facebook.. We support PNG.

There are two ways to get to the publishing interface: From your Web page. you can publish to users via the API with curl -F 'access_token=.myopengraphpage. you can link your pages to your Facebook Platform application. You can programmatically force your page to be scraped by cURL'ing the linter.facebook. 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. For the changes to be reflected on Facebook. click Admin Page next to the Like button. These properties are fixed to avoid surprising users who have liked the page already.html' \ https://graph. Note that og:title and og:type are only editable initially .000 likes the type becomes fixed. This will enable you to publish stream updates to your pages programmatically.com/oauth/access_token Using this access token and the URL of your page. you can publish updates to the users who have liked your pages via the Graph API. From Facebook. To handle a site with lots of pages. 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 page is scraped when an admin for the page clicks the Like button or when the URL is entered into the Facebook URL Linter. Some sites may have hundreds or even thousands of pages with Open Graph protocol meta data.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..facebook.' \ -F 'message=Hello Likers' \ -F 'id=http://www. For example: curl https://developers.after your page receives 50 likes the title becomes fixed.. you must force your page to be scraped. To connect your Page to your Facebook application ID. Changing the title or type tags after these limits are reached does nothing. and after your page receives 10. your page retains the original title and type. 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.com/feed Some sample PHP code to help you get started: . 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.without their consent. If you associate your page with a Facebook application using the fb:app_id meta tag.com/page1.

"YOUR_SECRET_KEY_HERE"). $access_token .facebook. $access_token_url = "https://graph. [REQUIRED TAGS] <meta property="og:latitude" content="37. urlencode($mymessage) .me/ns#"> <head> . $parameters = "?" . "&method=post". $apprequest_url = "https://graph. </head> .416343"/> <meta property="og:longitude" content="-122. FACEBOOK_SECRET. $result = file_get_contents($myurl). // output the post id echo "post_id" . For example: <html xmlns:og="http://ogp.. $parameters).. } ?> The story will be published with the attribution of your application name. FACEBOOK_APP_ID . "&message=" .<?php $ogurl = "INSERT_YOUR_OG_URL_HERE". $result.. $myurl = $apprequest_url . Recommended Meta Data Two common pieces of information many profile pages have are location and contact information.facebook. define(FACEBOOK_SECRET.com"/> <meta property="og:phone_number" content="650-123-4567"/> <meta property="og:fax_number" content="+1-415-123-4567"/> . </head> Contact Information Consider including contact information if your page is about an entity that can be contacted. You can specify location via latitude and longitude. "YOUR_APP_ID_HERE"). or both.com/feed".. $mymessage = "Hello World!". Below are examples of how you can provide this information as meta data. "&client_secret=" .. For example: <html xmlns:og="http://ogp. a full address. $access_token = file_get_contents($access_token_url . [REQUIRED TAGS] <meta property="og:email" content="me@example. $parameters = "grant_type=client_credentials&client_id=" .. $ogurl .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"/> .me/ns#"> <head> .. "&id=" . "?" . Location This is useful if your pages is a business profile or about anything else with a real-world location.. define(FACEBOOK_APP_ID.com/oauth/access_token". $parameters.

you can specify them using the og:upc and og:isbn properties. Pages of type article do not have publishing rights. photo. and will not show up on user's profiles because they are not real world objects. video. . If your URL is a piece of content — such as a news article. or similar — you should set og:type to article (see below). These properties help uniquely identify products.Object types Facebook currently supports the following object types. 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. 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.

swf" If you specify a non-HTTPS url. website and blog are designed to represent an entire site.such as a news article. <meta property="og:type" content="moviesite:director"/> Game Achievements You can also define game achievements using Open Graph metadata and type game. you can specify your own type. and you want to mark a URL on your site as a director you would do: <html xmlns:moviesite="http://www. [REQUIRED TAGS] <meta property="og:type" content="game. <html xmlns:og="http://ogp.com/awesome. we will only embed your video for users who are browsing Facebook without HTTPS enabled. as this will prevent your embedded video from playing correctly.swf" You can optionally add additional metadata: og:video:width .achievement. og:video:secure_url .g.moviesite.example... Do not use website for this purpose.com/ns#" > <head> ..e. If you are specifying your own type we recommend that you use your own namespace.g. </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 . We will monitor the most commonly used types and graduate them to fully supported og:types.. "480" og:video:type .Websites blog website article Use article for any URL that represents transient content .. "640" og:video:height . This will be represented as type other on Facebook. If your object does not fit into one of the types above. blog post.g. When creating achievements. "https://secure. then og:video:type is required for each video. HTTPS urls require a valid certificate and it is important that you do not cause the browser to load any non-HTTPS resources..e.e.achievement"/> <meta property="game:points" content="POINTS_FOR_ACHIEVEMENT"/> . For example if you are moviesite.g. For example: .me/ns#"> <head> .g... etc. If you specify more than one og:video. "http://example. 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.e.com/awesome. you also need to set the game:points property which defines the associated points for the achievement.e. an og:type tag with types website or blog should usually only appear on the root of a domain. "application/x-shockwave-flash" You may specify more than one og:video. For more information about achievements please refer achievements documentation.com. video. photo. You must include a valid og:image for your video to be displayed in the news feed..

com/externalhit_uatext.vid" /> <meta property="og:video:type" content="text/html" /> . In desktop browsers and Flash-enabled mobile browsers.example.. You should whitelist the Facebook User Agent in order to guarantee we can confirm your Open Graph Tags..facebook.e.g. In browsers which support neither Flash nor HTML 5.com/html5. Facebook's servers will be unable to verify your Open Graph Tags and properly scrape your page. "Amazing Soft Rock Ballad" og:audio:artist . If your website applies any geographical restrictions that excludes the United States. For example..com/html5.e. "application/mp3" For example: <html xmlns:og="http://ogp..vid" when the video thumbnail is clicked. </head> In the above example.swf" /> <meta property="og:video" content="http://example. In Safari on the iPad.me/ns#"> <head> ..mp4" inside an HTML 5 <video> tag..e.com/fallback. "http://example.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video" content="http://example.php) Building standards Facebook Platform uses the Open Graph protocol to enable integrations of your web pages into the social graph.me/ns#"> <head> .swf" (or the secure alternative) as a Flash video. that actor should publish stories about themselves.com/awesome.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" /> . In a similar fashion to og:video you can add an audio file to your markup: og:audio .mp3" and optionally og:audio:title .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.g.e. When publishing. [REQUIRED TAGS] <meta property="og:video" content="http://example. "Amazing Album" og:audio:type .g.com/awesome..567 orang Report Documentation Bug Diperbarui 2 minggu yang lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi ..g.e.g. While a new technology. The user agent is currently facebookexternalhit/1. if users are liking an actor in a TV show. Facebook will render "http://example.0 (+https://www. use only the 'voice' of the object. or the TV network. </head> Best practices Make it easy for users to Like things on your site. Facebook will link to "http://example.com/awesome.com/fallback.com/amazing. "Amazing Band" og:audio:album . Facebook will render "http://example. not general information on the show. Kirim 11. Place the Like button close to the object they are liking. [REQUIRED TAGS] <meta property="og:audio" content="http://example. Facebook uses the og:video:type to determine how to render the video in the news feed. we've tried to build off of existing open standards to create a more semantically aware web.com/amazing.<html xmlns:og="http://ogp..

Without requiring users to log into your application or grant any special permission. Unless noted. If a user chooses to publish. status:true.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. This document provides an overview of the available channels. Stories published from your application will include a link to your application.com. which the user can then modify or override prior to posting. xfbml:true }). you can prompt users to publish stories about what they are doing in your application. cookie:true. News Feed The News Feed is shown immediately to users upon logging into Facebook. Because of the strength of a friend’s endorsement. message: 'Facebook for Websites is super-cool'}).facebook. so you can choose the ones which make the most sense for your user experience.init({ appId:'YOUR_APP_ID'.js"> </script> <script> FB. </script> </body> </html> When this page is loaded in the user's browser. the story will appear on the user’s profile and may appear to the user’s friends’ News Feeds. 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. Read more about Feed Dialog options including other defaults for the dialog.ui({ method: 'feed'. all channels will work for Websites. Feed Dialog: Prompt Users to Publish The recommended way to publish to the stream is with the Feed Dialog. communication through Facebook Platform can help high-quality products grow tremendously.net/en_US/all. making it core to the Facebook experience. There are several ways you can publish content to the stream: Feed Dialog. FB. The code above prompts the user with this dialog: . Feed Graph object and Like Button. and can optionally include a rich attachment. mobile and Apps on Facebook. the JavaScript SDK will render the below dialog that the user can use to post to their feed.

g. 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.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. but requires use of the JavaScript SDK. ensuring that a user will see the requests from their friends whenever they are on Facebook.facebook. 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. Developers can send these requests using the Graph API.. a connection is made between your page and the user. Like stories appear on users’ Wall and their friends’ News Feeds. your pages becomes equivalent to Facebook Pages. Requests integrate with Facebook notifications and dashboards. The following HTML/JavaScript example shows how to create a User-generated request: . Like button The Like button lets your users easily share interesting content from your application or website back to Facebook.. The following POST action will render the same story as in the example above.. Requests Requests are a great way to enable users to invite their friends to your application. You can publish via the Graph API for users who have authorized your application and who have granted you the ‘publish_stream’ permission. There are two Like button implementations: XFBML and Iframe.' \ https://graph. you can publish to a user's wall by issuing a POST request to https://graph. You send requests by using the Request Dialog.com/<username>/feed Read the complete documentation on posting and attachments and also the Facebook Platform Policies. The XFBML version is more versatile. your friend finished her move in a game and it’s now your turn). This means when a user clicks a Like button on your page. In addition.com/<username>/feed: curl -F 'access_token=. and you have the ability to publish updates to the user’s News Feed. For example. Your page will appear in the "Likes and Interests" section of the user's profile. if you specify meta information via the Open Graph protocol.facebook.' \ -F 'message=Facebook for Websites is super-cool. There are two types of requests that can be sent from an app: User-generated requests: These requests are confirmed by a user’s explicit action on a request dialog. These requests update the bookmark count for the recipient. The available fields are the same as the feed dialog fields.

xfbml:true }). message: 'Here is a new Requests dialog.<html> <head> <title>My Great Website</title> </head> <body> <div id="fb-root"></div> <script src="http://connect.ui({ method: 'apprequests'. </script> </body> </html> This example uses the JavaScript SDK to render a Request Form..js"> </script> <script> FB. it results in the following request experience: If you prefer to have your app send requests directly to the user (an App-generated request). When the above example is loaded..init({ appId:'YOUR_APP_ID'. status:true.facebook.net/en_US/all.'}). you post a request to the apprequest connection of the User Graph object: . FB. cookie:true.

$token_url = "https://graph.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. echo("App Request sent?". "&data='INSERT_STRING_DATA'&" . $result = file_get_contents($apprequest_url). "/apprequests?message='INSERT_UT8_STRING_MSG'" .com/oauth/access_token?" . Once sent. The count parameter will contain the total count set on the bookmark. A good common practice for Apps on Facebook. $app_secret = YOUR_APP_SECRET.com/" . 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: . $apprequest_url ="https://graph. $user_id = THE_CURRENT_USER_ID. This way users don't have to process your requests out of the context of your app. we are passed two parameters in the URL querystring: ref and count (i. $app_access_token . $app_secret .facebook. "client_id=" . $app_id . 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. The ref parameter contains the value "bookmark". $app_access_token = file_get_contents($token_url). $user_id . we pass the request id that they are acting on via the request_ids parameter. 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 message parameter is a UTF-8 string which describes the request.<?php $app_id = YOUR_APP_ID. ref=bookmarks&count=1). "&method=post". When the user accepts your request via the dashboard. "&client_secret=" . $result). "&grant_type=client_credentials".facebook. When the user clicks on the bookmark to load your application.e. The data parameter is a string which the app can use to store any relevant data in order to process the request.

we enable some distribution automatically as people use your applications. "&grant_type=client_credentials". //Process and delete app requests $data = json_decode($requests). $app_id . $signed_request = $_REQUEST["signed_request"]. $result = file_get_contents($delete_url). "client_id=" . You do not need to do anything extra to enable this distribution. "&method=delete".com/" .facebook. 2). //Get all app requests for user $request_url ="https://graph.facebook.<?php $app_id = 'YOUR_APP_ID'. 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. //Print all outstanding app requests echo '<pre>'.com/oauth/access_token?" . $id . $token_url = "https://graph. $delete_url = "https://graph. Bookmarks are automatically added for your application after the user engages with your applications. $user_id .com/" . expect these channels to change and improve. foreach($data->data as $item) { $id = $item->id. echo("Requests deleted? " .'. print_r($requests). $app_secret = 'YOUR_APP_SECRET'. Each automatic channel is designed to help engage users and our algorithms help surface the best content for each user. $data = json_decode(base64_decode(strtr($payload. $result). $payload) = explode('. in addition to the channels above. $app_secret . list($encoded_sig. The bookmark will appear on left column of the homepage as well as on the top right of a Canvas Page. $signed_request. $user_id = $data["user_id"]. As Facebook evolves as a product. '+/')). . } ?> Automatic Channels To drive more traffic to Facebook Platform applications and websites. "/apprequests?" . echo '</pre>'. $access_token. $delete_url = $delete_url . '-_'. "&client_secret=" . $access_token. $requests = file_get_contents($request_url). "?" . $access_token = file_get_contents($token_url).facebook. true).

a variety of feed stories may be published to share with users the popular applications their friends are using. this Page shows up in the search typeahead or on the search results page. Dashboards Apps on Facebook. This Page is similar to other Pages and user profiles on Facebook. You can also choose to update users who have liked your profile Page with news about your application. These stories are typically targeted at people who have not used your application to provide a way for new users to discover your application. Kirim 8. When users search for your application. Usage Stories Many actions on Facebook are shared with friends. apps they've recently used and apps their friends have recently used. Requests from your application may trigger a notification to users who will find it relevant. The Application Directory is also accessible from the Dashboard. and it includes Wall and Info tabs as well as other configurable tabs. App Profiles & Search Each new applications has its own App Profiles Page (for example. users can navigate to your application or Like your Page.083 orang Report Documentation Bug Diperbarui pada hari Selasa Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi .Notifications Notifications on Facebook are meant to provide prominent but lightweight heads-up about interesting changes to content relevant to users. see Facebook Live's page). Dashboards appear as bookmarked links on Facebook's homepage and shows users outstanding requests.the Apps Dashboards and the Games Dashboard. From this Page.com have the opportunity to appear on one of two dashboards -. Similarly.

Regardless of the flow you utilize. they are prompted to enter their credentials: . When invoking this dialog. we validate the login cookie that we have stored on the user's browser.facebook. 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). 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. Once these steps are complete. Note.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL See the Alternate Redirect URIs section below for more information.0 flows for user login: server-side (known as the authentication code flow in the specification) and client-side (known as the implicit flow). App authentication ensures that the user is giving their information to your app and not someone else. The server-side flow is used whenever you need to call the Graph API from your web server. https://www. mobile and desktop apps. These examples are very straightforward and easily translatable to other languages. such as JavaScript running in a Web browser or from a native mobile or desktop app. our implementation of the OAuth 2. We support a number of different OAuth flows that you can use within your Website.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. The examples in this document use PHP for server-side programming and HTML/JavaScript for client-side code. your redirect_uri can not be a redirector. 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. The client-side flow is used when you need to make calls to the Graph API from a client. User authentication ensures that the user is who they say they are. If the user is already logged in. app authorization and app authentication. If the user is not logged in. App authorization ensures that the user knows exactly what data and capabilities they are providing to your app.0 protocol for authentication and authorization. This document outlines that different mechanisms Facebook Platform uses to support each of these flows. User Login Facebook Platform supports two different OAuth 2. authenticating the user.0 involves three different steps: user authentication.

the lower the number of users that will grant them.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email. your app is not authorized. so we recommend that you only request the permissions you absolutely need for your app. 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: .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. you must request specific permissions from the user.facebook. This is accomplished by adding a scope parameter to the OAuth Dialog request followed by comma separated list of the required permissions. If your app needs more than this basic information to function. the user is asked to authorize the app to access basic information that is available publicly or by default on Facebook. The following example shows how to ask for access to user's email address and their news feed: https://www. If the user presses Don't Allow. The greater the number of permissions you ask for.Once we have successfully authenticated the user. the OAuth Dialog will prompt the user to authorize the app: By default.

along with the exact same redirect_uri used above ." } } The diagram below illustrates the HTTP calls made through the server-side flow: . "message": "Error validating verification code. 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).facebook. they will not be prompted to do so again.http://YOUR_URL?error_reason=user_denied& error=access_denied&error_description=The+user+denied+your+request. 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).facebook. app authentication. the response contains the number of seconds until the token expires (the expires parameter). If there is an issue authenticating your app. In order to authenticate your app.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. you can request the offline_access permission. you must pass the authorization code and your app secret to the Graph API token endpoint . although if the user has already authorized your app. your app is authorized. Once the token expires.at https://graph. to gain the access token you need to make API calls. you can proceed to the next step. the authorization server will issue an HTTP 400 and return the error in the body of the response: { "error": { "type": "OAuthException". the authorization server will return the access token: In addition to the access token (the access_token parameter). 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.com/oauth/access_token. https://graph. you will need to re-run the steps above to generate a new code and access_token. If the user presses Allow.

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

the redirect_uri is passed the access token in a URI fragment (#access_token): http://YOUR_URL#access_token=166942940015970%7C2.https://www. See the Alternate Redirect URIs section below for more information.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&response_type=token As with the server-side flow.facebook.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. you can also request additional permissions using the scope parameter: https://www. 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: . only client-side code (such as JavaScript executing in the browser or desktop code hosting a web control) can retrieve the token.sa0&expires_in=64090 Because the access token is passed in an URI fragment. 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. App authentication is handled by verifying that the redirect_uri is in the same path as the Site URL configured in the Developer App.

you can override this .hash.location. userName. } var appID = "YOUR_APP_ID".join('&').com/dialog/oauth?'. var path = "https://graph.join('&'). var url = path + query. document.appendChild(greetingText).createElement('script').facebook. During app removal we will send an HTTP POST request containing a single parameter. } else { var accessToken = window." } } Your app can request a new access token by re-running the appropriate flow if this error occurs. // use jsonp to call the graph var script = document.body.facebook. var query = queryParams. var queryParams = [accessToken. your app can be notified by specifying a Deauthorize Callback URL in the Developer App. However. App Deauthorization When a user of your app removes it in the App Dashboard or blocks the app in the News Feed. ' + user. var queryParams = ['client_id=' + appID. the Graph API will issue an HTTP 400 and return the error in the body of the response: { "error": { "type": "OAuthException". } </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. 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. 'response_type=token'].com/me?access_token=ACCESS_TOKEN If the user changes their password. You will not receive an user access token in this request and all existing user access tokens will be automatically expired.hash.length == 0) { var path = 'https://www. if (window.createTextNode('Greetings. script. which contains the user id (UID) of the user that just removed your app. 'callback=displayUser']. 'redirect_uri=' + window.'). window.name + '.getElementById('userName'). var query = queryParams. signed_request. Alternate Redirect URIs When redirect_uris are specified in the authentication flows.com/me?".<html> <head> <title>Client Flow Example</title> </head> <body> <script> function displayUser(user) { var userName = document. var url = path + query.location.src = url. "message": "Error validating access token. the access token expires or the user deauthorizes your app in the App Dashboard. var greetingText = document.open(url).facebook.appendChild(script).substring(1).location.

Facebook Platform support App Login using the OAuth 2. app secret and client_credentials in the grant_type parameter. Logout You can log a user out of their Facebook session by directing them to the following URL: https://www. such as retrieving Insights data or approving Requests.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. App Login In addition to User Login.facebook.facebook. as defined in the Developer App.com/oauth/access_token by specifying your app id.com/logout. https://graph. please note that your redirect_uri can not be a redirector. Both the app id and app secret are generated when your app is created in the Developer App.com/oauth/access_token? client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET& grant_type=client_credentials . You can obtain the app access token from the Graph API token endpoint at https://graph.php?next=YOUR_URL&access_token=ACCESS_TOKEN YOUR_URL must be a URL in your site domain. for example.0 Client Credential flow. App Login allows you to take various administrative actions for your app.facebook. However. Graph API calls that require an app access token are clearly denoted in the API reference.

Every Page has one or more administrator which can perform privileged operations on the Page.facebook.facebook.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. you can then access the account connection of the User Graph API: https://graph.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.com/YOUR_APP_ID/insights? access_token=TOKEN_FROM_ABOVE Page Login Facebook Pages follow a slightly different flow from user and app login.facebook. In order for your app to perform these privileged operations.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: . the user must grant your app the manage_pages permission: https://www.

Websites Our Website Getting Started Guide provides an overview of adding user login to your Website using our JavaScript SDK and Login Social Plugin.html#access_token=.0 implementation does not include explicit desktop app support.. you can use the client-side flow with one modification: a specific redirect_uri.com/connect/login_success.html.com. AIR and Cocoa support embedding browsers). .com/dialog/oauth? client_id=YOUR_APP_ID& redirect_uri=https://www.. However. Mobile and Desktop Apps. if your desktop app can embed a web browser (most desktop frameworks such as . Apps on Facebook. Apps on Facebook.com Our Apps on Facebook.e.facebook. App Types Facebook Platform provides a number of ways to use the above OAuth flows in different app types.facebook. we provide a specific URL you can use with desktop apps: https://www.com/connect/login_success.NET.com/connect/login_success. 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.facebook. response_type=token): https://www.com/dialog/oauth) using the client-side flow (i. including Websites. Embed a web browser and load the OAuth Dialog (https://www.You can use the access token returned for a given Page to perform administrative actions on behalf of the user on that Page. Rather than requiring desktop apps to host a web server and populate the Site URL in the Developer App.facebook.com Getting Started Guide provides details on how to handle user login when integrating your app into our core experience on Facebook. Desktop Apps Our OAuth 2.html After the user authorizes your app.facebook. we redirect the user back to the redirect_uri with the access token in the URI fragment: https://www.

Detect this redirect and then read the access token out of the URI using whatever mechanisms provided by your framework of choice. We strongly recommend that any app implementing Facebook user login implement CSRF protection using this mechanism. To prevent this attack. you should pass an identifier in the state parameter. 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.0 section 10. and then validate the state parameter matches on the response. Redirect_URI Please be aware that you can not specify a redirector for the redirect_uri. Kirim 5.15 for further details.253 orang Report Documentation Bug Diperbarui sekitar seminggu yang lalu Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi . Visit the OAuth 2.

Sign up to vote on this title
UsefulNot useful