2011/09/29

Facebook like lekérdezése javascript-ből

Egy munkám során arra volt szükség, hogy egy önálló weboldalon a látogatóról eldöntsem, kedvel-e (tetszikeli, like-olja, lájkolja) egy adott Facebook-oldalt, mindezt szerveroldali programozás nélkül, pusztán javascriptből.

Fél napos Google és Facebook-dokumentáció olvasgatás után úgy tűnik, hogy a post írásának időpontjában ez a kérdés (nevezzük lájk-státusznak) csak akkor megválaszolható egy "külső" (nem Facebook page tab) oldalról, ha az ezt kérdező alkalmazást előtte a felhasználó felhatalmazta az adatainak lekérdezésére.

Ennek fényében készítettem egy egyszerű html/javascript oldalt:

 <html>  
     <head>  
         <title>paha facebook javascript demo</title>  
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
     </head>  
     <body>  
 <div id="fb-root"></div>  
 <script>  
  // @see http://www.fbrell.com/fb.api/does-like  
  // @see http://stackoverflow.com/questions/4758770/how-to-get-access-token-from-fb-login-method-in-javascript-sdk  
  // asynchronous init  
  window.fbAsyncInit = function() {  
   // init the app with JS  
   FB.init({  
    appId : '266155303407375', // paha demo app id  
    status : true, // check login status  
    cookie : true, // enable cookies to allow the server to access the session  
    xfbml : true, // parse XFBML  
    //channelUrl : 'http://www.yourdomain.com/channel.html', // Custom Channel URL  
    oauth : true //enables OAuth 2.0  
   });  
   // check if user authorized the app      
   FB.getLoginStatus(function(response) {  
     // if authorized  
     if (response.authResponse) {  
       // check if he/she likes the page  
       FB.api({ method: 'pages.isFan', page_id: '20531316728' }, function(resp) { // facebook page id  
         if (resp) { // liked  
             document.getElementById('fb-like').style.display = 'block';  
         } else { // not liked  
             document.getElementById('fb-notlike').style.display = 'block';  
         }  
       });  
     } else { // not authorized  
       document.getElementById('fb-login').style.display = 'block';  
     }  
   });  
  };  
  // facebook JS api init  
  (function() {  
   var e = document.createElement('script');  
   e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';  
   e.async = true;  
   document.getElementById('fb-root').appendChild(e);  
  }());  
  // login click handler  
  var fblogin = function() {  
   FB.login(function(response) {  
     // if authorized, simply reload the page  
     if (response.authResponse) {  
       window.location.reload();  
     }  
   });  
  }  
 </script>  
         <div id="fb-login" style="display:none;"><a href="" onclick="FB.login(fblogin);return false;">Engedélyezz!</a></div>  
         <div id="fb-like" style="display:none;">Lájkolod!</div>  
         <div id="fb-notlike" style="display:none;">Nem lájkolod!</div>  
     </body>  
 </html>  

Az oldal a következőt teszi:
  • Betöltéskor megnézi, hogy a látogató engedélyezte-e az alkalmazás (paha demo app) számára a hozzáférést: FB.getLoginStatus()
  • Ha (még) nem engedélyezte, az "Engedélyezz" linket mutatja (onclick="FB.login(fblogin);return false;"), melyre kattintva előjön a jól ismert Facebook engedélykérő oldal, melyet ha a felhasznál elfogad, újratöltődik az oldal. 
  • Amennyiben engedélyezve van a hozzáférés az alkalmazás számára (response.authResponse), a Facebook API-t meghívva lekérdezi, hogy a megadott oldalt (a példa esetében a Facebook saját page-e) a felhasználó lájkolta-e. (FB.api({ method: 'pages.isFan', page_id: '20531316728' })
  • A válasz függvényében (igen, nem) jeleníti meg a "Lájkolod" ill. a "Nem lájkolod!" szövegeket
A működés ennyi, haszna nincsen, viszont jól szemlélteti a Facebook API működését.  Fontos megjegyezni azt is, hogy amennyiben csak arra az információra van szükségünk, hogy az adott látogató regisztrálva van-e a facebookon, ahhoz elegendő az első, FB.getLoginStatus hívás, melynek válasz-objektumának response tulajdonsága (response.status) megmondja, hogy a látogató nincs bejelentkezve (unknown), vagy nem engedélyezte még (not_authorized).  Ez ebben a példában nem lett lekezelve, de kis kiegészítéssel külön felkérhető a felhasználó Facebookos-bejelentkezésre is.

A kód kipróbálható ezen a linken.

Fentiek az én kb. fél napos Facebook-tapasztalataim, amennyiben szerinted nem teljesen így van, amit leírtam, vagy van egyszerűbb megoldás, kérlek jelezd a kommentek között!

8 megjegyzés:

Névtelen írta...

Üdv!
Nincs lehetőség engedélyezés nélkül bárhogy kideríteni az aktuális júzer idjét?

paha írta...

Önálló oldalon legjobb tudomásom szerint nincsen. De nem bánnám, ha valaki rámcáfolna. :-)

Kapitány írta...

Szia !!

Meg tudod mondani hogy ez még működik vagy a xbml kitiltásával már új app_id vel nem megy?

(FB.api({ method: 'pages.isFan', page_id: '20531316728' }) Ezt page: az idét honnan veszed?

www.facebook.com/122663141149832

Nekem például ez lenne ha a vitorlasnyar oldalt akaraom lekérdezni?

paha írta...

Ez még működik, ennek nincs köze az XFBML-hez, ez a Javascript API használata.

(FB.api({ method: 'pages.isFan', page_id: '122663141149832' })

Ezt kell neked hívnod, de csak akkor működik, ha az adott app-nak adott engedélyt a felhasználó.

ui: te vagy az android tanfolyamos, igaz? :)

Kapitány írta...

Szia !!

Megint zavarnálak mert nem tudom megoldani hogy Facebook page tabon ne kérjen engedélyt ahhoz hogy eldöntsem lájkolt e vagy sem. De mintha arra utáltál volna hogy belső oldalon megoldható. Erre nincs egy mintád?

paha írta...

De, részlet saját kódból, a lényeg a signed request:

$this->_facebook = new Facebook(array(
'appId' => Main_Setting::get('app_id', 'facebook'),
'secret' => Main_Setting::get('app_secret', 'facebook'),
'cookie' => TRUE,
));

$signed_request = $this->_facebook->getSignedRequest();

if (isset($signed_request['page'])) {
$this->_data['facebook']['liked'] = (bool)$signed_request['page']['liked'];
$this->_data['facebook']['admin'] = (bool)$signed_request['page']['admin'];
}

További tudnivalók:

https://developers.facebook.com/docs/authentication/signed_request/

paha írta...

Nagyon fontos, hogy csak ebben a signed requestben szabad bízni, ez akadályozza meg azt, hogy valaki "fake" adatokat "bepostoljon" az alkalmazásodba, mivel a signed request a te saját appod secret-jével van titkosítva.

Kapitány írta...

Köszönöm szépen!! Sikerült.