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!

17 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.

Névtelen írta...

http://13dfgsdfg57.com/

Névtelen írta...

just dropping by to say hi

Névtelen írta...

It's wonderful that you are getting thoughts from this article as well as from our argument made at this time.

Feel free to surf to my web-site; teklogix barcode scanner repair

Névtelen írta...

Exact day time payments lending options happen to be a kind of fast payday loans provided in a
calendar month phase throughout crisis problems. Individuals don’t will need typically the proof situations’ catastrophe, regulations they
must be given surety, credit history not other things.
You'll arrange a holiday, some crucial expenditures as well as insure your internet business charges – Comparable working day payment lending products will help you in a scenarios. In these days these kind of financial products can be found online.

My web-site pożyczka bez bik

Névtelen írta...

Comparable time payment mortgages will be a sort of payday cash advances made available on a calendar
month phase with urgent situation events. Many people
don’t demand the particular evidence of situations’ sudden, not needed
surety, credit history or other things. You will package if you want a,
various necessary expenditures and also cover up your business interest fees – Same time of day installation funds can assist you in a situations.
At present all these lending products are available on line.


My web-site; kredyty chwilówki

Névtelen írta...

Very same evening sequel financial loans usually are a form of fast payday loans supplied on a week time period on urgent situation instances.
People don’t require the particular evidence of situations’ emergency, neither of them they desire surety, credit report none other things.

You might package a vacation, many essential expenditures or even just covers your company obligations – Similar moment fitting up funds just might help you in
a occasions. In these days a lot of these lending products are presented internet.


Also visit my blog post ... pożyczki prywatne

Névtelen írta...

Same exact time installation loans will be a make of cash advances furnished for just
a thirty day period span through critical events. That they don’t need this proof situations’ crisis, nor they desire surety, history of credit or other things.

It's possible you'll arrange a vacation, many essential
acquisitions or simply go over your company prices – Comparable working
day setting up financial loans can help you in a occurrences.
Now such funds can be purchased online.

Also visit my page chwilówki

Névtelen írta...

Similar working day installment loans are a make of
online payday loans presented to get a few weeks interval for catastrophe scenarios.
That they don’t demand all the evidence of situations’ urgent situation, none they
need surety, credit standing none other stuff. You could
possibly schedule if you want a, some critical brings home or maybe even go over your home business expenses
– Equivalent morning installation lending options
can help you in any instances. At present such financial products are on hand over the internet.


Also visit my page - kredyt bez bik

Névtelen írta...

Very same working day installing financial products are
generally a sort of online payday loans made available for one four weeks period during unexpected circumstances.
These people don’t demand the actual proof situations’
crisis, not they want surety, credit file not other things.

You might approach a vacation, some essential products and services or perhaps handle your
organization fees – Same exact moment set up lending options will allow you in a events.
Today most of these personal loans can be found
internet.

Feel free to visit my web blog - szybka pożyczka