public
Last active

Backbone class for retrieving a users facebook friends. Supports pagination and search

  • Download Gist
gistfile1.txt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
# A small class that allows normal backbone interaction with
# the abomination that is the facebook api
# No view included due to the individuality of each solution
# the properties for the model are: uid, name, pic_square
class exports.FacebookFriendsList extends Backbone.Collection
 
#model: exports.InvitationFacebook
options:
page: 0
search: ''
limit: 60
 
url: '/fql'
 
# Generate a query for the facebook open graph
# this uses fql for pagination and searching of users
query : ->
# Current users friends who are not on spling
url = "SELECT uid, name, pic_square FROM user WHERE has_added_app=0 AND
uid IN (SELECT uid2 FROM friend WHERE uid1 = me())"
 
# Any search parameters
unless @options.search is ''
url += " AND strpos(lower(name), '#{@options.search.toLowerCase()}') >= 0"
 
# Pagination
url += " ORDER BY name LIMIT #{@options.limit}
OFFSET #{@options.page*@options.limit}"
 
initialize: (appId, app_token)->
# Initialize the facebook api
FB.init
appId : appId
app_token : app_token
status : true
 
# A custom fetch method that uses the facebook api
# instead of backbones fetch()
fetch: (options = {})->
 
console.log 'fql query', @query()
 
# This is the normal backbone behaviour
# turn the response into models and call any
# user defined success callbacks
success = (resp)=>
@[if options.add then 'add' else 'reset'](@parse(resp), options)
options.success(this, resp) if options.success
 
# Check the login status before calling the api
# without this expect an api error
FB.getLoginStatus( (response)=>
if response.status is 'connected'
FB.api '/fql', q: @query(), success
)
 
this
 
parse: (response)->
response.data

Example usage:

window.fbAsyncInit = ->
  @collection = new exports.FacebookFriendsList(app_id, users_facebook_auth token)
  @collection.on 'reset', @addAll
  @collection.on 'add', @addOne
  $(window).on 'scroll', @scrolling

And then in your template:

<script>
  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.