Facebook semplici integrazioni … a metà

Di recente ho aggiornato un sito di un concorso di video integrando al metodo di punteggio tradizionale anche i “mi piace” di facebook. La piattaforma facebook offre infatti al link http://developers.facebook.com snippet di codice per aggiungere in modo semplice e rapido ad un sito ad esempio il bottone del “mi piace” o la fomr dei commenti di facebook, oltre alla guida e documentazione delle API.

Tornando alla mia implementazione, ho la necessità di contare i “mi piace” che ogni pagina video riceve e quindi per prima cosa prendo il codice per il bottone “mi piace” e lo inserisco nella pagina del video.

<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like show_faces=”true” width=”450″></fb:like>

e provo a tener traccia dei like usando FB.Event.subscribe come descritto poco sotto

FAQ

How do I know when a user clicks a Like button?

If you are using the XFBML version of the button, you can subscribe to the ‘edge.create’ event throughFB.Event.subscribe.

quindi nella pagina aggiungo

FB.Event.subscribe('edge.create', function(response) {
    jQuery.ajax({url:"update.php",type:"POST",data:'idVideo=<?php echo $idVideo;?>'});
});

e fin quì tutto bene ora mi serve anche sapere quando un utente clicca su “Non mi piace più” e scopro ahimè che non esiste un evento che monitorizzi questo tipo azione! Poco male, alla fine facendo un analisi più approfondita è emerso che gli utenti possono condividere il link della pagina e indicare direttamente da facebook il “mi piace”, così facendo non verrebbe conteggiato.

Per avere un conteggio preciso il metodo migliore è usare FQL un linguaggio molto simile all’SQL che permette di interrogare direttamente i database di facebook, e più precisamente nel mio caso devo interrogare la tabella link_stat per leggere il valore like_count con la seguente query SELECT like_count FROM link_stat WHERE url=”http://blog.codelime.net/2010/11/24/facebook-semplici-integrazioni-a-meta.html”.

file_get_contents("https://api.facebook.com/method/fql.query?query=select%20like_count%20from%20link_stat%20where%20url=%22http://blog.codelime.net/2010/11/24/facebook-semplici-integrazioni-a-meta.html%22");

e anche ora scopro una cosa che mi fa andare in bestia, di fianco al mio bottone “mi piace” c’è il conteggio che dice “a 2332 persone piace questo elemento” … si peccato che quel numero non è il vero numero di “mi piace”, bensì la somma dei mi piace, dei commenti e delle volte che quel link è stato condiviso!

Non sono riuscito a trovare una spiegazione sensata al perchè di questo conteggio che non corrisponde a ciò che la gente si aspetta, oltretutto scopro che non ci sono opzioni che permettono di visualizzare il conteggio corretto, e qui inizia la mia terza e ultima grande delusione.

Ok il conteggio dei “mi piace” non è corretto e tramite FQL ho il vero like count … benissimo personalizzo il pulsante in modo da non mostrare il numero di persone e stampo quello ricavato da FQL … e invece no! Il pulsante “mi piace” non ha impostazioni che permettono di nascondere il conteggio o un layout senza conteggio e non è nemmeno personalizzabile il layout come ben specificato nella pagina di facebook developers

By using the Like Button, you agree to the general guidelines and terms found here. You also agree that you will not modify the Like Button in any way beyond the customization options provided on this page.

e quindi si va in cerca di un’altra soluzione … google per fortuna dopo un po di ricerche mi porta ad una soluzione postata proprio sul forum di facebook dove scopro che il box dei commenti è personalizzabile anche tramite css e così si può nascondere tutto il box dei commenti e lasciare solo il bottone “mi piace” eliminando anche il like count.

Per inserire il comment box nel proprio sito è necessario creare un applicazione su facebook collegata al dominio del sito in questione perchè per creare il box è necessario inserire il seguente codice

<script type="text/javascript" src="http://connect.facebook.net/it_IT/all.js#appId=ID_APPLICAZIONE&amp;xfbml=1"></script>
<div style="height:23px; width:100px; overflow: hidden;position:relative;" id="fb-root"></div>
<script type="text/javascript">
<!--//
jQuery('<fb:comments xid="1234" url="http://www.miosito.com/pagina.html" title="my post title" simple="1" css="http://www.miosito.com/fb.css"></fb:comments>').appendTo('#fb-root');
-->
</script>

notare alla prima riga ID_APPLICAZIONE che va sostituito con il proprio id applicazione, alla seconda riga il div con id fb-root che sarà il contenitore del box commenti e le ultime righe le stampano all’interno del div fb-root il tag fb:comments che altrimenti se messo direttamente nel codice html lo invaliderebbe, così invece il codice resta valido. Ultima cosa da notare è il parametro url del tag fb:comments che è il link della pagina che stiamo visualizzando e css che è l’url del file css esterno che personalizza l’aspetto del box comment.

Vediamo ora il css fb.css

div.content { height:23px; }
div.comment_body { display:none; }
span.connect_widget_not_connected_text { display:none; }
span.connect_widget_facebook_favicon { display:none; }
span.connect_widget_user_action
span.connect_widget_text { display:none; }
div.connect_widget_sample_connection { display:none; }
span.connect_widget_connected_text { display:none; }
span.connect_widget_text { padding:0px; }
a.connect_widget_unlike_link { margin:0px; }
span.connect_widget_user_action b {padding-right:5px;}
span.connect_widget_user_action { display:none; }
div.FB_Loader { display:none; }

con questo semplice css verrano tolti tutti gli elementi che non sono il bottone “mi piace” dal comment box e lo mostrerà così senza nient’altro e una volta espressa la preferenza visualizzera il link per rimuovere la preferenza così .

Spero che vi sia utile e per qualsiasi delucidazione sono qui!

Condividi:
  • Facebook
  • Twitter
  • Google Bookmarks
  • Digg
  • StumbleUpon
  • del.icio.us
  • Yahoo! Buzz
  • Print
  • email

6 thoughts on “Facebook semplici integrazioni … a metà

  1. Ciao,

    molto interessante questo tuo post. Volevo chiederti un po’ di info se possibile….

    Mi interesserebbe molto capire questo:
    se un utente pubblica un video, e questo diciamo riceve 3 “like”, dopodichè un suo amico condivide lo stesso video e riceve altri 2 “like, tu conterai 5 “like” o solo i primi 3?

    Per curiosità, è possibile vedere il concorso che hai costruito?

    Grazie mille
    Ciao
    M.

  2. io vorrei farti una domanda sull’interfaccia nuova
    magari ne sai qualcosa in più tu
    bene, nella vecchia interfaccia era possibile nascondere i like e i commenti , essi venivano racchiusi in un unica barra nella quale compariva commenti e il numero dei commenti a quel post es: “commenti (8)”
    esiste un’impostazione del genere sull’interfaccia nuova?

  3. ciao anonimo sinceramente non avevo mai visto la possibilità di raggruppare commenti e like … mi pare che lo facesse in automatico quando il numero di commenti superava un tot (forse 4/5) e mi sembra che anche dopo l’aggiornamento alla nuova interfaccia si comporti così …

  4. mm no
    prima sotto la barra per gli status
    c’era “impostazioni”
    cliccando li c’era un opzione, riduci commenti
    o nascondi commenti
    non ricordo bene
    e avevi la possibilità di raggrupparli
    🙂 grazie comunque

  5. ora ho capito cosa intendi … mmm ho cercato un po’ sulle varie impostazioni di Facebook ma non trovo dove l’hanno nascosto …

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Connect with Facebook