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!