How to show the images of friends who are using an app (code)

I am developing an application on facebook. My application also has an registration page. When a new user enters into our application I want the application to show the images of all his friends who are using this开发者_高级运维 app. How do I accomplish this?

The solution to this problem requires that you use a Facebook Social Plugin.

You can't build your own registration form and show a user all his/her friends who are using your application before the user installs your application. This is because, in order to get a list of the user's friends, you have to have a valid access token - as this isn't public information.

There are 2 different social plugins you can use.

1. The simple "login" button which looks like the Facebook login button. (documentation here: http://developers.facebook.com/docs/reference/plugins/login/)

2. A registration form, which uses their users' Facebook profile to pre-populate some fields. You can also add fields to the form to get more information. (documentation here: http://developers.facebook.com/docs/plugins/registration/)

Both of these show the user pictures of the friends that are already connected/installed, and this is pretty much the only way you can pull this off before the user authorizes your application.

edit 5/20/2011

After browsing around the FB Social Plugin docs, I found another Social Plugin that you could possibly use if you didn't want to use the Facebook Registration Social Plugin. You can use the Facepile Plugin. This shows all the users' friends who have connected to your app, or page, or whatever you want..so you could build your own registration form and use this social plugin to achieve the friends photos result you were looking for.

I guess I see two solutions :

1. Simple, put a facebook like button "with faces" somewhere on your page, your users will then see the pictures of their friends who "liked" your page.

   The option for showing friends pictures is show_faces="true"

2. Second option, that is a bit more difficult : When a new user registers :

   1. Save it's Facebook ID in a DB.
   2. Get it's friend list using something like : https://graph.facebook.com/me/friends?access_token=...
   3. Parse the returned JSON of its friends, and then compare with all the Facebook ID's you already have in your DB, you can find which friends are already in your systems, those are the friends you want to display, to get their pictures just use <img src="http://graph.facebook.com/USER_FACEBOOK_ID/picture?type=small"></img>

   See more about getting friends of a user here : read about the "friends" connection.

the best way is to use facepile you need to add data-app-id and don't add data-href because if you will add data-href then system will check that url not your app so the facepile div will look like this:

<div class="fb-facepile" data-app-id="YOUR_APP_ID" data-max-rows="1" data-colorscheme="light" data-size="small" data-show-count="true"></div>