Thursday, June 26, 2014

How to show your Facebook friends with their profile pictures

I had to make a Facebook application for a project of mine that has a similar look to the home page (more specifically, the newsfeed). For that, I needed to get access to friends and their profile pics of each user.
I started working on this and reading difference posts, specifically the one Facebook has and realized that the way application can have access to peoples friends has changed. Now there are two types of friends you can get from the application user:
  1. /me/taggable_friends: The new Taggable Friends API. In the past if you wanted to tag friends in a post, you had to get their IDs, names and then pass that information into the post to tag them. With this new API you get a set of tokens that identify friends along with their names and pictures. Using this, it's easy to build a custom tagging interface from your app. If you use this feature, your app will have to go through review before it can tag people in posts or photos. Please note that the tokens returned through this API are not the same as the IDs returned via/me/friends.
  2. /me/invitable_friends The new Invitable Friends API. This new API returns a set of people (represented by tokens, names and pictures) in order for you to build your own custom invites interface. Much like the taggable friends interface, the tokens returned here are not the same as the IDs returned via /me/friends and should not be re-used or saved. Using this API does not require review, but is only available to Games on Facebook.com.
You can read more about the changes that this brought upon applications in the sources provided below. But back to retrieving the user's friends, there is a very helpful class on Lynda.com with the following address:

http://www.lynda.com/Facebook-tutorials/Building-Facebook-Applications-PHP-MySQL/107060-2.html

This course explains step by step what you need to do in order to get the friends and their pictures in your application, however, since Facebook changed the way we are accessing friends, it is a bit outdated. That's why in accordance to the code that is explained in the course videos, I have made the following modification for it to work with the new limitations:

<?php 
require 'php-sdk/facebook.php';
$facebook = new Facebook(array(
'appId'  => 'your_app_id',
'secret' => 'your_app_secret'
));
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Friends List</title>
<link rel="stylesheet" href="
styles.css"/>
</head>
<body>
<!--<h2>Welcome to Friends Newsfeed app!</h2>-->
<?php

$news = array("I love Iran", "I love Germany", "I love USA", "I love France");
//get user from facebook object
$user = $facebook->getUser();

if ($user): //check for existing user id


$user_graph = $facebook->api('/me/taggable_friends/');
echo '<ul class="lgrid group">';

foreach ($user_graph['data'] as $key => $value) {
$index = round(rand(0,3));
echo '<img class="friendthumb" src = "',$value['picture']['data']['url'],'"/>';
echo "<h4>", $value['name'],'</h4>';
echo "<h5>", $news[$index], '</h5>';

} //iterate through friends graph
echo '</ul>';

else: //user doesn't exist
$loginUrl = $facebook->getLoginUrl(array(
'diplay'=>'popup',
'redirect_uri' => 'https://apps.facebook.com/friendsnewsfeed'
));
echo '<p><a href="', $loginUrl, '" target="_top">login</a></p>';
endif; //check for user id
?>
</body>
</html>


Hope you will have fun with it! :)

Sadaf

___________________________________________
Sources:
https://developers.facebook.com/docs/apps/upgrading



No comments:

Post a Comment