Quickstart: Facebook SDK for JavaScript https://developers.facebook.com/docs/javascript/quickstart/v2.2?locale...
Developers Apps Products Docs Tools Support Blog
Uygulama Geliştirme
Graph API Version
SDKs
iOS SDK
Quickstart: Facebook SDK for JavaScript
The Facebook SDK for JavaScript provides a rich set of client-side functionality tha
Android SDK
Enables you to use the Like Button and other Social Plugins on your site.
JavaScript SDK Enables you to use Facebook Login to lower the barrier for people to sign up
Makes it easy to call into Facebook's Graph API.
Quickstart Launch Dialogs that let people perform various actions like sharing stories.
Advanced Facilitates communication when you're building a game or an app tab
Reference The SDK, social plugins and dialogs work on both desktop and mobile web browse
PHP SDK This quickstart will show you how to setup the SDK and get it to make some basic
don't want to setup just yet, you can use our JavaScript test console to use all of th
explore some examples (you can skip the setup steps, but the rest of this quickstar
Unity SDK
console).
APIs
Grafik API'si
Basic Setup
Reklam API
The Facebook SDK for JavaScript doesn't have any standalone files that need to b
installed, instead you simply need to include a short piece of regular JavaScript in y
asynchronously load the SDK into your pages. The async load means that it does n
elements of your page.
The following snippet of code will give the basic version of the SDK where the optio
most common defaults. You should insert it directly after the opening <body>
to load it:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
};
1 -> 6 03.01.2015 09:45
Quickstart: Facebook SDK for JavaScript https://developers.facebook.com/docs/javascript/quickstart/v2.2?locale...
Developers Apps Products Docs Tools Support Blog
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
SDKs
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
iOS SDK }(document, 'script', 'facebook-jssdk'));
</script>
Android SDK
initialize the SDK. You must replace the value in your-app-id with the ID of
JavaScript SDK
your own Facebook App. You can find this ID using the App Dashboard.
Quickstart
Advanced
Reference
Advanced Setup
PHP SDK
As mentioned, the code above uses the common defaults for the options available when initializing the
Unity SDK
SDK. You can customize some of these options, if useful.
Changing SDK Language
APIs
In the basic setup snippet, the en_US version of the SDK is initialized, which means that all of the
Facebook-generated buttons and plugins used on your site will be in US English. (However, pop-up
dialogs
Grafik generated by Facebook like the Login Dialog will be in the language the person has chosen on
API'si
Facebook, even if they differ from what you've selected.) You can change this language by changing the
js.src value in the snippet. Take a look at Localization to see the different locales that can be used. For
Reklam API
example, if your site is in Spanish, using the following code to load the SDK will cause all Social Plugins
to be rendered in Spanish.
<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/es_LA/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Login Status Check
If you set status to true in the FB.init() call, the SDK will attempt to get info about the current user
immediately after init. Doing this can reduce the time it takes to check for the state of a logged in user if
you're using Facebook Login, but isn't useful for pages that only have social plugins on them.
You can use FB.getLoginStatus to get a person's login state. Read on for more about using
Facebook Login with the JavaScript SDK.
Disabling XFBML Parsing
2 -> 6 03.01.2015 09:45
Quickstart: Facebook SDK for JavaScript https://developers.facebook.com/docs/javascript/quickstart/v2.2?locale...
Developers Apps Products Docs Tools Support Blog
will improve page load times. You can find out more about this by looking at Social Plugins.
SDKs
Triggering Code when the SDK loads
The function assigned to window.fbAsyncInit is run as soon as the SDK has completed loading. Any
iOS SDK
code that you want to run after the SDK is loaded should be placed within this function and after the call
to FB.init. Any kind of JavaScript can be used here, but any SDK functions must be called after
Android SDK
FB.init.
JavaScript SDK
Quickstart
To improve performance, the JavaScript SDK is loaded minified. You can also load a debug version of the
Advanced
JavaScript SDK that includes more logging and stricter argument checking as well as being non-minified.
Reference
js.src value in your loading code to this:
PHP SDK
js.src = "//connect.facebook.net/en_US/sdk/debug.js";
Unity SDK
More Initialization Options
The reference doc for the FB.init function provides a full list of available initialization options.
APIs
Grafik API'si
Reklam API
Using the SDK to add Social Plugins
Now that you've got the SDK setup, we can use it to perform a few common tasks. Social Plugins such as
the Like Button and Comments Plugin can be inserted into HTML pages using the JavaScript SDK.
Let's try adding a Like button, just copy and paste the line of code below anywhere inside the <body> of
your page:
<div
class="fb-like"
data-send="true"
data-width="450"
data-show-faces="true">
</div>
Reload your page, and you should see a Like button on it.
Using the SDK to trigger a Share dialog
3 -> 6 03.01.2015 09:45
Quickstart: Facebook SDK for JavaScript https://developers.facebook.com/docs/javascript/quickstart/v2.2?locale...
Developers Apps Products Docs Tools Support Blog
they are loaded - mobile web, or desktop web.
SDKs
Here we'll show you how the FB.ui() method of the SDK can be used to invoke a really basic Share
dialog. Add this snippet after the FB.init() call in the basic setup code:
iOS SDK
FB.ui(
Android SDK
{
,
JavaScript SDK
https://developers.facebook.com/docs/'
Quickstart response){});
Advanced
Now when you reload your page, you'll see a Share dialog appear over the top of the page. Let's add a
Reference
few extra parameters to the FB.ui call in order to make the Share dialog make a more complex call to
publish an Open Graph action:
PHP SDK
FB.ui({
Unity SDK
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
APIs
object:'https://developers.facebook.com/docs/',
})
Grafik API'si
}, function(response){});
Reklam API
Now when you reload your page, you'll see a Share dialog again, but this time with a preview of the Open
Graph story. Once the dialog has been closed, either by posting the story or by cancelling, the response
function will be triggered.
Read the FB.ui reference doc to see a full list of parameters that can be used, and the structure of the
response object.
Using the SDK for Facebook Login
Facebook Login allows users to register or sign in to your app with their Facebook identity.
We have a full guide on how to use the JS SDK to implement Facebook Login. But for now, let's just use
some basic sample code, so you can see how it works. Insert the following after your original FB.init
call:
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
4 -> 6 03.01.2015 09:45
Quickstart: Facebook SDK for JavaScript https://developers.facebook.com/docs/javascript/quickstart/v2.2?locale...
Developers Apps Products Docs Tools Support Blog
FB.login();
}
SDKs
});
iOS SDK
Read the Login guide to learn exactly what is happening here, but when you reload your page you should
be prompted with the Login dialog for you app, if you haven't already granted it permission.
Android SDK
JavaScript SDK
Quickstart
Advanced
Using the SDK to call the Graph API
Reference
To read or write data to the Graph API, you'll use the JS SDK's FB.api() method. The version
parameter in the FB.init call is used to determine which Graph API version is used.
PHP SDK
We have another quickstart guide for the Graph API, however here we'll show you how the FB.api()
Unity SDK can publish a story on your behalf.
method
First, we need to get publish_actions permission in order to make publishing API calls. So add a line
APIs
after FB.init like this:
Grafik API'si
FB.login(function(){}, {scope: 'publish_actions'});
Reklam API
This will trigger a login dialog that'll request the relevant permissions. Next, now that your app can, let's
make the API call to publish. Add the API code into the response function of the FB.login call you
added above:
FB.login(function(){
FB.api('/me/feed', 'post', {message: 'Hello, world!'});
}, {scope: 'publish_actions'});
Now, when you reload your page, you'll be asked for permissions (if you haven't granted them already)
and then a status message will be posted to your profile:
Congratulations, you've learned how to use the JavaScript to perform a number of common tasks. Dig
deeper into the guides linked in each section to learn more about specific methods, or other parts of
5 -> 6 03.01.2015 09:45
Quickstart: Facebook SDK for JavaScript https://developers.facebook.com/docs/javascript/quickstart/v2.2?locale...
Developers Apps Products Docs Tools Support Blog
SDKs
Was this document helpful? Yes No
iOS SDK
Android SDK
JavaScript SDK
Quickstart
Advanced
Reference
PHP SDK
Unity SDK
APIs
Grafik API'si
Reklam API
6 -> 6 03.01.2015 09:45
