Search Facebook Developers

Docs

Tools

Support

News

Apps

Blog 2013 2012 2011 2010 2009 2008 2007 2006 Developer Roadmap

Ontwikkelaarsblog

How-To: Use the Graph API to pull the movies friends like
By Vatsal Mehta - vrijdag 18 maart 2011 om 23:30

The Graph API provides a rich set of functionality that enables you build apps with social at the core of the experience. Social apps have changed the way people make decisions, like deciding what movies to watch, what songs to listen to, what shows to get into or where to travel. As part of our continuing series of how tos, we thought itd be interesting to show how you can easily create these same social experiences. Weve put together a sample app using the Graph API that searches and presents an ordered list of the movies most liked amongst a user and her friends. To access the set of movies that a user and her friends like, you must first ask the user to authorize your app and request specific permissions: u s e r _ l i k e sand f r i e n d _ l i k e s . The user authorizes your app by logging in to your site using their Facebook account.

The simplest way to implement the login button is to use the Login button social plugin along with our JavaScript SDK as indicated below. The u s e r _ l i k e sand f r i e n d _ l i k e spermissions are added as parameters: < d i vi d = " f b r o o t " > < / d i v > < s c r i p ts r c = " h t t p : / / c o n n e c t . f a c e b o o k . n e t / e n _ U S / a l l . j s # a p p I d = Y O U R _ A P P _ I D & a m p ; x f b m l = 1 " > < / s c r i p t > < f b : l o g i n b u t t o ns h o w f a c e s = " t r u e "w i d t h = " 2 0 0 "m a x r o w s = " 1 " p e r m s = " u s e r _ l i k e s ,f r i e n d s _ l i k e s " > < / f b : l o g i n b u t t o n > When the user clicks the button, she is prompted with the following dialog:

After the user authorizes the app, you will need to ask for her list of friends: F B . a p i ( ' / m e / f r i e n d s ' ,f u n c t i o n ( r e s p o n s e ){} ) ; You can then pull movies liked by each friend by calling: F B . a p i ( / U S E R _ I D / m o v i e s ,f u n c t i o n ( r e s p o n s e ){} ) ; Once you have the movie, the bold lines in the snippet below show how you can use the movie id to get the thumbnail image and URL link for the movie:

F B . a p i ( ' / ' + m o v i e L i s t S o r t e d [ i ] . i d ,f u n c t i o n ( r e s p o n s e ){ v a rn e w D i v=d o c u m e n t . c r e a t e E l e m e n t ( " D I V " ) ; n e w D i v . i n n e r H T M L=" < i m gs r c = ' " + r e s p o n s e . p i c t u r e + " ' > < / i m g > < b r / > " ; i f (r e s p o n s e . l i n k ){ n e w D i v . i n n e r H T M L + = " < ah r e f = ' " + r e s p o n s e . l i n k + " ' > " + r e s p o n s e . l i n k + " < / a > < b r / > " ; n e w D i v . i n n e r H T M L + = ' < i f r a m es r c = " h t t p : / / w w w . f a c e b o o k . c o m ' +' / p l u g i n s / l i k e . p h p ? ' +' h r e f = ' + r e s p o n s e . l i n k + ' & a m p ; l a y o u t = s t a n d a r d & a m p ; ' +' s h o w _ f a c e s = t r u e & a m p ; ' +' w i d t h = 4 5 0 & a m p ; a c t i o n = l i k e & a m p ; c o l o r s c h e m e = l i g h t ' +' & a m p ; h e i g h t = 8 0 " ' +' s c r o l l i n g = " n o "f r a m e b o r d e r = " 0 "s t y l e = " b o r d e r : n o n e ; ' +' o v e r f l o w : h i d d e n ; ' +' w i d t h : 4 5 0 p x ;h e i g h t : 8 0 p x ; "a l l o w T r a n s p a r e n c y = " t r u e " > +' < / i f r a m e > < b r / > ' ; } d o c u m e n t . g e t E l e m e n t B y I d ( r e s p o n s e . i d ) . a p p e n d C h i l d ( n e w D i v ) ; } ) ; The return responses for friends and the users movies are documented on https://developers.facebook.com/docs/reference/api/. The responses are structured in a similar fashion to Movie Pages on Facebook. For example, the response structure of Inception can be accessed by going to http://graph.facebook.com/Inception. The end result is a list of movies sorted by the most liked amongst your friends.

The full sample app is written entirely in Javascript and HTML. Run the app by clicking here. The sample app code is pasted below, but you can also view source on the site to see the entire source code. < h t m l > < h e a d > < t i t l e > T e s tP a g e < / t i t l e > < s c r i p t > v a rm o v i e L i s t=n e wA r r a y ( ) ; v a rm o v i e L i s t S o r t e d=n e wA r r a y ( ) ; v a rf r i e n d C o u n t=0 ; f u n c t i o ns h o w M o v i e s ( ){ a l e r t ( m o v i e L i s t . l e n g t h ) ; } f u n c t i o nc o m p a r e M o v i e s ( m o v i e A ,m o v i e B ){ i f( m o v i e A . n a m e= = =m o v i e B . n a m e )r e t u r n0 ; i f( m o v i e A . n a m e>m o v i e B . n a m e )r e t u r n1 ; r e t u r n1 ; } f u n c t i o np o p u l a r M o v i e s ( m o v i e A ,m o v i e B ){ r e t u r nm o v i e B . m C o u n t-m o v i e A . m C o u n t ; }

f u n c t i o nd a t a _ f e t c h _ p o s t p r o c ( ){ d o c u m e n t . g e t E l e m e n t B y I d ( ' t e s t ' ) . i n n e r H T M L =" G e n e r a t i n gr e c o m m e n d a t i o n s. . ." ; m o v i e L i s t . s o r t ( c o m p a r e M o v i e s ) ; / /N o ww eh a v es o r t e dl i s t ,d e d u p ea n dc o u n t m C t r=0 ; f o r( i=0 ;i<m o v i e L i s t . l e n g t h ;i + + ) { v a rc o u n t=0 ; m o v i e L i s t S o r t e d [ m C t r ]=m o v i e L i s t [ i ] ; f o r(j=i ;j<m o v i e L i s t . l e n g t h ;j + + ) { i f(m o v i e L i s t [ i ] . n a m e= = =m o v i e L i s t [ j ] . n a m e){ c o u n t + + ; }e l s e{ b r e a k ; } } i=i + c o u n t 1 ; m o v i e L i s t S o r t e d [ m C t r + + ] . m C o u n t=c o u n t ; } v a rm a x R e s u l t s=1 0 0 ; i f (m o v i e L i s t S o r t e d . l e n g t h<1 0 0 ){ m a x R e s u l t s=m o v i e L i s t S o r t e d . l e n g t h ; } m o v i e L i s t S o r t e d . s o r t ( p o p u l a r M o v i e s ) ; d o c u m e n t . g e t E l e m e n t B y I d ( ' t e s t ' ) . i n n e r H T M L=" " ; f o r (i = 0 ;i < m a x R e s u l t s ;i + + ){ v a rn e w D i v=d o c u m e n t . c r e a t e E l e m e n t ( " D I V " ) ; n e w D i v . i d=m o v i e L i s t S o r t e d [ i ] . i d ; n e w D i v . i n n e r H T M L=m o v i e L i s t S o r t e d [ i ] . n a m e+':L i k e s-' +m o v i e L i s t S o r t e d [ i ] . m C o u n t ; d o c u m e n t . g e t E l e m e n t B y I d ( " m o v i e s " ) . a p p e n d C h i l d ( n e w D i v ) ; F B . a p i ( ' / ' + m o v i e L i s t S o r t e d [ i ] . i d ,f u n c t i o n ( r e s p o n s e ){ v a rn e w D i v=d o c u m e n t . c r e a t e E l e m e n t ( " D I V " ) ; n e w D i v . i n n e r H T M L=" < i m gs r c = ' " + r e s p o n s e . p i c t u r e + " ' > " +" < / i m g > < b r / > " ; i f (r e s p o n s e . l i n k ){ n e w D i v . i n n e r H T M L + =" < ah r e f = ' " + r e s p o n s e . l i n k + " ' > " + r e s p o n s e . l i n k + " < / a > < b r / > " ; n e w D i v . i n n e r H T M L + =' < i f r a m es r c = ' +' " h t t p : / / w w w . f a c e b o o k . c o m / p l u g i n s / l i k e . p h p ? ' +' h r e f = ' + r e s p o n s e . l i n k + ' & a m p ; l a y o u t = s t a n d a r d ' +' & a m p ; s h o w _ f a c e s = t r u e & a m p ; ' +' w i d t h = 4 5 0 & a m p ; a c t i o n = l i k e & a m p ; ' +' c o l o r s c h e m e = l i g h t & a m p ; h e i g h t = 8 0 " ' +' s c r o l l i n g = " n o "f r a m e b o r d e r = " 0 "s t y l e = " ' +' b o r d e r : n o n e ;o v e r f l o w : h i d d e n ; ' +' w i d t h : 4 5 0 p x ;h e i g h t : 8 0 p x ; " ' +' a l l o w T r a n s p a r e n c y = " t r u e " > < / i f r a m e > < b r / > ' ; } d o c u m e n t . g e t E l e m e n t B y I d ( r e s p o n s e . i d ) . a p p e n d C h i l d ( n e w D i v ) ; } ) ; } } f u n c t i o ng e t _ f r i e n d _ l i k e s ( ){ d o c u m e n t . g e t E l e m e n t B y I d ( ' t e s t ' ) . i n n e r H T M L=" R e q u e s t i n g" +" d a t af r o mF a c e b o o k. . ." ; F B . a p i ( ' / m e / f r i e n d s ' ,f u n c t i o n ( r e s p o n s e ){ f r i e n d C o u n t=r e s p o n s e . d a t a . l e n g t h ; f o r (i = 0 ;i < r e s p o n s e . d a t a . l e n g t h ;i + + ){ f r i e n d I d=r e s p o n s e . d a t a [ i ] . i d ; F B . a p i ( ' / ' + f r i e n d I d + ' / m o v i e s ' ,f u n c t i o n ( r e s p o n s e ){ m o v i e L i s t=m o v i e L i s t . c o n c a t ( r e s p o n s e . d a t a ) ; f r i e n d C o u n t ; d o c u m e n t . g e t E l e m e n t B y I d ( ' t e s t ' ) . i n n e r H T M L=f r i e n d C o u n t +"f r i e n d st og o. . ." ; i f ( f r i e n d C o u n t= = =0 ){d a t a _ f e t c h _ p o s t p r o c ( ) ;} ; } ) ; } } ) ; } < / s c r i p t > < / h e a d > < b o d y > < d i vi d = " f b r o o t " > < / d i v > < d i vi d = " l o g i n " > < / d i v > < d i vi d = " t e s t " > < / d i v > < d i vi d = " m o v i e s " > < / d i v > < s c r i p ts r c = " h t t p : / / c o n n e c t . f a c e b o o k . n e t / e n _ U S / a l l . j s " > < / s c r i p t > < s c r i p t >

F B . i n i t ( { a p p I d :' Y O U R _ A P P _ I D ' , s t a t u s:t r u e ,/ /c h e c kl o g i ns t a t u s c o o k i e:t r u e ,/ /e n a b l ec o o k i e s x f b m l :t r u e ,/ /p a r s eX F B M L o a u t h :t r u e } ) ; F B . E v e n t . s u b s c r i b e ( ' a u t h . a u t h R e s p o n s e C h a n g e ' ,f u n c t i o n ( r e s p o n s e ){ w i n d o w . l o c a t i o n . r e l o a d ( ) ; } ) ; F B . g e t L o g i n S t a t u s ( f u n c t i o n ( r e s p o n s e ){ i f( r e s p o n s e . s t a t u s= =" c o n n e c t e d " ){ / /l o g g e di na n dc o n n e c t e du s e r ,s o m e o n ey o uk n o w g e t _ f r i e n d _ l i k e s ( ) ; d o c u m e n t . g e t E l e m e n t B y I d ( ' l o g i n ' ) . i n n e r H T M L = ' < ah r e f = " # "o n c l i c k = " F B . l o g o u t ( ) ; " > L o g o u t < / a > < b r / > ' ; }e l s e{ d o c u m e n t . g e t E l e m e n t B y I d ( ' l o g i n ' ) . i n n e r H T M L = ' < f b : l o g i n b u t t o ns h o w f a c e s = " t r u e "w i d t h = " 2 0 0 " ' +'m a x r o w s = " 1 "p e r m s = " u s e r _ l i k e s ,f r i e n d s _ l i k e s " > ' +' < / f b : l o g i n b u t t o n > ' ; F B . X F B M L . p a r s e ( ) ; } } ) ; < / s c r i p t > < / b o d y > < / h t m l >

Vatsal, a Partner Engineer, is still wondering whether the totem kept spinning in Inception.

Vind ik leuk

Verzenden

93 personen vinden dit leuk. Wees de eerste van je vrienden.

17 reacties Een reactie toevoegen

Op profiel plaatsen Virendra Rajput Beantwoorden Volgen

Plaatsen als Roel Susan (Wijzig) Populaire reageerder Hacker bij Markitty

Reageren

Batching the queries would have seriously improved the speed of the App! 4 Vind ik leuk Bericht volgen 4 mei 2012 om 20:33 Volgen App Designer bij Stats Mtaani 4.132 abonnees

Rowland Mtetezi So annoyingly slow!!

Beantwoorden Vind ik leuk 28 juni 2012 om 21:14 Bob Belderbos did you manage to do it Virendra? Beantwoorden Vind ik leuk 7 juli 2012 om 13:11 Virendra Rajput Volgen Populaire reageerder Hacker bij Markitty

well didnt really gave it a try !! But used Batching for one of my projects Beantwoorden Vind ik leuk 7 juli 2012 om 13:14 Mahender Singh Social Media Analyst bij Zelfstandig no output from this code.. Beantwoorden Vind ik leuk Bericht volgen 4 september 2012 om 22:52 Gideon Mendels app demo link is broken. Beantwoorden dead link Beantwoorden 1 Vind ik leuk Bericht volgen 31 december 2012 om 7:20 Volgen Admin bij Cirumput 1 Vind ik leuk Bericht volgen 11 oktober 2012 om 12:48 Volgen Technical University of Sofia / -

Sansan Chutanker

<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"> </div> Beantwoorden 1 Vind ik leuk Bericht volgen 6 februari om 8:48

Clinton Lambeth Bloomington (Minnesota) where do you put the graph api in you html? Beantwoorden 1 Vind ik leuk Bericht volgen 19 februari om 15:36 Volgen Admin bij Cirumput

Sansan Chutanker fuck you kapir Beantwoorden

1 Vind ik leuk Bericht volgen 19 februari om 21:38

Sridhar Gopal Jataprolu Werkt bij Accenture if a user has hundred friends, we will end up sending 100 queries to Facebook. Even in batching this seems difficult. Does anybody know how to pull multiple friends information in one query? Beantwoorden 1 Vind ik leuk Bericht volgen 19 maart om 11:52 Volgen Softwareontwikkelaar bij Whiqq

Simer Plaha

i don't think you can do it in one query. But it's definitely possible in a batch query. I just finished working working on it. Beantwoorden Todd Gilbert 1 Vind ik leuk 20 maart om 15:34

Volgen DePaul University

I'd love to try this - but the sample doesnt appear to be around anymore: http://myfbse.com/ socialmovies/. Beantwoorden Vind ik leuk Bericht volgen 28 maart om 17:18 Keyur Shah DMTS - Web Technology bij Verizon Communications Did it work for anyone.,... I tried the sample but returning no response. Blank page... Beantwoorden Vind ik leuk Bericht volgen 16 juli om 22:37 2 meer weergeven

Facebook 2013 Nederlands

Over

Adverteren

Banen

Platformbeleid

Privacybeleid