How to use the facebook sdk

I want to explain with examples, how to use the facebook sdk, from the creating an app to the output

Create a Facebook App

Before using a api you need to create a app and get a access token for it. It’s very easy

  1. Go to facebook for developers
  2. Log-In
  3. Go to Add a New App
  4. Enter App Name
  5. Enter Captcha
  6. You’re Done!

Necessary informations:
APP ID: i.e.: 161687187736996

Speedrun: Creating facebook App

 

Get Page Access Token

Open the Graph API Explorer so you can easily manage you requests. Also you can get a Access Token over there

  1. Open the Graph API Explorer
  2. Select your App
  3. Go to Get Token->Page Access Token
  4. Confirm your Request
  5. Select your Facebook Page in the list
  6. You’re Done!

Speedrun: Getting Page Access Token

Your Access Token is shown like this

 

Extend Access Token

Now you need to extend your Access Token so you don’t need to refresh it again and again

  1. Click on the  in the Graph API Explorer
  2. Click on Open in Access Token Tool
  3. Click on Extend Access Token
  4. You’re Done!
    Your extended Access Token is shown below. Write it down.

Speedrun: Extend Access Token

Necessary informations:
Extended Access Token: i.e.: EAACTDbtjyaQBADl6BZA6ZBHPFfum…
User ID: i.e.: 153346…

 

 

Get Permanent Page Access Token

This means, you get an access token what never expires.

You can also have an access token that has no lifetime, that is bound to your facebook user account. To get one, you just need to open the following url, before replacing the account_id and the long lived access token with yours:

https://graph.facebook.com/v2.8/{account_id}/accounts?access_token={long_lived_access_token}

 

Get list of unlimited access tokens

Alternatively you can enter your Account ID and your Extended Access Token into the following form and get your unlimited access tokens.
This is completely client-side. We will not collect any data you’ve entered.



Specify what you want to get

In the Graph API Explorer you are able to click and build your GET Request. It means, you can specify the informations you want to get from your facebook Page.

Speedrun: Graph API Explorer Example GET Request

After you’ve selected your App and your facebook-page in the Graph API Explorer, you can click and build your GET Request. After clicking on Submit, you should immediately see the result of your get request in the graph api explorer result window. As seen in the example above.

Embedding the API

You are free to choose wheter you want to use the Javascript-API or the php-API

Javascript API

To load the Javascript sdk you just need to load the following script into your DOM:


<!-- Load the facebook sdk -->
<script src="//connect.facebook.net/en_US/sdk.js" type="text/javascript"></script>
Load the Facebook sdk for Javascript-usage

After that, you can use javascript to get your request and handle it. The following code snippet worked for me in jQuery(document).ready as well as inline. You just have to replace YOUR_PAGE_ID and YOUR_ACCESS_TOKEN:


// Example GET Request
FB.api(
'/YOUR_PAGE_ID',
'GET',
{
"fields":"id,name,posts{full_picture,message,permalink_url}",
access_token:
'YOUR_ACCESS_TOKEN',
},
function(response) {
//Show the response of the API
console.log(response);
}
);
Example: Get posts with full sized image and the post message

php-API

To load the php sdk, you have to download the php-graph-sdk from GitHub first and upload the Facebook folder into your project folder. After that you have to embed it into your php-file. In the example you just need to replace YOUR_APP_ID, YOUR_APP_SECRET and YOUR_ACCESS_TOKEN:


require_once('facebook/autoload.php');
$fb = new Facebook\Facebook([
'app_id' => 'YOUR_APP_ID',
'app_secret' => 'YOUR_APP_SECRET',
'default_graph_version' => 'v2.9',
]);
$fb->setDefaultAccessToken('YOUR_ACCESS_TOKEN');
Load the Facebook sdk for php-usage

After that, you can use php to get your request and handle it. The following code snippet worked for me with no problems at all:


$result = $fb->get('/me?fields=id,name,posts{full_picture,message,permalink_url}')->getDecodedBody();
var_dump( $result ); // Testing results
Example: Get posts with full sized image and the post message

Now all the GET-Request is fully saved in $result. I would recommend you to test the content of the variable before using it.

Example usages

It’s time for some example outputs i’ve used

Javascript


FB.api(
'/'+window.facebookID,
'GET',
{
"fields":"posts.limit(3){attachments,comments,likes,shares,message,permalink_url}",
access_token : window.facebookAT
},
function(response) {
$(response.posts.data).each(function(index, el) {
var insertCode = null;
var title;
if (typeof el.message != "undefined") {
title = el.message;
}else{
title = '';
} if ( title.length > 500 ){
title = title.substr(0,500);
} if (title.substr(0,25) == 'https://www.facebook.com/') {
title = '';
} var thumbnail;
if (typeof el.attachments != "undefined") {
thumbnail = el.attachments.data[0].media.image.src;
}else {
thumbnail = location.protocol+"//"+location.host+'/wp-content/themes/rdkd-theme/img/placeholder_social_media.jpg';
} var permalink;
if (typeof el.permalink_url != "undefined") {
permalink = el.permalink_url;
}else{
permalink = 'undefined';
} var likesCount = 0;
if ('likes' in el){ likesCount = (el.likes.data).length; } var shareCount = 0;
if ('shares' in el){ shareCount = el.shares.count; } var commentsCount = 0;
if ('comments' in el){ commentsCount = (el.comments.data).length; }
insertCode = '<article class="one-third">';
insertCode += '<div class="postImage" style="background-image:url('+thumbnail+');"></div>';
insertCode += '<p class="likes">'+likesCount+'</p>';
insertCode += '<p class="shares">'+shareCount+'</p>';
insertCode += '<p class="comments">'+commentsCount+'</p>';
insertCode += '<p class="visitPost"><a href="'+permalink+'" target="_blank">auf facebook anschauen</a></p>';
insertCode += '<p class="postTitle">'+title+'</p>';
insertCode += '</article>';
$( insertCode ).appendTo( "#social-media #social_media_entries" );
}); }
);
Facebook javascript sdk example

php


<?php
$kcAll = count($res['posts']['data']); for ($i=0; $i < 17 ; $i++) {
$post = $res['posts']['data'][$i];
$message = $post['message']; ?> <figure <?php echo ($i <= 7)? '' : 'data-dummy'; ?>>
<a href="<?php echo $post['permalink_url']; ?>" target="_blank" class="facebook-post-wrap">
<h2 class="facebook-post-title"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook aktuell</h2>
<div class="facebook-post-image" style="background-image:url(<?php echo $post['full_picture']; ?>);"/></div>
<figcaption>
<h2 class="photostack-title"><?php echo (strlen($message) < 80)? $message : mb_substr($message, 0, 80 ).'...'; ?></h2>
</figcaption>
</a>
</figure> <?php } ?>
Facebook php sdk example

Themen

API Facebook Javascript PHP

Beitrag teilen

Whatsappen