Facebook come verificare se l’utente ha gradito la pagina e mostrare i contenuti?

Sto cercando di creare un’app iFrame di Facebook. L’app dovrebbe prima mostrare un’immagine e se l’utente apprezza la pagina, otterrà l’accesso ad alcuni contenuti.

Io uso RoR, quindi non posso usare l’SDK PhP di Facebook.

Ecco il mio iFrame HTML quando l’utente non ha gradito la pagina:

     body { width:520px; margin:0; padding:0; border:0; font-family: verdana; background:url(repeat.png) repeat; margin-bottom:10px; } p, h1 {width:450px; margin-left:50px; color:#FFF;} p {font-size:11px;}     
Frontimg

E, se l’utente ha apprezzato la pagina:

      body { width:520px; margin:0; padding:0; border:0; font-family: verdana; background:url(repeat.png) repeat; margin-bottom:10px; } p, h1 {width:450px; margin-left:50px; color:#FFF;} p {font-size:11px;}     

AGGIORNAMENTO 21/11/2012 @ALL: Ho aggiornato l’esempio in modo che funzioni meglio e tenga conto delle osservazioni degli account di Chris Jacob e delle best practice di FB, diamo un’occhiata all’esempio operativo qui


Ciao Così come promesso ecco la mia risposta usando solo javascript:

Il contenuto del CORPO della pagina:

 
YOU DONT LIKE
YOU LIKE

Il CSS:

 body { width:520px; margin:0; padding:0; border:0; font-family: verdana; background:url(repeat.png) repeat; margin-bottom:10px; } p, h1 {width:450px; margin-left:50px; color:#FFF;} p {font-size:11px;} #container_notlike, #container_like { display:none } 

E infine la javascript:

 $(document).ready(function(){ FB.login(function(response) { if (response.session) { var user_id = response.session.uid; var page_id = "40796308305"; //coca cola var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id; var the_query = FB.Data.query(fql_query); the_query.wait(function(rows) { if (rows.length == 1 && rows[0].uid == user_id) { $("#container_like").show(); //here you could also do some ajax and get the content for a "liker" instead of simply showing a hidden div in the page. } else { $("#container_notlike").show(); //and here you could get the content for a non liker in ajax... } }); } else { // user is not logged in } }); }); 

Quindi cosa fa?

Per prima cosa effettua l’accesso a FB (se hai già l’USER ID e sei sicuro che l’utente abbia già effettuato l’accesso a facebook, puoi ignorare le cose di login e sostituire response.session.uid con YOUR_USER_ID (ad esempio dall’app delle tue guide)

Dopodiché esegue una query FQL sulla tabella page_fan e il significato è che se l’utente è un fan della pagina, restituisce l’id utente e in caso contrario restituisce una matrice vuota, dopodiché e in base ai risultati viene visualizzato un div o l’altro.

Inoltre c’è una demo funzionante qui: http://jsfiddle.net/dwarfy/X4bn6/

Come esempio usa la pagina della coca-cola, prova a farlo e a differenza della pagina della coca-cola e eseguila di nuovo …

Infine alcuni documenti correlati:

Tabella Ff page_fan

FBJS FB.Data.query

Non esitare se hai qualche domanda ..

Saluti

AGGIORNAMENTO 2

Come dichiarato da qualcuno, jQuery è necessario per la versione javascript per funzionare, ma si potrebbe facilmente rimuoverlo (è usato solo per il documento. Già e mostra / nascondi).

Per il document.ready, potresti avvolgere il tuo codice in una funzione e usare body onload="your_function" o qualcosa di più complicato come qui: Javascript – Come rilevare se il documento è stato caricato (IE 7 / Firefox 3) in modo da sostituire il documento pronto.

E per mostrare e hide cose puoi usare qualcosa come: document.getElementById("container_like").style.display = "none" or "block" e per tecniche cross browser più affidabili vedi qui: http: //www.webmasterworld .com / forum91 / 441.htm

Ma jQuery è così facile 🙂

AGGIORNARE

Relativamente al commento che ho postato qui di seguito ecco un codice ruby per decodificare la “signed_request” che facebook POST al tuo URL CANVAS quando lo recupera per la visualizzazione all’interno di facebook.

Nel tuo controller di azioni:

 decoded_request = Canvas.parse_signed_request(params[:signed_request]) 

E poi si tratta di controllare la richiesta decodificata e mostrare una pagina o un’altra .. (Non sono sicuro di questo, non mi sento a mio agio con il ruby)

 decoded_request['page']['liked'] 

Ed ecco la relativa class Canvas (dalla libreria fbgraph ruby ):

  class Canvas class << self def parse_signed_request(secret_id,request) encoded_sig, payload = request.split('.', 2) sig = "" urldecode64(encoded_sig).each_byte { |b| sig << "%02x" % b } data = JSON.parse(urldecode64(payload)) if data['algorithm'].to_s.upcase != 'HMAC-SHA256' raise "Bad signature algorithm: %s" % data['algorithm'] end expected_sig = OpenSSL::HMAC.hexdigest('sha256', secret_id, payload) if expected_sig != sig raise "Bad signature" end data end private def urldecode64(str) encoded_str = str.gsub('-','+').gsub('_','/') encoded_str += '=' while !(encoded_str.size % 4).zero? Base64.decode64(encoded_str) end end end 

Devi scrivere un piccolo codice PHP. Quando l’utente fa clic prima sulla scheda, è ansible verificare se gli piace o meno la pagina. Di seguito è riportato il codice di esempio

 include_once("facebook.php"); // Create our Application instance. $facebook = new Facebook(array( 'appId' => FACEBOOK_APP_ID, 'secret' => FACEBOOK_SECRET, 'cookie' => true, )); $signed_request = $facebook->getSignedRequest(); // Return you the Page like status $like_status = $signed_request["page"]["liked"]; if($like_status) { echo 'User Liked the page'; // Place some content you wanna show to user }else{ echo 'User do not liked the page'; // Place some content that encourage user to like the page } 

Ecco un esempio funzionante, che è un fork di questa risposta :

 $(document).ready(function(){ FB.login(function(response) { if (response.status == 'connected') { var user_id = response.authResponse.userID; var page_id = "40796308305"; // coca cola page https://www.facebook.com/cocacola var fql_query = "SELECT uid FROM page_fan WHERE page_id="+page_id+" and uid="+user_id; FB.api({ method: 'fql.query', query: fql_query }, function(response){ if (response[0]) { $("#container_like").show(); } else { $("#container_notlike").show(); } } ); } else { // user is not logged in } }); }); 

Ho usato il metodo FB.api (JavaScript SDK), invece di FB.Data.query, che è deprecato. Oppure puoi utilizzare l’API Graph come con questo esempio:

 $(document).ready(function() { FB.login(function(response) { if (response.status == 'connected') { var user_id = response.authResponse.userID; var page_id = "40796308305"; // coca cola page https://www.facebook.com/cocacola var fql_query = "SELECT uid FROM page_fan WHERE page_id=" + page_id + " and uid=" + user_id; FB.api('/me/likes/'+page_id, function(response) { if (response.data[0]) { $("#container_like").show(); } else { $("#container_notlike").show(); } }); } else { // user is not logged in } }); });​ 

Ci sono alcune modifiche richieste al codice JavaScript per gestire il rendering in base al gradimento degli utenti o non gradire la pagina imposta da Facebook che si sposta all’authorization Auth2.0.

Il cambiamento è abbastanza semplice: –

le sessioni devono essere sostituite da authResponse e uid da userID

Inoltre, data l’esigenza del codice e alcuni problemi affrontati da persone (incluso me) in generale con FB.login, l’uso di FB.getLoginStatus è un’alternativa migliore. Salva la query su FB nel caso in cui l’utente abbia effettuato l’accesso e abbia autenticato la tua app.

Fare riferimento alla sezione Oggetto risposta e sessioni per informazioni su come questo potrebbe salvare la query sul server FB. http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

Problemi con FB.login e le sue correzioni usando FB.getLoginStatus. http://forum.developers.facebook.net/viewtopic.php?id=70634

Ecco il codice pubblicato sopra con le modifiche che hanno funzionato per me.

 $(document).ready(function(){ FB.getLoginStatus(function(response) { if (response.status == 'connected') { var user_id = response.authResponse.userID; var page_id = "40796308305"; //coca cola var fql_query = "SELECT uid FROM page_fan WHERE page_id =" + page_id + " and uid=" + user_id; var the_query = FB.Data.query(fql_query); the_query.wait(function(rows) { if (rows.length == 1 && rows[0].uid == user_id) { $("#container_like").show(); //here you could also do some ajax and get the content for a "liker" instead of simply showing a hidden div in the page. } else { $("#container_notlike").show(); //and here you could get the content for a non liker in ajax... } }); } else { // user is not logged in } }); }); 

Con Javascript SDK, è ansible modificare il codice come di seguito, questo dovrebbe essere aggiunto dopo la chiamata FB.init.

  // Additional initialization code such as adding Event Listeners goes here FB.getLoginStatus(function(response) { if (response.status === 'connected') { // the user is logged in and has authenticated your // app, and response.authResponse supplies // the user's ID, a valid access token, a signed // request, and the time the access token // and signed request each expire var uid = response.authResponse.userID; var accessToken = response.authResponse.accessToken; alert('we are fine'); } else if (response.status === 'not_authorized') { // the user is logged in to Facebook, // but has not authenticated your app alert('please like us'); $("#container_notlike").show(); } else { // the user isn't logged in to Facebook. alert('please login'); } }); FB.Event.subscribe('edge.create', function(response) { alert('You liked the URL: ' + response); $("#container_like").show(); } 

C’è un articolo qui che descrive il tuo problema

http://www.hyperarts.com/blog/facebook-fan-pages-content-for-fans-only-static-fbml/

   Fans will see this content.  Non-fans will see this content.