-1

I’ve been searching everywhere for an answer on this but I haven’t been able to find one, I hope someone here can help! :) I’m creating a Facebook Canvas game, and I'd like to design a multi-friend selector for players to invite their friends to play the game.

At the minute I’m using Facebook’s default invite dialog, this is what it looks like:

enter image description here

It’s functioning fine but I want to give users a more attractive interface where they’re able to select their friends (or select all friends), and then click on “Send”. I also want them to be able to search for their friends in a search box, scroll down through their friends list, and close the invite box with an X on the top right if they want to. Something similar to this:

enter image description here

I’ve been reading through Facebook’s tutorials but they don’t have any info on how to actually build and integrate Facebook’s code with a design for such a user interface.

Every forum thread I’ve seen on this subject just links back to this page: https://developers.facebook.com/docs/games/multi-friend-selector/v2.3 but Facebook’s tutorial only goes up to the most basic of invite interfaces (more basic than the one I currently have). I was wondering if anyone knew of any multi-friend selector templates, or any step by step tutorial to make a customized, functioning multi-friend selector? Or failing that, would anyone know what files in the Facebook SDK I should be trying to modify to customize its look? Thanks in advance! :)

Emily
  • 1,151
  • 4
  • 21
  • 42

1 Answers1

0

The link in your question is already the answer.

Facebook provide you with either:

  1. A fully fledged multi-friend selector in a style which matches the UI on Facebook (your first image).
  2. A set of JavaScript calls to get friends lists and send requests to those friends.

Your second image of a custom friend selector is made using #2. They are querying the friends list from Facebook and presenting it in a way which matches their game.

There is no template or SDK files to edit, it's just HTML they have designed and created themselves. You will need to design and implement yours the same way if that is a look you want to achieve. The implementation itself is reasonably straightforward, and covered in the link:

  1. Grab list of friends from Facebook (with or without the app installed already is up to you).
  2. Render that list using the HTML UI you have designed. Again, this is not FB specific, this is just you rendering some data how ever you want it to look.
  3. Trigger the FB SDKs apprequest dialog with the selected friends when your user clicks send.
AndySavage
  • 1,729
  • 1
  • 20
  • 34
  • Thanks for your reply Andy, I'm marking your answer as correct, I'm now trying to work on method 2. :) – Emily Mar 31 '15 at 12:18
  • 1
    But Facebook has deprecated the API to get entire list of friends. It only returns the list of users who also connect to the game. For app invites, how to present the user with all friends? – Comtaler Mar 21 '16 at 23:41