Step by Step - Facebook API

Dokumentasi

Getting Started

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Getting Started

Websites Apps on Facebook Mobile

Websites

Samples & How-Tos

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

Videos

using Login Button and Registration Plugin

Core Concepts Advanced Topics

Mobile Apps

SDKs & Tools

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.

Open Graph Beta

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

Social Plugins

Open Graph protocol

The Social Design Guidelines helps you understand why you should build great social experiences as well as

Social Plugins enable you to provide engaging social experiences to your users with just a line of HTML without

The Open Graph protocol enables you to integrate your pages into the social graph. These pages gain the

how to use Facebook Platform effectively to create them.

the need for the viewer to have signed into your site.

functionality of other graph objects including profile links and stream updates.

Social Channels

Authentication

Graph API

Facebook Platform lets you integrate with social channels such as News Feed and Requests to help you drive

Facebook authentication enables your app to interact with the Graph API on behalf of Facebook users and provides

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

growth and engagement with your app, site or content.

a powerful single-sign on mechanism across Web, mobile, and desktop apps.

simple and consistent view of the social graph.

Advanced Topics Dialogs

FQL

Internationalization API

Dialogs provide a simple, consistent interface to display dialogs to users.

Facebook Query Language, or FQL, enables you to use a SQL-style

Take advantage of our community Translations framework, which has

Dialogs do not require special user permissions because they require

interface to query the data exposed by the Graph API.

helped Facebook be available in over 70 languages, to translate your app or

user interaction.

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

website.

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

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.

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.

Kirim

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.

Report Documentation Bug

107.479 orang

Diperbarui sekitar sebulan yang lalu

Facebook © 2011 · Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Getting Started Websites

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Facebook for Websites Getting Started › Facebook for Websites

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

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:

My Great Web page 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 tagDecember for the plugin oauth:true 13thwithin your page. 353 orang menyarankan ini. 353require orang the menyarankan ini. (eXtended Facebook There are several Social Plugins, such as Comments and Live Stream, that use of XFBML Removing Markup Language). XFBML is App a setProfile of XMLPages elements that can be includedRemoving in your HTML to Pages display Social Plugins. Apppages Profile orang menyarankan ini. When your page is710 loaded, any XFBML elements found in the document are by the JavaScript SDK, resulting in 710 processed orang menyarankan ini.

the appropriate plugin Pagebeing title rendered on your page. 106 orang menyarankan ini.

Page title

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

Plugin sosial Facebook Plugin sosial Facebook My Great Web page (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')); The iframe versions of our plugins are the most widely used, as they require a minimal understanding of Facebook Platform. The XFBML versions are typically used by more sophisticated developers looking for more control and consistency in their codebase. Getting started could not be simpler. Just select the plugin from our Social Plugin page and follow the steps in the provided configurator. These configurators, like the below, help you setup your plugin and generate all the code you need to add it to your site.

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

2.0 directly (see our Authentication Overview), the open source JavaScript SDK is the simplest way to use Facebook for login. The JavaScript SDK requires that you register your website with Facebook to get an App ID (or appId). The appId is a unique identifier for your site that ensures that we have the right level of security in place between the user and your website. The following example shows how to load the JavaScript SDK once you have your appId:

My Facebook Login Page window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', status : true, cookie : true, xfbml : true, oauth : true, }); }; (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); Once you have loaded the JavaScript SDK into your page and initialized it with your appId, you simply add the Login Button to your page using the element as shown below:

My Facebook Login Page window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', status : true, cookie : true, xfbml : true, oauth : true, }); }; (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); Login with Facebook When the user loads the page in their browser, the JavaScript SDK renders the Login Button on your page:

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

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

My Facebook Login Page window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', status : true, cookie : true, xfbml : true, oauth : true, }); }; (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); Login with Facebook When the user clicks the login button from this page, they will see the below authorization dialog. Note that there are now two new sections that outline the additional information that your site is requesting permission to access.

A full list of permissions is available in our permissions reference. There is a strong inverse correlation between the number of permissions your site requests and the number of users that will allow those permissions. The greater the number of permissions you ask for, the lower the number of users that will grant them; so we recommend that you only request the permissions you absolutely need for your site. In addition to Login Button, we offer the Registration Plugin. The Registration Plugin offers two key features not available with the Login Button: support for users without Facebook accounts and the ability to request additional user information that Facebook may not have or make available. Using the Registration Plugin is just as simple as using the Login Button. You merely need to use the element in your page, rather than the Login Button:

My Facebook Login Page window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', status : true, cookie : true, xfbml : true, oauth : true, }); }; (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document));

Kirim

Report Documentation Bug

3.806 orang

Diperbarui sekitar 4 bulan yang lalu

Facebook © 2011 · Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Getting Started Core Concepts

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Facepile Core Concepts › Social Plugins › Facepile

Social Design Social Plugins Open Graph Protocol

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

Social Channels

parameter. If you want the plugin to display users who have signed up for your site, specify your application id as the

Authentication Graph API

app_id parameter. The plugin is available either via a simple iframe you can drop into your page, or if you are using the new JavaScript SDK, you can use the XFBML tag (or if you prefer HTML5 markup).

Advanced Topics SDKs & Tools Open Graph Beta

URL (?) http://example.com

Size (?) Plugins Activity Feed Comments

small

Width (?) 200

Facepile Like Box Like Button

Num rows (?) 1

Live Stream Login Button Page title Recommendations Registration Send Button

Color Scheme (?) light

Get Code

Subscribe Button

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

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

(Beta)

max_rows - the maximum number of rows of faces to display. The XFBML version will dynamically size its height; if

Recommendations Box

you specify a maximum of four rows of faces, but there are only enough friends to fill two rows, the XFBML version of the plugin will set its height for two rows of faces. Default: 1.

(Beta)

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

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

How to show users who have connected to your site You need to specify your application id. If you are using the iframe version simply include it as another query parameter. Example:

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



Kirim

Report Documentation Bug

13.100 orang

Diperbarui sekitar seminggu yang lalu

Facebook © 2011 · Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Getting Started Core Concepts

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Live Stream Core Concepts › Social Plugins › Live Stream

Social Design Social Plugins Open Graph Protocol Social Channels Authentication

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

Graph API Advanced Topics SDKs & Tools Open Graph Beta

Privasi

App ID (?) 164266186973440

Keluar

Diskusikan acara ini

Width (?)

Kirim ke Facebook?

Bagikan

400

Plugins

Jadilah orang pertama yang berbagi pikiran di acara ini

Height (?) 500

Activity Feed Comments

XID (?)

Facepile Like Box Like Button

Via Attribution URL (?)

Live Stream Login Button Page title Recommendations Registration

Always post to friends (?) Always post to friends

Send Button Subscribe Button

Get Code

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

Kirim

Report Documentation Bug

Fajar Sani

Diperbarui sekitar sebulan yang lalu

(Beta)

Facebook © 2011 · Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Getting Started Core Concepts

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Open Graph Protocol Core Concepts › Open Graph Protocol

Social Design Social Plugins Open Graph Protocol

We announced the next version of the Open Graph at f8 2011. It is currently in beta. You can view the Open Graph Beta documentation here. The below documentation refers to the first version of

Social Channels

the Open Graph that shipped with the Like Button at f8 2010. This is the current production version of the Open Graph and will work with the Like Button and other social plugins.

Authentication Graph API Advanced Topics SDKs & Tools Open Graph Beta

The Open Graph Protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things — things like movies, sports teams, celebrities, and restaurants. Including Open Graph tags on your Web page, makes your page equivalent to a Facebook Page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the "Likes and Interests" section of the user's profile, and you have the ability to publish updates to the user. Your page will show up in the same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content. The structured data you provide via the Open Graph Protocol defines how your page will be represented on Facebook.

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

The Rock (1996) ... ... The Open Graph protocol defines four required properties:

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

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

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

fb:app_id - A Facebook Platform application ID that administers this page. It's also recommended that you include the following properties as well as these multi-part properties.

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

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

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

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

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

Go here to learn about additional Like button options. Here's a sample Like button for an Open Graph-enabled page:

Suka

5.630 orang menyukai ini. Jadilah orang pertama di antara teman-teman.

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

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

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

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

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



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

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

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

curl -F grant_type=client_credentials \ -F client_id=your_app_id \ -F client_secret=your_app_secret \ https://graph.facebook.com/oauth/access_token Using this access token and the URL of your page, you can publish to users via the API with

curl -F 'access_token=...' \ -F 'message=Hello Likers' \ -F 'id=http://www.myopengraphpage.com/page1.html' \ https://graph.facebook.com/feed Some sample PHP code to help you get started:



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

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

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

... [REQUIRED TAGS] ...

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

... [REQUIRED TAGS] ...

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

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

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

Activities activity sport

Businesses bar company cafe hotel restaurant

Groups cause sports_league sports_team

Organizations band government non_profit school university

People actor athlete author director musician politician public_figure

Places city country landmark state_province

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

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

website or blog should usually only appear on the root of a domain. If your object does not fit into one of the types above, you can specify your own type. This will be represented as type

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

....

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

... [REQUIRED TAGS] ...

Attaching Audio and Video Data If you want to attach a video to your Open Graph page you can specify a video url:

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

og:video:secure_url - e.g., "https://secure.example.com/awesome.swf" You can optionally add additional metadata:

og:video:width - e.g. "640" og:video:height - e.g. "480" og:video:type - e.g. "application/x-shockwave-flash" You may specify more than one og:video. If you specify more than one og:video, then og:video:type is required for each video. You must include a valid og:image for your video to be displayed in the news feed. For example:

... [REQUIRED TAGS] ... In the above example, Facebook uses the og:video:type to determine how to render the video in the news feed. In desktop browsers and Flash-enabled mobile browsers, Facebook will render "http://example.com/awesome.swf" (or the secure alternative) as a Flash video. In Safari on the iPad, Facebook will render "http://example.com/html5.mp4" inside an HTML 5 tag. In browsers which support neither Flash nor HTML 5, Facebook will link to "http://example.com/fallback.vid" when the video thumbnail is clicked. In a similar fashion to og:video you can add an audio file to your markup:

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

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

... [REQUIRED TAGS] ...

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

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

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

Report Documentation Bug

11.567 orang

Diperbarui 2 minggu yang lalu

Facebook © 2011 · Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Getting Started Core Concepts

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Social Channels Core Concepts › Social Channels

Social Design Social Plugins Open Graph Protocol Social Channels Authentication

One benefit of using Facebook Platform is the potential reach you have when Facebook users share content from your app or website with their friends. Because of the strength of a friend’s endorsement, communication through Facebook Platform can help high-quality products grow tremendously. This document provides an overview of the available channels, so you can choose the ones which make the most sense for your user experience. Unless noted, all channels will work for Websites, mobile and Apps on Facebook.com.

Graph API Advanced Topics SDKs & Tools Open Graph Beta

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

My Great Website FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true }); FB.ui({ method: 'feed', message: 'Facebook for Websites is super-cool'}); When this page is loaded in the user's browser, the JavaScript SDK will render the below dialog that the user can use to post to their feed. Read more about Feed Dialog options including other defaults for the dialog, which the user can then modify or override prior to posting. The code above prompts the user with this dialog:

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

https://graph.facebook.com//feed: curl -F 'access_token=...' \ -F 'message=Facebook for Websites is super-cool.' \ https://graph.facebook.com//feed Read the complete documentation on posting and attachments and also the Facebook Platform Policies. Like button The Like button lets your users easily share interesting content from your application or website back to Facebook. Like stories appear on users’ Wall and their friends’ News Feeds. In addition, if you specify meta information via the Open Graph protocol, your pages becomes equivalent to Facebook Pages. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the "Likes and Interests" section of the user's profile, and you have the ability to publish updates to the user’s News Feed. There are two Like button implementations: XFBML and Iframe. The XFBML version is more versatile, but requires use of the JavaScript SDK.

Requests Requests are a great way to enable users to invite their friends to your application. Requests integrate with Facebook notifications and dashboards, ensuring that a user will see the requests from their friends whenever they are on Facebook. You can also use requests to have a user notify their friends to take a specific action in your app, such as accepting a gift or helping the user complete a quest. There are two types of requests that can be sent from an app: User-generated requests: These requests are confirmed by a user’s explicit action on a request dialog. These requests update the bookmark count for the recipient. You send requests by using the Request Dialog. App-generated requests: These requests can be initiated and sent only to users who have authorized your app. Developers can send these requests using the Graph API. You should use these requests to update the bookmark count to encourage a user to re-engage in the app (e.g., your friend finished her move in a game and it’s now your turn). The following HTML/JavaScript example shows how to create a User-generated request:

My Great Website FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true }); FB.ui({ method: 'apprequests', message: 'Here is a new Requests dialog...'}); This example uses the JavaScript SDK to render a Request Form. When the above example is loaded, it results in the following request experience:

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

apprequest connection of the User Graph object:



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

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

Dashboards Apps on Facebook.com have the opportunity to appear on one of two dashboards -- the Apps Dashboards and the Games Dashboard. Dashboards appear as bookmarked links on Facebook's homepage and shows users outstanding requests, apps they've recently used and apps their friends have recently used. The Application Directory is also accessible from the Dashboard. Usage Stories Many actions on Facebook are shared with friends. Similarly, a variety of feed stories may be published to share with users the popular applications their friends are using. These stories are typically targeted at people who have not used your application to provide a way for new users to discover your application. App Profiles & Search Each new applications has its own App Profiles Page (for example, see Facebook Live's page). This Page is similar to other Pages and user profiles on Facebook, and it includes Wall and Info tabs as well as other configurable tabs. When users search for your application, this Page shows up in the search typeahead or on the search results page. From this Page, users can navigate to your application or Like your Page. You can also choose to update users who have liked your profile Page with news about your application. Kirim

Report Documentation Bug

8.083 orang

Diperbarui pada hari Selasa

Facebook © 2011 · Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi

Dokumentasi

Getting Started Core Concepts

Dukungan

Blog

Aplikasi

Search Documentation / Apps

Authentication Core Concepts › Authentication

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

Reference

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

User Login Facebook Platform supports two different OAuth 2.0 flows for user login: server-side (known as the authentication code flow in the specification) and client-side (known as the implicit flow). The server-side flow is used whenever you need to call the Graph API from your web server. The client-side flow is used when you need to make calls to the Graph API from a client, such as JavaScript running in a Web browser or from a native mobile or desktop app. Regardless of the flow you utilize, our implementation of the OAuth 2.0 involves three different steps: user authentication, app authorization and app authentication. User authentication ensures that the user is who they

Legacy Connect Auth

say they are. App authorization ensures that the user knows exactly what data and capabilities they are providing to your app. App authentication ensures that the user is giving their information to your app and not someone else. Once these steps are complete, your app is issued an user access token that enables you to access the user's information and take

Permissions

actions on their behalf.

Authenticating Devices Legacy Canvas Auth

Re-Authentication Signed Request

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

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

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

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

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

A full list of permissions is available in our permissions reference. There is a strong inverse correlation between the number of permissions your app requests and the number of users that will allow those permissions. The greater the number of permissions you ask for, the lower the number of users that will grant them; so we recommend that you only request the permissions you absolutely need for your app. If the user presses Don't Allow, your app is not authorized. The OAuth Dialog will redirect (via HTTP 302) the user's browser to the URL you passed in the redirect_uri parameter with the following error information:

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

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

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

https://graph.facebook.com/oauth/access_token? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL& client_secret=YOUR_APP_SECRET&code=THE_CODE_FROM_ABOVE If your app is successfully authenticated and the authorization code from the user is valid, the authorization server will return the access token:

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

{ "error": { "type": "OAuthException", "message": "Error validating verification code." } } The diagram below illustrates the HTTP calls made through the server-side flow:

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



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

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

https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream& response_type=token Once the user is authenticated and authorizes your application, the browser will be redirected to redirect_uri but rather than being passed a authorization code (via the code parameter) as in the server-side flow, the redirect_uri is passed the access token in a URI fragment (#access_token):

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

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

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

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

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

{ "error": { "type": "OAuthException", "message": "Error validating access token." } } Your app can request a new access token by re-running the appropriate flow if this error occurs.

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

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

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

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

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

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

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

https://graph.facebook.com/oauth/access_token by specifying your app id, app secret and client_credentials in the grant_type parameter. Both the app id and app secret are generated when your app is created in the Developer App.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://www.facebook.com/dialog/oauth? client_id=YOUR_APP_ID& redirect_uri=https://www.facebook.com/connect/login_success.html After the user authorizes your app, we redirect the user back to the redirect_uri with the access token in the URI fragment:

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

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

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

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

Report Documentation Bug

5.253 orang

Diperbarui sekitar seminggu yang lalu

Facebook © 2011 · Bahasa Indonesia

Perihal

Kebijakan Platform

Kebijakan Privasi