Step by Step - Facebook API

Getting Started

Websites

Apps on Facebook

Mobile

Samples & How-Tos

Videos

Core Concepts

Advanced Topics

SDKs & Tools

Open Graph Beta

Getting Started

WebsitesUsing Facebook on your Website allows you to create a more personalized, social experienceusing Social Plugins such as the Like Button and simplify your registration and sign-in processusing Login Button and Registration Plugin

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

Apps on FacebookBuilding an app on Facebook gives you the opportunity to deeply integrate into our core userexperience. Use the native functionality of Facebook such as Requests and Bookmarks to createan ideal social space for your users.

Core Concepts

Social DesignThe Social Design Guidelines helpsyou understand why you should buildgreat social experiences as well ashow to use Facebook Platformeffectively to create them.

Social PluginsSocial Plugins enable you to provideengaging social experiences to yourusers with just a line of HTML withoutthe need for the viewer to have signedinto your site.

Open Graph protocolThe Open Graph protocol enables youto integrate your pages into the socialgraph. These pages gain thefunctionality of other graph objectsincluding profile links and streamupdates.

Social ChannelsFacebook Platform lets you integratewith social channels such as NewsFeed and Requests to help you drivegrowth and engagement with yourapp, site or content.

AuthenticationFacebook authentication enables yourapp to interact with the Graph API onbehalf of Facebook users and providesa powerful single-sign on mechanismacross Web, mobile, and desktop apps.

Graph APIThe Graph API is the core of FacebookPlatform, enabling you to read andwrite data to Facebook. It provides asimple and consistent view of thesocial graph.

Advanced Topics

DialogsDialogs provide a simple, consistentinterface to display dialogs to users.Dialogs do not require special userpermissions because they requireuser interaction.

FQLFacebook Query Language, or FQL,enables you to use a SQL-styleinterface to query the data exposedby the Graph API.

Internationalization APITake advantage of our communityTranslations framework, which hashelped Facebook be available in over70 languages, to translate your app orwebsite.

CreditsFacebook Credits is a paymentsystem that offers a safe, easy andfast way to pay for digital and virtualgoods in games and apps acrossFacebook.

Ads APIThe Facebook Ads API lets you createand manage your own ads onFacebook programmatically, withoutusing the Facebook AdvertisingManager tool.

Chat APIYou can integrate Facebook Chat intoyour Web-based, desktop, or mobileinstant messaging products. Yourinstant messaging client connects toFacebook Chat via the Jabber/XMPPservice.

Legacy APIsREST API, FBML, and the oldJavascript API are legacy APIs that

Dokumentasi Dukungan Blog Aplikasi Search Documentation / Apps

Report Documentation Bug

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

SDK & Tools

JavaScript SDKThe JavaScript SDK enables you toaccess features of the Graph API andDialogs via JavaScript. It provides richclient-side functionality forauthentication and rendering SocialPlugins.

IOS SDKThe iOS SDK provides FacebookPlatform support for iPhone, iPad andiPod Touch apps. You can utilizesingle-sign-on, call the Graph API anddisplay Platform Dialogs.

Android SDKThe Android SDK provides FacebookPlatform support for Android apps.You can utilize single-sign-on, call theGraph API and display PlatformDialogs.

PHP SDKThis SDK provides Facebook Platformsupport to your PHP-based web apps.This library helps you add FacebookLogin and Graph API support to yourWebsite.

ToolsDeveloper App, Insights Dashboard,Graph API explorer, JavaScript TestConsole , Test Users, URL Linter aresome of the many tools we provide tohelp you develop, test and monitoryour app.

Diperbarui sekitar sebulan yang lalu

Facebook © 2011 · Bahasa Indonesia Perihal Kebijakan Platform Kebijakan Privasi

Kirim 107.479orang

Getting Started

Websites

Apps on Facebook

Mobile

Samples & How-Tos

Videos

Core Concepts

Advanced Topics

SDKs & Tools

Open Graph Beta

Facebook for WebsitesGetting Started › Facebook for Websites

Facebook Platform enables you to make your website more social. You can use our Social Plugins, such as the Like Buttonto drive user engagement with a single line of HTML. Our Login Button and Registration Plugin let you simplify or eliminateyour own user registration and sign-in. Lastly, the Graph API lets you access the full social graph of a given user, allowingyou 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 guideuse PHP for server-side programming and HTML/JavaScript for client-side code. These examples are very straightforwardand easily translatable to other languages.

In this document:

Social PluginsAuthenticationPersonalizationAnalytics

Social Plugins

Social Plugins are the easiest way to get started with Facebook Platform. The plugins are embeddable social features thatcan be integrated in your site with a line of HTML. Because they are hosted by Facebook, the plugins are personalized forall 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 oneclick. 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 theuser's friends who have also liked the page. Here is a Like Button for the Facebook Developers site:

Once you have included the Like Button into your site, you can use other Social Plugins to turn those user interactionsinto more engaging experiences throughout your site. You can use the Activity Feed Plugin to show users a stream of therecent likes and comments from their friends on your site. You can use the Recommendations Plugin to show personalizedpage recommendations to your users based on the likes and comments across your entire site. Here are the activity andrecommendations plugins for the Facebook Developers site:

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


Most Social Plugins can be integrated with your site by simply including the iframe tag for the plugin within your page.

There are several Social Plugins, such as Comments and Live Stream, that require the use of XFBML (eXtended FacebookMarkup Language). XFBML is a set of XML elements that can be included in your HTML pages to display Social Plugins.When your page is loaded, any XFBML elements found in the document are processed by the JavaScript SDK, resulting inthe appropriate plugin being rendered on your page.

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

<html><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 consistencyin their codebase.

Getting started could not be simpler. Just select the plugin from our Social Plugin page and follow the steps in the providedconfigurator. These configurators, like the below, help you setup your plugin and generate all the code you need to add itto your site.

Authentication

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

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

Aktivitas Terbaru

Sandi Febriyanto dan Teguh Mafandiberbagi Like Box. · sekitar 4 bulan yang lalu

Introducing the Subscribe Button forWebsites

2.035 orang menyarankan ini.

Breaking Change: JavaScript SDK tooauth:true on December 13th

353 orang menyarankan ini.

Removing App Profile Pages


Page title


Plugin sosial Facebook

Saran

Like Box

Sandi Febriyanto, Teguh Mafandi, dan314.889 orang lainnya menyarankan ini.







Page title



2.0 directly (see our Authentication Overview), the open source JavaScript SDK is the simplest way to use Facebook forlogin.

The JavaScript SDK requires that you register your website with Facebook to get an App ID (or appId). The appId is aunique identifier for your site that ensures that we have the right level of security in place between the user and yourwebsite. 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>


window.fbAsyncInit = function() {FB.init({

appId : 'YOUR_APP_ID',status : true,cookie : true,xfbml : true,oauth : true,

});};(function(d){

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

}(document));</script>

</body></html>

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

<html><head>





});};(function(d){


}(document));</script><div class="fb-login-button">Login with Facebook</div>

</body></html>

When the user loads the page in their browser, the JavaScript SDK renders the Login Button on your page:

In order to log the user into your site, three things need to happen. First, Facebook needs to authenticate the user. Thisensures that the user is who they say they are. Second, Facebook needs to authenticate your website. This ensures thatthe user is giving their information to your site and not someone else. Lastly, the user must explicitly authorize yourwebsite 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 isclick it. When the user does so, the JavaScript SDK will ensure that the user is signed into Facebook and that the requestis coming from your website. We then present an authorization dialog in their browser that provides information aboutyour 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 thedialog 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 thisinformation. If you can do this by adding the permissions you need to the perms attribute of the Login Button like below:

<html><head>





});};(function(d){


}(document));</script><div class="fb-login-button" data-perms="email,user_checkins">

Login with Facebook</div>

</body></html>

When the user clicks the login button from this page, they will see the below authorization dialog. Note that there are nowtwo 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 thenumber of permissions your site requests and the number of users that will allow those permissions. The greater thenumber of permissions you ask for, the lower the number of users that will grant them; so we recommend that you onlyrequest 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 availablewith the Login Button: support for users without Facebook accounts and the ability to request additional user informationthat Facebook may not have or make available.

Using the Registration Plugin is just as simple as using the Login Button. You merely need to use the <div class="fb-

registration"> element in your page, rather than the Login Button:

<html><head>





});};(function(d){


}(document));</script><div

class="fb-registration"data-fields="[{'name':'name'}, {'name':'email'},

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

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

</body></html>

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

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

Once the user reviews the information and/or enters any custom fields (in the above example, favorite_car is a

custom field that the user must populate directly, as it is not data that is currently part of the user's Facebook profile), theuser clicks Register. This will start the authentication and authorization process which is denoted by the below dialog:

With authentication/authorization complete, we redirect the user to whatever URL you placed into the redirect-uri

attribute of the plugin which completes the registration process.

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

Personalization

While Social Plugins offer a easy way to personalized your site, once you have added login to your site, you can access thefull power of the Graph API to create an even deeper personalized experience for your users. You can use the Graph API toaccess the user's Facebook profile, using this data in your own custom experience. You can use the Graph API to publishto the user's Facebook Wall and their News Feed. You can use the Graph API to access the user's social graph, bring theirfriends directly to your site all in your own custom experience.

The Javascript SDK provides a straightforward way to access the Graph API: FB.api. This function takes a string argumentwhich specifies the part of the Graph to target and a callback function that is invoked when the call completes. Thefollowing demonstrates how to use FB.api() to retrieve the user's picture and name from the Graph API and display it on apage within your site:

<html><head>





});

FB.api('/me', function(user) {if (user) {

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

}});

};

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


<div align="center"><img id="image"/><div id="name"></div>

</div></body>

</html>

Another way to personalize your site with the JavaScript SDK is the FB.ui function. This function invokes our PlatformDialogs within the context of your site. You can use the FB.ui function to post to the user's Feed or allow them to invitenew friends. The following demonstrates how to use the Feed Dialog from your site:

<html><head>





});

FB.ui({ method: 'feed',message: 'Facebook for Websites is super-cool'});

};



</body></html>

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

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

The Javascript SDK lets you access the Graph API and Platform Dialogs from client-side code but some of the mostinteresting integrations involve accessing the Graph API from server-side code running on your web server. The JavaScriptSDK saves the details for the logged in user in a cookie named fbs_YOUR_APP_ID. The following PHP example shows you

how to use access this cookie and then customize the generated page based on this information:

<?php

define('YOUR_APP_ID', 'your app id ');define('YOUR_APP_SECRET', 'your app secret');

function get_facebook_cookie($app_id, $app_secret) {$args = array();parse_str(trim($_COOKIE['fbs_' . $app_id], '\\"'), $args);ksort($args);$payload = '';foreach ($args as $key => $value) {

if ($key != 'sig') {$payload .= $key . '=' . $value;

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

return null;}return $args;

}

$cookie = get_facebook_cookie(YOUR_APP_ID, YOUR_APP_SECRET);

$user = json_decode(file_get_contents('https://graph.facebook.com/me?access_token=' .$cookie['access_token']));

?><html>

<body><?php if ($cookie) { ?>

Welcome <?= $user->name ?><?php } else { ?>

<fb:login-button></fb:login-button><?php } ?><div id="fb-root"></div><script>


appId : '<?= YOUR_APP_ID ?>',status : true,cookie : true,xfbml : true,oauth : true,

});

FB.Event.subscribe('auth.login', function(response) {window.location.reload();

});};



</body></html>

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

Analytics

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


Insights provides reports broken down by domain and by app. These reports include rich data about users sharing contentfrom your site within Facebook and other Facebook-enabled apps no matter where those activity originated. For example,if a user puts a URL from your site into a Facebook status message, that data is included in the analytics for your domain.

The data from Insights is also available in the Graph API so you can integrate the Facebook analytics data with your own,in-house analytics systems.

If you use an external analytics system, there are a couple of steps you can take to ensure proper counts for page hits onyour domain. First, exclude requests with a user agent matching facebookexternalhit/*. This user agent is used by

the Facebook Open Graph tools to retrieve your og meta tags. Second, track clicks from plugins embedded on your site

separately from clicks with a facebook.com referrer. Social Plugins with have a referral URL matchinghttp://www.facebook.com/plugins/*.

Next Steps

This was a quick survey of the major features available to your website from Facebook Platform. Our core conceptsdocuments provide deeper insight into the various pieces of Facebook Platform. The Graph API is a great place to start. Ifyou are looking for a real world examples to help you get started building please see our Samples. If you are looking forinspiration, check out our Showcase.

Diperbarui pada hari Senin


Kirim 160.777orang

Getting Started

Websites

Apps on Facebook

Mobile

Samples & How-Tos

Videos

Core Concepts

Advanced Topics

SDKs & Tools

Open Graph Beta

Tutorials

Canvas Tutorial

Page Tab Tutorial

Core APIs

Achievements

Scores

Requests

Apps on Facebook.comGetting Started › Apps on Facebook.com

Building an app on Facebook gives you the opportunity to deeply integrate into the core Facebook experience. Your appcan integrate with many aspects of Facebook.com, including the News Feed and Notifications. All of the core FacebookPlatform technologies, such as Social Plugins, the Graph API and Platform Dialogs are available to Apps on Facebook.

In this document we will explain the following concepts:

Canvas Page: The Page in which your app is loaded.Social Channels: The key channels that help you grow your user base and re-engage existing users.Analytics: Accessing analytics for your application.

If you wish to start building an App on Facebook now, please refer to our getting started tutorial. If you want to build anapp to add to the tab of a Facebook Page then you should refer to Page Tabs.

Canvas Page

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

Canvas for your app

Apps on Facebook are loaded into a Canvas Page. A Canvas Page is quite literally a blank canvas within Facebook on whichto run your app. You populate the Canvas Page by providing a Canvas URL that contains the HTML, JavaScript and CSSthat make up your app. When a user requests the Canvas Page, we load the Canvas URL within an iframe on that page.

This results in your app being displayed within the standard Facebook chrome.

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

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

Bookmarks for quick re-engagement

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


corner.

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

Real-time social app activity

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

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

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

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

Discovery stories

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

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

Game stories

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

The achievements API allows you to publish stories about the user and their friends achieving a set of achievements youdefine for your app. The scores API allows you to publish stories about the user and their friends passing each others'scores in your app as well as High Score stories when the user earns a new high score. The user needs to grant your appwith the publish_actions permission before you can publish a user's scores and achievements.

User control

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

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

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

Social Channels

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

Bookmarks

Bookmarks enable users to easily navigate back to your app from within Facebook. Bookmarks are automatically added foryour app after the user engages with your apps. The bookmark will appear on left column of the homepage as well as onthe top right of a Canvas Page. Users can add a bookmark to 'favorite' which pins them to the top. Bookmarks also show acounter next to them which represents the number of outstanding requests for the user for your app. The more link next

to the app bookmarks takes the user to the app dashboard which shows the outstanding app requests as well as the fulllist of apps the user has authenticated.

Notifications

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

Requests are a great way to enable users to invite their friends to your application. You can also use requests to have auser 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. Theserequests update the bookmark count for the recipient.

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

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

News Feed stories

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

Discovery stories

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

Publishing stories

In addition you can publish content to the stream using the Feed Dialog. You can prompt users to publish stories aboutwhat they are doing in your app. If a user chooses to publish, the story will appear on the user’s profile and may appear tothe user’s friends’ News Feeds. Stories published from your app will include a link to your app, and can optionally include arich attachment. You can learn more about how to enable users to publish stories from your app in our getting startedtutorial.

Search

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

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

Analytics

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


what user actions contribute to active user count, demographics on authorized users and active users, and the number oftimes permissions are prompted and granted.

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

You can access Insights for your app directly through the Insights Dashboard or by selecting your app in the Developer appand clicking the “insights" link.

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

Param Description

fb_source Source of the referral for example canvas_ticker

fb_action_type type of action for example game.plays.

fb_ticker_mod ticker module, for example now_playing, leaderboard_passing, now_using,

achievement_landing

Next Steps

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

Diperbarui hari Kamis lalu


Kirim FajarSani

Getting Started

Websites

Apps on Facebook

Mobile

Samples & How-Tos

Videos

Core Concepts

Advanced Topics

SDKs & Tools

Open Graph Beta

Getting Started

Mobile Distribution

Mobile Web

Mobile Web Tutorial

iOS

iOS Tutorial

iOS SDK

Android

Android Tutorial

Android SDK

Hackbook for Android

MobileGetting Started › Mobile

Over 350 million users access Facebook from a mobile device every month. Facebook Platformlets you bring these users and their friends to your mobile apps, creating a more engaging andpersonalized experience for your users.

Seamless Social Experiences

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

Distribution. Users can share with their friends using Requests, News Feed, and Open Graph.Engagement. Bring users back to your app through a bookmark or search. Keep them there by letting themconnect with their friends.Cross-platform. The same Javascript SDK works across web and mobile, so it's easy to build one experience thatworks across multiple devices.

Login

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

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

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

Social Channels

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

All of the screenshots below illustrate a Mobile Web App integration running on iPhone. To understand the availability of

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


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

Requests

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

Timeline and Open Graph

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

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

News Feed

When users log into Facebook, the News Feed is the first thing they see, making it core to the Facebook experience. Thescreenshots below show you how a user can post to their own wall, which will appear in their friends' News Feeds.



Bookmarks

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

Search

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

Social Plugins

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

Email

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




Payments

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

See our Credits API doc for information on how to integrate Credits into your mobile web app. Credits is not supportedwithin iOS native apps or web apps running within the Facebook iOS app.

Building Mobile Web Apps

Get maximum distribution by integratingsocial into your mobile web app across all iOSand Android phones and tablets. It will evenrun in the Facebook iOS native app.

You can also ship it in native app stores byusing the PhoneGap Facebook plugin.

Check out some of the great mobileexperiences that developers have built usingFacebook Platform.

Click here to get started.

Building iOS Native Apps

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


Building Android Native Apps

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


Diperbarui sekitar 2 bulan yang lalu

Kirim 17.167orang

Getting Started

Websites

Apps on Facebook

Mobile

Samples & How-Tos

Videos

Core Concepts

Advanced Topics

SDKs & Tools

Open Graph Beta

Samples

Sample Canvas App

Samples & How-TosGetting Started › Samples & How-Tos

Social Plugins

winefriendsDownload | Run

This sample outlines how to build a social website with the following features: Like Button,Activity Feed, Recommendations, CommentsBox and Open Graph Protocol.

Canvas

Run with FriendsOverview | Download | Run

This sample outlines how to build a FacebookCanvas Application with the following features:JavaScript SDK, Social Plugin (Login withFaces), Platform Dialogs, Graph API usingOAuth 2.0 and Real-time Updates

Insights

Export Insights DataDownload

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

Credits



Credits Sample AppDownload

This sample demonstrates how to use Creditswith your Facebook Applications. Read theCredits API documentation to learn more.

How-Tos

How-To: Use the Graph API to pull the movies friends likeHow-To: Paging with the Graph API and FQLHow-To: Publish updates to people who like your Open Graph PageHow-To: Implement Facebook CreditsHow-To: Use the Graph API to Upload Photos to a user’s profileHow-To: Handle expired access tokensHow-To: How to upload a video to user's profileHow-To: Use the Graph API to upload a video to a Group, Page or ApplicationHow-To: Use the Graph API to access, add or update tags to a picture. Also see how-to get video upload limits for a userHow-To: Use the Graph API to Upload a Video (iOS)How-To: Optimize Social Plugin PerformanceHow-To: Build an app on Facebook with Fluid CanvasHow-To: Use the Graph API to Manage EventsHow-To: Handle Revoked Auth Permissions



Kirim 8.752orang

VideosGetting Started › Videos

Mobile Hack (October 28, 2011)

Social Discovery on Mobile

Bringing Social Channels to Mobile

Partner Presentations: Wooga & AudioVroom

Partner Presentation: PhoneGap

Getting Started

Websites

Apps on Facebook

Mobile

Samples & How-Tos

Videos

Core Concepts

Advanced Topics

SDKs & Tools

Open Graph Beta


Open Graph and Mobile Native

Q&A

f8 Hack (September 23, 2011)

Overview and Demo of New Developer Tools

Open Graph Deep-Dive

Games on the Open Graph

Open Graph and Mobile

Facebook Platform for Marketers (August 8, 2011)

Open Graph Protocol

Value of the Like Button

Presentation: PDF

Social Design: A Definition

Presentation: PDF

Social Channels: Driving traffic to your app

Presentation: PDF Code: Zip

Authentication: An Overview

Presentation: PDF

Mobile Single Sign-On

Presentation: PDF Code: iOS demo

Graph API

Presentation: PDF Code: Graph API explorer

Insights: Understanding your users

Presentation: PDF

Making Euros: Ads and Credits

Presentation: PDF Code: Credits sample app

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta


Core Concepts

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

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

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

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

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

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



Kirim 38.032orang


1. Utilizing Community

Facebook profile data can be used topersonalize the user experience inyour app so that it feels familiar,relevant and trusted by default.

2. Building Conversations

Build tools and experiences that givepeople the power to connect andshare, allowing them to effectivelylisten and learn from each other.

3. Curating Identity

Users share and interact with othersbecause self expression feels good andrewarding. Help them learn moreabout themselves and curate theiridentity.

Social DesignCore Concepts › Social Design

Social Design is a way of thinking about product design that puts socialexperiences at the core. Create these social experiences with the featuresavailable on Facebook Platform.

Three Elements of Social Design

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

Community refers to the people we know and trust and who help us make decisions.Conversation refers to the various interactions we have with our communities.Identity refers to our own sense of self and how we are seen by our communities.

From our experience building Facebook and helping partner companies think about socialdesign, we've put this document together to try to explain how we think about social designand some patterns and best practices we've observed.

Modeling a Social Experience

One way to model a social product is by working from the inside out: allow people to createan identity, let them share it and build a community over time. Facebook began this way.However, if community is already curated, as it is via Facebook Platform, you can insteadwork from the outside in: utilize the existing community users have built, define newconversations and let them continue to build their identities further. Facebook Platform makes it easy to take the "outsidein" approach.

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



Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Guidelines

Utilizing Community

Building Conversation

Curating Identity

Kirim 26.605orang


Utilizing CommunityCore Concepts › Social Design › Utilizing Community

Communities feel familiar, relevant and trusted by default. Surface users' interests and theirfriends in your app to create personalized user experiences.

Start by implementing Facebook Authentication which enables a user to authorize your app to access profile information.You can ask for specific pieces of data about the user by requesting permissions relevant to your app.

Suggest Relevant Content

Utilize Facebook profile data in your app. If usersgrant the required set of permissions, you can utilizethe Graph API to access users' likes, interests,activities, movies and more to recommend contentin your app. In addition you can also access theirfriends' likes to suggest content they may beinterested in. Users have spent a lot of time curatingtheir Facebook profiles, so using that informationeffectively can drastically enhance their experience,provided you clearly communicate how you areusing it.

Both Rotten Tomatoes and Airbnb, for example, useprofile information and connections to enhance theuser experience, offering users personalized and valuable information.

Connect Friends

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

When users connect their Spotify accounts to Facebook, for example, an additionalpanel automatically displays their friends, allowing them to see friends' playlists,favorite songs and listening history. You can use the Graph API to easily accessusers' friends.

Show Social Context

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

Facebook uses a variety of methods to show context about a person,such as mutual friends, school and/or location, both inline and inhover cards. The Comments Plugin, for example, displays profile information about the people writing the comments.

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Guidelines

Utilizing Community


Curating Identity


Next: Building Conversation »


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

Be Transparent and Give Users Control

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

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

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

« Previously: Social Design Overview



Kirim 1.152orang

Building ConversationCore Concepts › Social Design › Building Conversation

Conversations are how people express their identities to communities and how they receivefeedback from them. Build experiences that give people the power to connect and share.

An effective conversation is based in two experiences:

1. "Listening" : Displaying personalized content, social context and user activity2. "Speaking" : Making it easy for users to talk, share, give feedback and engage

Listening and speaking create a positive feedback loop that, if done right, grows exponentially.

Listening

Users are encouraged to participate when they can listen to and watch other active users on your site. On Clicker, forexample, users can see the shows that their friends have watched along with recommendations based on friend activity.Many sites like EventBrite or TripAdvisor rely on reviews from people to help with decision-making. When you can useinformation from the Facebook social graph to highlight content from friends, this can be even more powerful.

Showing a history of activity (highlighting friend activity) is an effective way to generate interest and conversation. Userswill 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 aneffective and natural way to inform and engage other users.

Our social plugins - specifically the Activity Feed andRecommendations plugin - are simple ways to allow a user to easilysee their friends' activity on your site, when paired with the LikeButton.

The Like Button lets people express what they like on their profileand with their friends on Facebook. Because other users see whatfriends like and, more importantly, because they trust their friends,they are more likely to care about the content.

A number of websites are already using these social plugins toshowcase the actions that users take on their site. For SportingNews, it's a great way to see the articles most popular amongstfriends. For Rdio, it's a great way to discover new music.

Provide Notifications

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

Speaking and Sharing

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

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Guidelines

Utilizing Community


Curating Identity


Focus the Conversation

Rather than build tools for conversation aroundanything, it's advantageous to decide the core theme ofyour app and build tools to focus conversation aroundthat. For example, if you were creating a social cookingapp, you might want users to specifically share:

RecipesPhotos of dishes they’ve madeFavorite ingredientsCooking techniques

Great social apps get users to engage in interesting waysabout things they care about. The easier, more fun anduseful a sharing interface can be, the more likely a user will contribute.

Reduce Sharing Friction

Simple actions taken by users can initiate conversations. Placing the LikeButton on your website is a simple and effective way to get users toengage and start sharing. The Send Button similarly allows users toshare with a smaller set of friends. Apps can use any number of thesequick actions to involve users. In aggregate and over time, these simpleinteractions can provide a more complex and meaningful data set aroundwhich you can build conversation.

Encourage Feedback

Users are far more likely to start engaging with your appby responding to content created by their friends thanthey are likely to create their own. Because of this, usersshould be able to interact with nearly every piece ofcontent in your app, for every piece of content can be itsown conversation topic.

The Comments Plugin is an easy and effective tool thatyou can integrate into your site to enable friends to easilygive feedback on content created on your site. All of theactivity in the plugin will be surfaced to users’ friendsthrough various social channels on Facebook. This buildsan effective listening experience that prompts moreconversation.

Encourage Sharing

When conversation is directed, it becomes more personal.You can use the Graph API to enable users to tag friends inphotos or posts which enables sharing directly with them.This is an effective way to involve friends in the sharingexperience, prompting them to interact more.

In Spotify, for example, users can send songs to specificfriends or post to their own walls and share with everyone.

In our experience, we have found that the rate of sharingand feedback is dramatically impacted by how easy andintuitive it is to share. Think carefully about your sharinginterfaces and make them as simple as possible.

Share Outside Too

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

Next: Curating Identity »


Enable users to post to Facebook using the Feed Dialog. You can also use the Request Dialog to enable users to invitespecific 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 whiledeepening conversations.

« Previously: Utilizing Community



Kirim 894orang

Curating IdentityCore Concepts › Social Design › Curating Identity

Social Design plays to the most powerful form of motivation: the self. People share and interactwith communities because they want to, because they learn more about themselves and enjoyfeeling known by their community.

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

Be Context-Relevant

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

For example, in the social cooking app, a profile could consist of:

A shareable and organized list of recipes users have createdA shareable photo album of all the dishes they’ve createdA space to house a list of their favorite ingredients with their own descriptions and reviewsShared articles on cooking they’ve found interesting or useful

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

Curate Content

Users should feel that the content they contribute is theirsand that you provide them a place to house it. If you’reasking users to contribute thoughts, photos and othercontent, they should be able to keep a record of thisactivity. Your app should use their input to organizecontent intelligently for them.

Facebook organizes a user's interests into a clean,structured interface. Use the Graph API to let users uploadphotos and videos from your app to share on Facebook.Last.fm compiles your listening history and favorite songsinto an easy-to-read interface as well.

Tell Stories

People want to share experiences they haveeverywhere - not just on Facebook. Part ofwhat builds identity is the storytelling of theseexperiences. Although displaying a history ofuser activity and posts to their wall helps, it'snot the full picture. Use the Like button withOpen Graph tags to enable users to share likesand interests from your app. By allowing usersto like objects in your app, those experiencesare integrated into their Facebook profile andshared with friends.

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Guidelines

Utilizing Community


Curating Identity


Next: Social Design Showcase »


Highlight Interesting Information

Part of what makes building a useful profile is notsimply presenting the data, but additionally analyzingit to tell users something they don't know aboutthemselves. For example, Spotify informs users oftheir top tracks and top artists. In a social moviesapp, you may highlight the user's most-viewed actorsor genres. In a social cooking app, you may want tohighlight what ingredients a user uses most of the

time.

« Previously: Building Conversation



Kirim 498orang

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Activity Feed

Comments

Facepile

Like Box

Like Button

Live Stream

Login Button

Page title

Recommendations

Registration

Send Button

Subscribe Button

Beta Plugins

Activity Feed (Beta)

Add To Timeline (Beta)

Facepile (Beta)

Recommendations Bar

(Beta)

Recommendations Box

(Beta)

Social PluginsCore Concepts › Social Plugins

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

Like ButtonThe Like button lets users share pages from your site back to their Facebook profile with oneclick.

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

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

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

Activity FeedThe Activity Feed plugin shows users what their friends are doing on your site through likes andcomments.

RecommendationsThe Recommendations plugin gives users personalized suggestions for pages on your site theymight like.

Like BoxThe Like Box enables users to like your Facebook Page and view its stream directly from yourwebsite.

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

RegistrationThe registration plugin allows users to easily sign up for your website with their Facebookaccount.

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

Live Stream



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

Diperbarui hari Jumat yang lalu


Kirim 856.937orang

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Activity Feed

Comments

Facepile

Like Box

Like Button

Live Stream

Login Button

Page title

Recommendations

Registration

Send Button

Subscribe Button

Beta Plugins



Facepile (Beta)

Recommendations Bar

(Beta)

Recommendations Box

(Beta)

URL to Like

Send Button (XFBML Only)

Send Button

Layout Style

Width

450

Show Faces

Show faces

Verb to display

Color Scheme

Font

Get Code

Like ButtonCore Concepts › Social Plugins › Like Button

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

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

There are two Like button implementations: XFBML and Iframe. The XFBML (also available in HTML5-compliant markup)version is more versatile, but requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according towhether there are profile pictures to display, gives you the ability (through the Javascript library) to listen for like eventsso that you know in real time when a user clicks the Like button, and it always gives the user the ability to add anoptional comment to the like. If users do add a comment, the story published back to Facebook is given more prominence.

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

Step 1 - Get Like Button Code

Attributes

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

send - specifies whether to include a Send button with the Like button. This only works with the XFBML version.

layout - there are three options.

standard - displays social text to the right of the button and friends' profile photos below. Minimum width:

225 pixels. Minimum increases by 40px if action is 'recommend' by and increases by 60px if send is 'true'.Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).button_count - displays the total number of likes to the right of the button. Minimum width: 90 pixels.

(?)

(?)

(?)

standard

(?)

(?)

(?)

like

(?)

light

(?)

Kirim 70.932orang


Title

Type

URL

Image

Site name

Admin

1217658662

Get Tags

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

55 pixels. Height: 65 pixels.

show_faces - specifies whether to display profile photos below the button (standard layout only)

width - the width of the Like button.

action - the verb to display on the button. Options: 'like', 'recommend'

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

'verdana'colorscheme - the color scheme for the like button. Options: 'light', 'dark'

ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and

some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URLwhen a user clicks a link from a stream story about a Like action:

fb_ref - the ref parameter

fb_source - the stream type ('home', 'profile', 'search', 'other') in which the click occurred and the story type

('oneline' or 'multiline'), concatenated with an underscore.

Step 2 - Get Open Graph Tags

Open Graph Tags

Open Graph tags are <meta> tags that you add to the <head> of your website to describe the entity your page

represents, whether it is a band, restaurant, blog, or something else.

An Open Graph tag looks like this:

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

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

og:title - The title of the entity.

og:type - The type of entity. You must select a type from the list of Open Graph types.

og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square

images work best, but you are allowed to use images up to three times as wide as they are tall.og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the

Like button posts a link to the og:url instead of the URL in the Like button code.og:site_name - A human-readable name for your site, e.g., "IMDb".

fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a

Facebook Platform application ID. At a minimum, include only your own Facebook ID.

More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocoldocumentation .

(?)

(?)

(?)

(?)

(?)

(?)

FAQ

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

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

When will users have the option to add a comment to the like?

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

What analytics are available about the Like button?

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

Can I link the Like button to my Facebook page?

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

What is the best way to know which Like button on my page generated the traffic?

Add the 'ref' parameter to the plugin (see "Attributes" above).

Examples:

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

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

http://www.facebook.com/l.php?fb_ref=top_left&fb_source=profile_oneline

Aggregated stream stories contain all ref parameters, concatenated with commas.

When does Facebook scrape my page?

Facebook needs to scrape your page to know how to display it around the site.

Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when anadmin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook URL Linter.Facebook observes cache headers on your URLs - it will look at "Expires" and "Cache-Control" in order of preference.However, even if you specify a longer time, Facebook will scrape your page every 24 hours.

The user agent of the scraper is: "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"

How do I display the Like button in different languages?

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

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

If you are using the Iframe version include a locale parameter with the proper country code in the src URL. Example:

src="http://www.facebook.com/plugins/like.php?locale=fr_FR&..."

You may need to adjust the width of the Like button to accommodate different languages.

What makes up the number shown on my Like button?

The number shown is the sum of:

The number of likes of this URLThe number of shares of this URL (this includes copy/pasting a link back to Facebook)The number of likes and comments on stories on Facebook about this URL


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

What happened to the old Share button?

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

When I click the Like button, the popup window (or "flyout") doesn't show. Why?

If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may

be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow

property to a value other than hidden, such as visible, scroll, or auto.

Diperbarui 2 minggu yang lalu


Kirim IoyyRanjauu

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Activity Feed

Comments

Facepile

Like Box

Like Button

Live Stream

Login Button

Page title

Recommendations

Registration

Send Button

Subscribe Button

Beta Plugins



Facepile (Beta)

Recommendations Bar

(Beta)

Recommendations Box

(Beta)

URL to Send

example.com

Font

Color Scheme

Get Code

Send ButtonCore 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 amessage to their Facebook friends, to the group wall of one of their Facebook groups, and as an email to any emailaddress. While the Like Button allows users to share content with all of their friends, the Send Button allows them to senda private message to just a few friends.

The message will include a link to the URL specified in the send button, along with a title, image, and short description ofthe link. You can specify what is shown for the title, image, and description by using Open Graph meta tags.

The Send button requires the JavaScript SDK.

Get a combined Like and Send button

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

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

Get a Send button

Attributes

href - the URL to send.

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

'verdana'colorscheme - the color scheme for the button. Options: 'light', 'dark'


some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URLwhen a user clicks a link from a stream story about a Send action:

fb_ref - the ref parameter

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

FAQ

How do I know when someone sends a message from the plugin?

If you use the XFBML version you can subscribe to the 'message.send' event through FB.Event.subscribe.

How do I display the Send button in different languages?

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

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

What analytics are available about the Send button?

(?)

(?)

(?)

light

Kirim



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

What is the best way to know which Send button on my page generated the traffic?


Examples:

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

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

http://www.yoursite.com/home?fb_ref=top_left&fb_source=message

Aggregated stream stories contain all ref parameters, concatenated with commas.

When I click the Send button, the popup window (or "flyout") doesn't show. Why?

If the Send button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout

may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow

property to a value other than hidden, such as visible, scroll, or auto.



Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Activity Feed

Comments

Facepile

Like Box

Like Button

Live Stream

Login Button

Page title

Recommendations

Registration

Send Button

Subscribe Button

Beta Plugins



Facepile (Beta)

Recommendations Bar

(Beta)

Recommendations Box

(Beta)

Profile URL

https://www.facebook.com/zuck

Layout Style

Show Faces

Show faces

Color Scheme

Font

Width

450

Get Code


Subscribe ButtonCore Concepts › Social Plugins › Subscribe Button

The Subscribe button lets a user subscribe to your public updates on Facebook.

There are two Subscribe button implementations: XFBML and Iframe. The XFBML (also available in HTML5-compliantmarkup) version is more versatile, and requires use of the JavaScript SDK. The XFBML dynamically re-sizes its heightaccording to whether there are profile pictures to display and gives you the ability (through the JavaScript library) to listenfor subscribe events so that you know in real time when a user clicks the Subscribe button.

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

Get Your Subscribe Button Code

Attributes

href - profile URL of the user to subscribe to. This must be a facebook.com profile URL.

layout - there are three options.

standard - displays social text to the right of the button and friends' profile photos below. Minimum width:

225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).button_count - displays the total number of subscribers to the right of the button. Minimum width: 90

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

width: 55 pixels. Height: 65 pixels.

show_faces - specifies whether to display profile photos below the button (standard layout only)

colorscheme - the color scheme for the plugin. Options: 'light' (default) and 'dark'

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

'verdana'width - the width of the plugin.



(?)

(?)

standard

(?)

(?)

light

(?)

(?)

Trisna Wanto, Vevi Noviati Larosa dan 10.350.012 lainnyaberlangganan.

Berlangganan

Kirim 1.350orang


Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Activity Feed

Comments

Facepile

Like Box

Like Button

Live Stream

Login Button

Page title

Recommendations

Registration

Send Button

Subscribe Button

Beta Plugins



Facepile (Beta)

Recommendations Bar

(Beta)

Recommendations Box

(Beta)

CommentsCore Concepts › Social Plugins › Comments

Comments Box is a social plugin that enables user commenting on your site. Features include moderation tools anddistribution.

Social Relevance: Comments Box uses social signals to surface the highest quality comments for each user. Commentsare ordered to show users the most relevant comments from friends, friends of friends, and the most liked or activediscussion threads, while comments marked as spam are hidden from view.

Distribution: Comments are easily shared with friends or with people who like your Page on Facebook. If a user leavesthe “Post to Facebook” box checked when she posts a comment, a story appears on her friends’ News Feed indicating thatshe’s made a comment on your website, which will also link back to your site.

Friends and people who like the Page can then respond to the discussion by liking or replying to the comment directly inthe News Feed on Facebook or in the Comments Box on your site. Threads stay synced across Facebook and on theComments Box on your site regardless of where the comment was made.


URL to comment on

http://example.com

Number of posts

2

Width

500

Color Scheme

Get Code

Attributes

href - the URL for this Comments plugin. News feed stories on Facebook will link to this URL.

width - the width of the plugin in pixels. Minimum recommended width: 400px.

(?)

(?)

(?)

(?)

light

Tambahkan komentar

Lihat 29.225 lainnya

29.227 komentar

[email protected](masuk menggunakan Hotmail)

hey guys... I implemented facebook comments on my site, you canhave a look :

http://freemovierepublic.com

btw, its a site to watch movies online for free..

Balas · · Suka · Ikuti Kiriman · 25 Oktober pukul 13:30

Lihat 187 lainnya

459

Sonorita Lopez · Universitas Negeri California, Long Beach

nice one... i just looked at FREEMOVIEREPUBLIC.COMgood implementation there..

Balas · · Suka · 25 Oktober pukul 13:37179

Cynthia Kramer

cool site you got there.Now i know where to watch movies from now on :P


Emma Tyler · San Diego, California

ooooooooohhh Yeeeaaaaahhhhhhhhh !!!!!!!


Mujeres Bellas · · Bekerja di ¡¡Consigue Tráfico WebPerpetuo!! Entrenamiento Gratuito · 18.628 pelanggan

¿A QUIEN LE GUSTA LAS MUJERES COLOMBIANAS?

Balas · · Suka · Ikuti Kiriman · 16 Oktober pukul 4:43

Lihat 188 lainnya

Berlangganan

335

Raul Done · · Presidente di KaarnivorosAsadero Parrillada

soy dominicano y me encantan las colombianas


Berlangganan

26

Juan Antonio Najera · Bekerja di Leize eswiper truck & accontruccion

Ami. Me encantan las colombianas


Julio René Cruz Caal · Profesor di MINEDUC

Aaaaa mi....


colorscheme - the color scheme for the plugin. Options: 'light', 'dark'

num_posts - the number of comments to show by default. Default: 10. Minimum: 1

mobile - (beta) whether to show mobile version. Default: false.

Moderation tools

Admins can choose to make the default for new comments entered either “visible to everyone” or “has limited visibility”on the site (i.e., the comment is only visible to the commenter and their friends), to help mitigate irrelevant content.

Admins can also blacklist words and ban users. If a new comment is published from a banned user or contains a blacklistedword, this comment will automatically have limited visibility.

To moderate, you need to list yourself as an admin. To do this, simply include open graph meta tags on the URL specifiedas the href parameter of the plugin. Include:

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

To add multiple moderators, separate the uids by comma without spaces.

If your site has many comments boxes, we strongly recommend you specify a Facebook app id as the administrator (alladministrators of the app will be able to moderate comments). Doing this enables a moderator interface on Facebookwhere comments from all plugins administered by your app id can be easily moderated together.

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

You can moderate comments from just this plugin inline. If you have specified your app id as the admin, you canmoderate all your plugins at http://developers.facebook.com/tools/comments.

When you implement multiple comments boxes on your site and tie them together using an app_id, the moderationsettings you choose will apply to all your comments boxes. For example, changing the moderation setting to 'has limitedvisibility' will affect all comments boxes under the same app_id. If you need to apply different moderation paradigms indifferent areas of your site, you should use two or more app_ids. You may then apply different moderation settings eachgroup of comments boxes.

FAQ

How do I access the number of comments left of my page?

The fb:comments-count tag will emit the number of comments on your URL in a <span> tag. You can then style this

however appropriate to match your site. For example, to show the number of comments on example.com:.

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

Will emit:

29227 awesome comments

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

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

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

You can also use the comment FQL table.

How do I know when someone comments on my site?

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

What does the grammar filter do?

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


Fix common grammar mistakes (e.g. convert ‘dont' to ‘don’t’)

You can enable the grammar filter from the settings section of the plugin.

How do I access the comments left on my site?

The comments for every URL can be accessed via the graph API. Simply go to: https://graph.facebook.com/comments/?ids={YOUR_URL}.

For example, the comments on this URL can be accessed via: https://graph.facebook.com/comments/?ids=http://developers.facebook.com/docs/reference/plugins/comments.

Sample code for pulling comments can be found on this blog post.

How can I get an SEO boost from the comments left on my site?

The Facebook comments box is rendered in an iframe on your page, and most search engines will not crawl content withinan iframe. However, you can access all the comments left on your site via the graph API as described above. Simply grabthe comments from the API and render them in the body of your page behind the comments box. We recommend youcache the results, as pulling the comments from the graph API on each page load could slow down the rendering time ofthe page.

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

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

How does the blacklisting words work?

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

I have the first version of the Facebook Comments box, how do I upgrade?

If you are using the original version of the Facebook Comments box, just add 'migrated=1' to the <fb:comments> tag,

and the comments box will automatically switch to the new version. In this case, you should not specify the href

parameter, and you must keep the XID parameter the same. Once you migrate, you can access the comments asdescribed above. Note that the moderation tools only work with the newer version of the comments plugin.



Kirim 36.193orang

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Activity Feed

Comments

Facepile

Like Box

Like Button

Live Stream

Login Button

Page title

Recommendations

Registration

Send Button

Subscribe Button

Beta Plugins



Facepile (Beta)

Recommendations Bar

(Beta)

Recommendations Box

(Beta)

Domain

Width

300

Height

300

Header

Show header

Color Scheme

Link Target

Border Color

Font

Recommendations

Show recommendations

Get Code

Activity FeedCore Concepts › Social Plugins › Activity Feed

The Activity Feed plugin displays the most interesting recent activity taking place on your site. Since the content is hostedby Facebook, the plugin can display personalized content whether or not the user has logged into your site. The activityfeed displays stories when users like content on your site, when users share content from your site in Facebook or if theycomment on a page on your site in the Comments box. If a user is logged into Facebook, the plugin will be personalized tohighlight content from their friends. If the user is logged out, the activity feed will show recommendations from acrossyour site, and give the user the option to log in to Facebook.

The plugin is filled with activity from the user's friends. If there isn't enough friend activity to fill the plugin, it is backfilledwith recommendations. If you set the recommendations param to true, the plugin is split in half, showing friends

activity in the top half, and recommendations in the bottom half. If there is not enough friends activity to fill half of theplugin, it will include more recommendations.

You must specify a domain to show activity for. The domain is matched exactly, so a plugin with site=facebook.com wouldnot include activity from developers.facebook.com or www.facebook.com. You can specify multiple domains and the resultswill be mixed together.

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

Attributes

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

width - the width of the plugin in pixels. Default width: 300px.

height - the height of the plugin in pixels. Default height: 300px.

header - specifies whether to show the Facebook header.


(?)

(?)

(?)

(?)

(?)

light

(?)

_blank

(?)

(?)

(?)

Aktivitas Terbaru

Sandi Febriyanto dan Teguh Mafandiberbagi Like Box. · sekitar 4 bulan yang lalu











'verdana'border_color - the border color of the plugin.

recommendations - specifies whether to always show recommendations in the plugin. If recommendations is

set to true, the plugin will display recommendations in the bottom half.

filter - allows you to filter which URLs are shown in the plugin. The plugin will only include URLs which contain

the filter string in the first two path parameters of the URL. If nothing in the first two path parameters of the URLmatches the filter, the URL will not be included. For example, if the 'site' parameter is set to 'www.example.com'and the 'filter' parameter was set to '/section1/section2' then only pages which matched'http://www.example.com/section1/section2/*' would be included in the activity feed section of this plugin. The filterparameter does not apply to any recommendations which may appear in this plugin (see above); Recommendationsare based only on 'site' parameter.linktarget - This specifies the context in which content links are opened. By default all links within the plugin will

open a new window. If you want the content links to open in the same window, you can set this parameter to _top

or _parent. Links to Facebook URLs will always open in a new window.


some punctuation (currently +/=-.:_). Specifying a value for the ref attribute adds the 'fb_ref' parameter to the anylinks back to your site which are clicked from within the plugin. Using different values for the ref parameter fordifferent positions and configurations of this plugin within your pages allows you to track which instances areperforming the best.max_age - the maximum age of a URL to show in the plugin. The default is 0 (we don’t take age into account).

Otherwise the valid values are 1-180, which specifies the number of days. For example, if you specify '7' the pluginwill only show URLs which were created in the past week.

What is the best way to know which plugin on my site generated thetraffic?


Examples:

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

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

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



Kirim FajarSani

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Activity Feed

Comments

Facepile

Like Box

Like Button

Live Stream

Login Button

Page title

Recommendations

Registration

Send Button

Subscribe Button

Beta Plugins



Facepile (Beta)

Recommendations Bar

(Beta)

Recommendations Box

(Beta)

Domain

Width

300

Height

300

Header

Show header

Color Scheme

Link Target

Border Color

Font

Get Code

RecommendationsCore Concepts › Social Plugins › Recommendations

The Recommendations plugin shows personalized recommendations to your users. Since the content is hosted byFacebook, the plugin can display personalized recommendations whether or not the user has logged into your site. Togenerate the recommendations, the plugin considers all the social interactions with URLs from your site. For a logged inFacebook user, the plugin will give preference to and highlight objects her friends have interacted with.

You must specify a domain for which to show recommendations. The domain is matched exactly, so a plugin withsite=facebook.com would not include activity from developers.facebook.com or www.facebook.com. You can specifymultiple domains and the results will be mixed together.

The plugin is available either via a simple iframe you can drop into your page or by using the JavaScript SDK. With the SDKyou can use the <fb:recommendations> XFBML tag or <div class="fb-recommendations"> if you prefer HTML.

Attributes

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

domain.width - the width of the plugin in pixels. Default width: 300px.

height - the height of the plugin in pixels. Default height: 300px.

header - specifies whether to show the Facebook header.



'verdana'border_color - the border color of the plugin.

linktarget - This specifies the context in which content links are opened. By default all links within the plugin will

open a new window. If you want the content links to open in the same window, you can set this parameter to _top

or _parent. Links to Facebook URLs will always open in a new window.


some punctuation (currently +/=-.:_). Specifying a value for the ref attribute adds the 'fb_ref' parameter to the anylinks back to your site which are clicked from within the plugin. Using different values for the ref parameter for

(?)

(?)

(?)

(?)

(?)

light

(?)

_blank

(?)

(?)

Saran

Like Box

Sandi Febriyanto, Teguh Mafandi, dan314.897 orang lainnya menyarankan ini.










different positions and configurations of this plugin within your pages allows you to track which instances areperforming the best.max_age - the maximum age of a URL to show in the plugin. The default is 0 (we don’t take age into account).

Otherwise the valid values are 1-180, which specifies the number of days. For example, if you specify '7' the pluginwill only show URLs which were created in the past week.

What is the best way to know which plugin on my site generated thetraffic?


Examples:

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

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

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



Kirim FajarSani

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Activity Feed

Comments

Facepile

Like Box

Like Button

Live Stream

Login Button

Page title

Recommendations

Registration

Send Button

Subscribe Button

Beta Plugins



Facepile (Beta)

Recommendations Bar

(Beta)

Recommendations Box

(Beta)

Facebook Page URL

http://www.facebook.com/platform

Width

292

Height

Color Scheme

Show Faces

Show Faces

Border Color

Stream

Show stream

Header

Show header

Get Code

Like BoxCore 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. TheLike Box enables users to:

See how many users already like this Page, and which of their friends like it tooRead recent posts from the PageLike the Page with one click, without needing to visit the Page

The minimum supported plugin width is 292px.

Attributes

href - the URL of the Facebook Page for this Like Box


height - the height of the plugin in pixels. The default height varies based on number of faces to display, and

whether the stream is displayed. With the stream displayed, and 10 faces the default height is 556px. With nofaces, and no stream the default height is 63px.colorscheme - the color scheme for the plugin. Options: 'light', 'dark'

show_faces - specifies whether or not to display profile photos in the plugin. Default value: true.

stream - specifies whether to display a stream of the latest posts from the Page's wall

header - specifies whether to display the Facebook header at the top of the plugin.

border_color - the border color of the plugin.

force_wall - for Places, specifies whether the stream contains posts from the Place's wall or just checkins from

friends. Default value: false.

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

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

(?)

(?)

(?)

(?)

light

(?)

(?)

(?)

(?)

Temukan kami di Facebook

Muhammad Umar Muhammad Ahmad Rado

Danang Sandi Scouter Jos Sandi Ahrn

Facebook Platform

3,621,354 orang menyukai Facebook Platform.

Suka

Facebook Platform

PromotionsGuidelinesTraining

Durasi: 4:10

5 jam yang lalu

Facebook Platform

PlatformPolicies



Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Activity Feed

Comments

Facepile

Like Box

Like Button

Live Stream

Login Button

Page title

Recommendations

Registration

Send Button

Subscribe Button

Beta Plugins



Facepile (Beta)

Recommendations Bar

(Beta)

Recommendations Box

(Beta)

Show faces

Show faces

Width

200

Max Rows

1

Get Code


Login ButtonCore 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 loginbutton.

You can specify the maximum number of rows of faces to display. The plugin dynamically sizes its height; for example, ifyou specify a maximum of four rows of faces, and there are only enough friends to fill two rows, the height of the pluginwill be only what is needed for two rows of faces.

Using the new JavaScript SDK, the plugin is available via the <fb:login-button> XFBML tag or the <div class="fb-

login-button"> HTML tag.

Note: If the user is already logged in, no login button is shown.

Attributes

show-faces - specifies whether to show faces underneath the Login button.


max-rows - the maximum number of rows of profile pictures to display. Default value: 1.

scope - a comma separated list of extended permissions. By default the Login button prompts users for their public

information. If your application needs to access other parts of the user's profile that may be private, your applicationcan request extended permissions. A complete list of extended permissions can be found here.



(?)

(?)

(?)

Masuk

Erik Pratama menggunakanDeveloper Site.

Kirim 22.173orang


Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Registration

Registration Advanced

Uses

User Registration Flows

Beta Plugins

RegistrationCore Concepts › Social Plugins › Registration

Introduction

The Registration plugin allows users to easily sign up for your website with their Facebook account. The plugin is a simpleiframe that you can drop into your page. When logged into Facebook, users see a form that is pre-filled with theirFacebook information where appropriate.

The registration plugin gives you the flexibility to ask for additional information which is not available through theFacebook API (e.g. favorite movie). The plugin also allows users who do not have a Facebook account, or do not wish tosign up for your site using Facebook to use the same form as those who are connecting with Facebook. This eliminates theneed to provide two separate login experiences.

Example

Mendaftar 1 teman telah mendaftar.

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

Nama dan Informasi Publik:

Tanggal Lahir: 15 Mei

1986

Jenis Kelamin: Laki-laki

Lokasi Sekarang:

Alamat Email: [email protected]

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

Ramdhan Hidayat832 teman

Lombok, Nusa Tenggara Barat, Indon

<iframe src="https://www.facebook.com/plugins/registration.php?client_id=113869198637480&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fecho%2F&fields=name,birthday,gender,location,email"

scrolling="auto"frameborder="no"style="border:none"allowTransparency="true"width="100%"height="330">

</iframe>

Attributes

Attribute Description

client_id Your App ID.

redirect_uri The URI that will process the signed_request. It must be prefixed by your Site URL.

fields Comma separated list of Named Fields, or JSON of Custom Fields.

fb_only Optional. (boolean) Only allow users to register by linking their Facebook profile. Use this if you do nothave your own registration system. Default: false.

fb_register Optional. (boolean) Allow users to register for Facebook during the registration process. Use this if youdo not have your own registration system. Default: false.


width Optional. (int) The width of the iframe in pixels. If the width is < 520 the plugin will render in a smalllayout.

border_color Optional. The border color of the plugin.

target Optional. The target of the form submission: _top (default), _parent, or _self.

Named Fields

Specify these in the order you want them to appear in the form. The name field must always be the first field.

Fieldtype

Description

name Full name of the user

birthday Returned as mm/dd/yyyy

email Email address of user (if the user registers with her Facebook account, this will be a verified emailaddress)

gender Gender of user

location Name and ID of the user's current city

password A newly created password (not their Facebook password)

captcha A test to stop automatic registration

Less common fields:

Field type Description

first_name The first name of the user. Useful with view=not_prefilled.

last_name The last name of the user.

Custom Fields

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

Which has fields set to

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

]

fields is a JSON Array of Objects. Any built in fields only have a name field. Custom fields have:

Name Description

name The name on the HTML <input> element. This will be the name of the attribute when you decode the

signed_request.

description The label to show the user.

type The field type. Supported values are text, date, select, checkbox, typeahead, and hidden.

view When to show this field. There are two views: prefilled and not_prefilled. prefilled means the

user is registering using her Facebook account, not_prefilled means the user is not registering with

her Facebook account. This parameter is useful if, for example, you only require a password for users not


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

Nama dan Informasi Publik:


Lokasi Sekarang:



1986

Kata Sandi Developer Site:

Masukkan Ulang Kata Sandi:

Do you like this plugin?:

Phone Number:

Anniversary: Tanggal: Bulan:

Tahun:

Best Captain: Pilih Satu:

Which side?: Sith

Best Place to Live:

Security Check:

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



registering using their Facebook account. Default: Display this field in both views.

Some attributes only apply to fields of a certain type:

Name Description

options For type:select. An object of "submit value" to "user description ".

categories For type:typeahead. An array of Open Graph protocol types that are valid for this field.

default For type:select and type:checkbox. Contains the key to select by default instead of showing "Select

on" for type:select. Contains the word checked to make a type:checkbox checked by default.

There are advanced features if you are asking for custom fields, including custom client side validation, async validation,and a no_submit feature if you don't want to pass fields through Facebook.

XFBML

There is also an XFBML tag for use with the Javascript SDK. It will resize the iframe fluidly as its size changes.

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

<fb:registrationfields="name,birthday,gender,location,email"redirect-uri="https://developers.facebook.com/tools/echo/"width="530">

</fb:registration>

Login + Registration Flows

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

Daftar

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

If the user arrives at your site logged out of Facebook, the button will say Login. When the user clicks it, she will beprompted to enter her Facebook username and password. If she has not registered for your site, she will be redirected tothe URL you specify in the registration-url parameter. If she has already registered for your site, the button will fire

an onlogin() Javascript event. When this event is fired you should login the user to your site.

If the user arrives logged into Facebook, but has not registered for your site, the button will say Register and clicking itwill take the user to your registration-url.

Lastly, if the user is logged into Facebook and already connected to your application, the button will say Login and won'tdo anything when clicked (but your application should detect this state using the getLoginStatus method and not show


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

Nama dan InformasiPublik:


1986


Lokasi Sekarang:


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



the button).

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

Reading the data

The data is passed to your application as a signed request. The signed_request parameter is a simple way to make sure

that the data you're receiving is the actual data sent by Facebook. It is signed using your application secret which is onlyknown by you and Facebook. If someone were to make a change to the data, the signature would no longer validate asthey wouldn't know your application secret to also update the signature.

Read more about signed requests on the canvas authentication documentation.

The result of decoding the signed_request will be a JSON Object with the following format:

{"oauth_token": "...big long string...","algorithm": "HMAC-SHA256","expires": 1291840400,"issued_at": 1291836800,"registration": {

"name": "Paul Tarjan","email": "[email protected]","location": {

"name": "San Francisco, California","id": 114952118516947

},"gender": "male","birthday": "12/16/1985","like": true,"phone": "555-123-4567","anniversary": "2/14/1998","captain": "K","force": "jedi","live": {

"name": "Denver, Colorado","id": 115590505119035

}},"registration_metadata": {

"fields": "[\n {'name':'name'},\n {'name':'email'},\n {'name':'location'},\n {'n},"user_id": "218471"

}

This format is designed to very closely resemble the output of the Graph API. The signed request includes aregistration_metadata field. You should verify this field exactly matches the field param you specified in the

registration plugin to ensure the data is from your registration form. An example of the importance of checking this field ison the advanced page.

If the user chooses to register without using her Facebook account, the oauth_token, user_id, and expires

parameters will not be included in the signed request.

PHP Example reading signed_request

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


<?phpdefine('FACEBOOK_APP_ID', 'your_app_id');define('FACEBOOK_SECRET', 'your_app_secret');

function parse_signed_request($signed_request, $secret) {list($encoded_sig, $payload) = explode('.', $signed_request, 2);

// decode the data$sig = base64_url_decode($encoded_sig);$data = json_decode(base64_url_decode($payload), true);

if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {error_log('Unknown algorithm. Expected HMAC-SHA256');return null;

}

// check sig$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);if ($sig !== $expected_sig) {

error_log('Bad Signed JSON signature!');return null;

}

return $data;}

function base64_url_decode($input) {return base64_decode(strtr($input, '-_', '+/'));

}

if ($_REQUEST) {echo '<p>signed_request contents:</p>';$response = parse_signed_request($_REQUEST['signed_request'],

FACEBOOK_SECRET);echo '<pre>';print_r($response);echo '</pre>';

} else {echo '$_REQUEST is empty';

}?>



Kirim 3.806orang

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Activity Feed

Comments

Facepile

Like Box

Like Button

Live Stream

Login Button

Page title

Recommendations

Registration

Send Button

Subscribe Button

Beta Plugins



Facepile (Beta)

Recommendations Bar

(Beta)

Recommendations Box

(Beta)

URL

http://example.com

Size

Width

200

Num rows

1

Color Scheme

Get Code

FacepileCore Concepts › Social Plugins › Facepile

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

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

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

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 versionof the plugin, specify your application id when you initialize the Javascript library.max_rows - the maximum number of rows of faces to display. The XFBML version will dynamically size its height; if

you specify a maximum of four rows of faces, but there are only enough friends to fill two rows, the XFBML versionof the plugin will set its height for two rows of faces. Default: 1.width - width of the plugin in pixels. Default width: 200px.

size - size of the photos and social context. Default size: small.

colorscheme - the color scheme for the like button. Options: 'light', 'dark'.

Why is nothing displaying?

The plugin only displays friends photos. If the user does not have friends who have liked your page or have connected toyour 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. Ifsome users have liked your page, but none of the viewing users friends have liked it, the plugin will display the totalnumber 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 pluginwill 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:

(?)

(?)

small

(?)

(?)

(?)

light


Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Plugins

Activity Feed

Comments

Facepile

Like Box

Like Button

Live Stream

Login Button

Page title

Recommendations

Registration

Send Button

Subscribe Button

Beta Plugins



Facepile (Beta)

Recommendations Bar

(Beta)

Recommendations Box

(Beta)

App ID

164266186973440

Width

400

Height

500

XID

Via Attribution URL

Always post to friends

Always post to friends

Get Code


Live StreamCore Concepts › Social Plugins › Live Stream

The Live Stream plugin lets users visiting your site or application share activity and comments in real time. Live Streamworks best when you are running a real-time event, like live streaming video for concerts, speeches, or webcasts, live Webchats, webinars, massively multiplayer games.

The minimum supported plugin width is 400px.



(?)

(?)

(?)

(?)

(?)

(?)

Privasi Keluar

Kirim ke Facebook? Bagikan

Diskusikan acara ini

Jadilah orang pertama yang berbagi pikiran di acara ini

Kirim FajarSani


Getting Started

Core Concepts

Social Design

Social Plugins

Open GraphProtocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

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

Open Graph ProtocolCore Concepts › Open Graph Protocol

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

Getting Started

To turn your web pages into graph objects, you'll need to add Open Graph protocol <meta> tags and the Like button to

your webpages.

The tags allow you to specify structured information about your web pages. The more information you provide, the moreopportunities your web pages can be surfaced within Facebook today and in the future. Here's an example for a moviepage:

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:og="http://ogp.me/ns#"xmlns:fb="https://www.facebook.com/2008/fbml">

<head><title>The Rock (1996)</title><meta property="og:title" content="The Rock"/><meta property="og:type" content="movie"/><meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/><meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/><meta property="og:site_name" content="IMDb"/><meta property="fb:admins" content="USER_ID"/><meta property="og:description"

content="A group of U.S. Marines, under command ofa renegade general, take over Alcatraz andthreaten San Francisco Bay with biologicalweapons."/>

...</head>...

</html>

The Open Graph protocol defines four required properties:

og:title - The title of your object as it should appear within the graph, e.g., "The Rock".

og:type - The type of your object, e.g., "movie". See the complete list of supported types.

og:image - An image URL which should represent your object within the graph. The image must be at least 50px


by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may includemultiple 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. Theog: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 manyog:-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 Likebutton can be simply added with an <iframe>, or you can use the JavaScript SDK for the <fb:like> XFBML tag:

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

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

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

Check your work

There are many tools to ensure you put the <meta> tags correctly on your page.

The official Facebook URL Linter which uses the same code that we use for the Like button and other Open GraphProtocol consumption. Therefore, it gives you the closest possible match as to how we will treat your page when wecrawl 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 Platformapplication. 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 comma-

separated list of the user IDs or usernames of the Facebook accounts who own the page, e.g.:

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

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

Suka 5.630 orang menyukai ini. Jadilah orang pertama di antarateman-teman.

without their consent.

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

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

Editing Meta Tags

You can update the attributes of your page by updating your page's <meta> tags. Note that og:title and og:type are

only editable initially - after your page receives 50 likes the title becomes fixed, and after your page receives 10,000 likesthe type becomes fixed. These properties are fixed to avoid surprising users who have liked the page already. Changing thetitle 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 adminfor the page clicks the Like button or when the URL is entered into the Facebook URL Linter. You can programmaticallyforce 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 aretwo 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 thePublisher, the field at the top of the screen that says "What's on your mind?" The stories appear in the News Feed ofanyone 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 beobtained with

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

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

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

Some sample PHP code to help you get started:

<?php

$ogurl = "INSERT_YOUR_OG_URL_HERE";define(FACEBOOK_APP_ID, "YOUR_APP_ID_HERE");define(FACEBOOK_SECRET, "YOUR_SECRET_KEY_HERE");

$mymessage = "Hello World!";

$access_token_url = "https://graph.facebook.com/oauth/access_token";$parameters = "grant_type=client_credentials&client_id=" . FACEBOOK_APP_ID .

"&client_secret=" . FACEBOOK_SECRET;$access_token = file_get_contents($access_token_url . "?" . $parameters);

$apprequest_url = "https://graph.facebook.com/feed";$parameters = "?" . $access_token . "&message=" .

urlencode($mymessage) . "&id=" . $ogurl . "&method=post";$myurl = $apprequest_url . $parameters;

$result = file_get_contents($myurl);

// output the post idecho "post_id" . $result;}?>

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

Recommended Meta Data

Two common pieces of information many profile pages have are location and contact information. Below are examples ofhow 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 locationvia latitude and longitude, a full address, or both. For example:

<html xmlns:og="http://ogp.me/ns#"><head>

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

</head>

Contact Information

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


...[REQUIRED TAGS]<meta property="og:email" content="[email protected]"/><meta property="og:phone_number" content="650-123-4567"/><meta property="og:fax_number" content="+1-415-123-4567"/>...

</head>

Object types

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

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

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

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

Activities

activity

sport

Businesses

bar

company

cafe

hotel

restaurant

Groups

cause

sports_league

sports_team

Organizations

band

government

non_profit

school

university

People

actor

athlete

author

director

musician

politician

public_figure

Places

city

country

landmark

state_province

Products and Entertainment

album

book

drink

food

game

product

song

movie

tv_show

For products which have a UPC code or ISBN number, you can specify them using the og:upc and og:isbn properties.

These properties help uniquely identify products.

Websites

blog

website

article

Use article for any URL that represents transient content - such as a news article, blog post, photo, video, etc. Do not

use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types

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

If your object does not fit into one of the types above, you can specify your own type. This will be represented as typeother 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 aremoviesite.com, and you want to mark a URL on your site as a director you would do:

<html xmlns:moviesite="http://www.moviesite.com/ns#" ><head>....

<meta property="og:type" content="moviesite:director"/>

Game Achievements

You can also define game achievements using Open Graph metadata and type game.achievement. For more

information about achievements please refer achievements documentation. When creating achievements, you also needto set the game:points property which defines the associated points for the achievement.


...[REQUIRED TAGS]<meta property="og:type" content="game.achievement"/><meta property="game:points" content="POINTS_FOR_ACHIEVEMENT"/>...

</head>

Attaching Audio and Video Data

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

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

If you specify a non-HTTPS url, we will only embed your video for users who are browsing Facebook without HTTPSenabled. 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 youdo not cause the browser to load any non-HTTPS resources, as this will prevent your embedded video from playingcorrectly.

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]<meta property="og:video" content="http://example.com/awesome.swf" /><meta property="og:video:height" content="640" /><meta property="og:video:width" content="385" /><meta property="og:video:type" content="application/x-shockwave-flash" /><meta property="og:video:secure_url"

content="https://secure.example.com/awesome.swf" /><meta property="og:video" content="http://example.com/html5.mp4" /><meta property="og:video:type" content="video/mp4" /><meta property="og:video" content="http://example.com/fallback.vid" /><meta property="og:video:type" content="text/html" />...

</head>

In the above example, Facebook uses the og:video:type to determine how to render the video in the news feed. In

desktop browsers and Flash-enabled mobile browsers, Facebook will render "http://example.com/awesome.swf" (or thesecure alternative) as a Flash video. In Safari on the iPad, Facebook will render "http://example.com/html5.mp4" insidean HTML 5 <video> tag. In browsers which support neither Flash nor HTML 5, Facebook will link to

"http://example.com/fallback.vid" when the video thumbnail is clicked.

In a similar fashion to og:video you can add an audio file to your markup:

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

and optionally

og:audio:title - e.g. "Amazing Soft Rock Ballad"

og:audio:artist - e.g. "Amazing Band"

og:audio:album - e.g. "Amazing Album"

og:audio:type - e.g. "application/mp3"

For example:


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

</head>

Best practices

Make it easy for users to Like things on your site. Place the Like button close to the object they are liking.When publishing, use only the 'voice' of the object. For example, if users are liking an actor in a TV show, that actorshould 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 beunable to verify your Open Graph Tags and properly scrape your page. You should whitelist the Facebook User Agentin order to guarantee we can confirm your Open Graph Tags. The user agent is currentlyfacebookexternalhit/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 anew technology, we've tried to build off of existing open standards to create a more semantically aware web.

Diperbarui 2 minggu yang lalu


Kirim 11.567orang

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Social ChannelsCore Concepts › Social Channels

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

News Feed

The News Feed is shown immediately to users upon logging into Facebook, making it core to the Facebook experience.There are several ways you can publish content to the stream: Feed Dialog, Feed Graph object and Like Button.

Feed Dialog: Prompt Users to Publish

The recommended way to publish to the stream is with the Feed Dialog. Without requiring users to log into yourapplication or grant any special permission, you can prompt users to publish stories about what they are doing in yourapplication. 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:

<html><head>

<title>My Great Website</title></head><body>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><script>

FB.init({appId:'YOUR_APP_ID', cookie:true,status:true, xfbml:true

});

FB.ui({ method: 'feed',message: 'Facebook for Websites is super-cool'});

</script></body>

</html>

When this page is loaded in the user's browser, the JavaScript SDK will render the below dialog that the user can use topost to their feed. Read more about Feed Dialog options including other defaults for the dialog, which the user can thenmodify 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. Youcan 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 willrender the same story as in the example above.

For example, you can publish to a user's wall by issuing a POST request tohttps://graph.facebook.com/<username>/feed:

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

Read the complete documentation on posting and attachments and also the Facebook Platform Policies.

Like button

The Like button lets your users easily share interesting content from your application or website back to Facebook. Likestories 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 FacebookPages. 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 updatesto the user’s News Feed.

There are two Like button implementations: XFBML and Iframe. The XFBML version is more versatile, but requires use ofthe JavaScript SDK.

Requests

Requests are a great way to enable users to invite their friends to your application. Requests integrate with Facebooknotifications 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 giftor 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. Theserequests 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 bookmarkcount to encourage a user to re-engage in the app (e.g., your friend finished her move in a game and it’s now yourturn).

The following HTML/JavaScript example shows how to create a User-generated request:

<html><head><title>My Great Website</title></head><body><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><script>

FB.init({appId:'YOUR_APP_ID', cookie:true,status:true, xfbml:true

});

FB.ui({ method: 'apprequests',message: 'Here is a new Requests dialog...'});

</script></body>

</html>

This example uses the JavaScript SDK to render a Request Form. When the above example is loaded, it results in thefollowing request experience:

If you prefer to have your app send requests directly to the user (an App-generated request), you post a request to theapprequest connection of the User Graph object:

<?php

$app_id = YOUR_APP_ID;$app_secret = YOUR_APP_SECRET;

$token_url = "https://graph.facebook.com/oauth/access_token?" ."client_id=" . $app_id ."&client_secret=" . $app_secret ."&grant_type=client_credentials";

$app_access_token = file_get_contents($token_url);

$user_id = THE_CURRENT_USER_ID;

$apprequest_url ="https://graph.facebook.com/" .$user_id ."/apprequests?message='INSERT_UT8_STRING_MSG'" ."&data='INSERT_STRING_DATA'&" .$app_access_token . "&method=post";

$result = file_get_contents($apprequest_url);echo("App Request sent?", $result);

?>

The message parameter is a UTF-8 string which describes the request. The data parameter is a string which the app canuse to store any relevant data in order to process the request.

Once sent, new requests a user has received are visible as a counter on your application's bookmark and it alsoincrements the counter next to the appropriate Dashboard.

When the user clicks on the bookmark to load your application, we are passed two parameters in the URL querystring:ref and count (i.e. ref=bookmarks&count=1). The ref parameter contains the value "bookmark". The count

parameter will contain the total count set on the bookmark.

When the user accepts your request via the dashboard, we pass the request id that they are acting on via therequest_ids parameter.

A good common practice for Apps on Facebook.com is to detect if a user has any requests pending when your applicationloads and then prompt the user to complete the actions associated with the requests before continuing. This way usersdon't have to process your requests out of the context of your app. You can determining all the pending requests for agiven user by accessing the apprequests connection of the User Object in the Graph API.

The following PHP example demonstrates how to access the pending requests for a user and then delete the requests onceyou have completed any associated actions:

<?php

$app_id = 'YOUR_APP_ID';$app_secret = 'YOUR_APP_SECRET';

$token_url = "https://graph.facebook.com/oauth/access_token?" ."client_id=" . $app_id ."&client_secret=" . $app_secret ."&grant_type=client_credentials";

$access_token = file_get_contents($token_url);

$signed_request = $_REQUEST["signed_request"];list($encoded_sig, $payload) = explode('.', $signed_request, 2);$data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);$user_id = $data["user_id"];

//Get all app requests for user$request_url ="https://graph.facebook.com/" .

$user_id ."/apprequests?" .$access_token;

$requests = file_get_contents($request_url);

//Print all outstanding app requestsecho '<pre>';print_r($requests);echo '</pre>';

//Process and delete app requests$data = json_decode($requests);foreach($data->data as $item) {$id = $item->id;$delete_url = "https://graph.facebook.com/" .$id . "?" . $access_token;

$delete_url = $delete_url . "&method=delete";$result = file_get_contents($delete_url);echo("Requests deleted? " . $result);

}?>

Automatic Channels

To drive more traffic to Facebook Platform applications and websites, in addition to the channels above, we enable somedistribution 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:

BookmarksNotificationsDashboardsUsage StoriesApp Profiles & Search

Bookmarks

Bookmarks enable users to easily navigate back to your application from within Facebook. Bookmarks are automaticallyadded for your application after the user engages with your applications. The bookmark will appear on left column of thehomepage 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 contentrelevant 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 GamesDashboard. Dashboards appear as bookmarked links on Facebook's homepage and shows users outstanding requests, appsthey've recently used and apps their friends have recently used. The Application Directory is also accessible from theDashboard.

Usage Stories

Many actions on Facebook are shared with friends. Similarly, a variety of feed stories may be published to share with usersthe popular applications their friends are using. These stories are typically targeted at people who have not used yourapplication 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 otherPages and user profiles on Facebook, and it includes Wall and Info tabs as well as other configurable tabs. When userssearch 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 profilePage with news about your application.

Diperbarui pada hari Selasa


Kirim 8.083orang

Getting Started

Core Concepts

Social Design

Social Plugins

Open Graph Protocol

Social Channels

Authentication

Graph API

Advanced Topics

SDKs & Tools

Open Graph Beta

Reference

Authenticating Devices

Legacy Canvas Auth

Legacy Connect Auth

Permissions

Re-Authentication

Signed Request

AuthenticationCore Concepts › Authentication

Facebook Platform uses the OAuth 2.0 protocol for authentication and authorization. We support a number of differentOAuth 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 examplesin this document use PHP for server-side programming and HTML/JavaScript for client-side code. These examples are verystraightforward 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 codeflow in the specification) and client-side (known as the implicit flow). The server-side flow is used whenever you need tocall the Graph API from your web server. The client-side flow is used when you need to make calls to the Graph API from aclient, 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: userauthentication, app authorization and app authentication. User authentication ensures that the user is who theysay they are. App authorization ensures that the user knows exactly what data and capabilities they are providing to yourapp. App authentication ensures that the user is giving their information to your app and not someone else. Once thesesteps are complete, your app is issued an user access token that enables you to access the user's information and takeactions on their behalf.

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 ourDeveloper App (the client_id parameter) and the URL that the user's browser will be redirected back to once appauthorization is completed (the redirect_uri parameter). The redirect_uri must be in the path of the Site URL you specifyin 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 theuser. 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 onFacebook. If your app needs more than this basic information to function, you must request specific permissions fromthe user. This is accomplished by adding a scope parameter to the OAuth Dialog request followed by comma separated listof the required permissions. The following example shows how to ask for access to user's email address and their newsfeed:

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 thenumber of permissions your app requests and the number of users that will allow those permissions. The greater thenumber of permissions you ask for, the lower the number of users that will grant them; so we recommend that you onlyrequest 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'sbrowser 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 theURL 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 makeAPI calls.

In order to authenticate your app, you must pass the authorization code and your app secret to the Graph API tokenendpoint - along with the exact same redirect_uri used above - athttps://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 forthese 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 willreturn the access token:

In addition to the access token (the access_token parameter), the response contains the number of seconds until thetoken expires (the expires parameter). Once the token expires, you will need to re-run the steps above to generate anew code and access_token, although if the user has already authorized your app, they will not be prompted to do soagain. If your app needs an access token with an infinite expiry time (perhaps to take actions on the user's behalf afterthey 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 thebody of the response:

{"error": {

"type": "OAuthException","message": "Error validating verification code."

}}

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

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

<?php

$app_id = "YOUR_APP_ID";$app_secret = "YOUR_APP_SECRET";$my_url = "YOUR_URL";

session_start();$code = $_REQUEST["code"];

if(empty($code)) {$_SESSION['state'] = md5(uniqid(rand(), TRUE)); //CSRF protection$dialog_url = "https://www.facebook.com/dialog/oauth?client_id="

. $app_id . "&redirect_uri=" . urlencode($my_url) . "&state="

. $_SESSION['state'];

echo("<script> top.location.href='" . $dialog_url . "'</script>");}

if($_REQUEST['state'] == $_SESSION['state']) {$token_url = "https://graph.facebook.com/oauth/access_token?"

. "client_id=" . $app_id . "&redirect_uri=" . urlencode($my_url)

. "&client_secret=" . $app_secret . "&code=" . $code;

$response = @file_get_contents($token_url);$params = null;parse_str($response, $params);

$graph_url = "https://graph.facebook.com/me?access_token=". $params['access_token'];

$user = json_decode(file_get_contents($graph_url));echo("Hello " . $user->name);

}else {

echo("The state does not match. You may be a victim of CSRF.");}

?>

Client-side Flow

The client-side flow also uses the OAuth Dialog for user authentication and app authorization. The only difference is thatyou 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 ratherthan being passed a authorization code (via the code parameter) as in the server-side flow, the redirect_uri is passed theaccess 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 browseror desktop code hosting a web control) can retrieve the token. App authentication is handled by verifying that theredirect_uri is in the same path as the Site URL configured in the Developer App. See the Alternate Redirect URIs sectionbelow for more information.

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

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

<html><head>

<title>Client Flow Example</title></head><body><script>

function displayUser(user) {var userName = document.getElementById('userName');var greetingText = document.createTextNode('Greetings, '

+ user.name + '.');userName.appendChild(greetingText);

}

var appID = "YOUR_APP_ID";if (window.location.hash.length == 0) {

var path = 'https://www.facebook.com/dialog/oauth?';var queryParams = ['client_id=' + appID,

'redirect_uri=' + window.location,'response_type=token'];

var query = queryParams.join('&');var url = path + query;window.open(url);

} else {var accessToken = window.location.hash.substring(1);var path = "https://graph.facebook.com/me?";

var queryParams = [accessToken, 'callback=displayUser'];var query = queryParams.join('&');var url = path + query;

// use jsonp to call the graphvar script = document.createElement('script');script.src = url;document.body.appendChild(script);

}</script><p id="userName"></p></body>

</html>

Using the Access Token

With a valid access token you can invoke the Graph API by appending the access_token parameter to Graph API (andLegacy 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, theGraph 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 byspecifying a Deauthorize Callback URL in the Developer App. During app removal we will send an HTTP POST requestcontaining 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 URLthat 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 Domainfield 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 ofload, 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 Loginallows 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 athttps://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 DeveloperApp.

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 whichcan perform privileged operations on the Page. In order for your app to perform these privileged operations, the user mustgrant 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 UserGraph 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 thatPage.

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 SDKand 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 appinto 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 Dialogto 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 aweb browser (most desktop frameworks such as .NET, AIR and Cocoa support embedding browsers), you can use theclient-side flow with one modification: a specific redirect_uri. Rather than requiring desktop apps to host a web serverand 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 URIfragment:

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 yourframework 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 anaction on website. To prevent this attack, you should pass an identifier in the state parameter, and then validate thestate parameter matches on the response. We strongly recommend that any app implementing Facebook user loginimplement 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 furtherdetails.

Diperbarui sekitar seminggu yang lalu


Kirim 5.253orang

Step by Step - Facebook API

Documents

Transcript of Step by Step - Facebook API