Bottoni facebook: prevedere chi li vede

PorSEO senza FacebookTutti sappiamo che Facebook è diventato il primo social al mondo. Sappiamo anche che Facebook è arrivato tardi in Italia, rispetto al resto del mondo, ma la risposta degli italiani è stata assolutamente esplosiva, nonostante il digital divide che tagga l’Italia agli ultimi posto d’Europa come tecnologie della comunicazione.

L’incremento pauroso di Facebook si è tradotto in un vero e proprio problema per lo svolgimento delle attività operative: escludendo chi con Facebook ci lavora, il virus di controllare continuamente il proprio status su Facebook ha colpito tutte le aziende “connesse” d’Italia, tanto da indurre a provvedimenti drastici: connessione a Facebook chiusa.

Ho già parlato tempo fa di come eludere i controlli su Facebook – a vostro rischio e pericolo – ma oggi voglio vedere la problematica dall’altra parte: ovvero dalla parte di chi sviluppa i siti. E’ stato infatti grazie all’amico Davide Licordari, grande esperto del mondo zuckerbergeriano, che mi si è concretizzata l’idea che un webmaster deve prevedere che molti dei suoi navigatori potrebbero non potere accedere a Facebook. Ma cosa succede ai suoi pulsanti e componenti sociali, che accedono direttamente al social network?

Un esempio che risponde alla domanda l’ho messo come immagine. Alcuni componenti – tipo il classico LIKE BOX COUNT – si espandono e danno un orrendo messaggio di errore. Come prevenire? Beh poco può fare un CSS, al più si può delimitare lo spazio e dire di non mettere barre di scorrimento. Ad esempio chiamiamo il DIV entro il quale mettiamo il pulsante faceButtonDiv e nel CSS mettiamo:

#faceButtonDiv{width: 65px; height: 65px; overflow:hidden; }

Ma volendo fare qualcosa di più professionale? Beh evitando di chiamare in causa jQuery, possiamo ricorrere ad una semplice chiamata Ajax: chiamiamo la home di Facebook, se risponde visualizziamo il pulsante, altrimenti visualizziamo altro.

<script>
/*
Thanks to:
http://www.xul.fr/en-xml-ajax.html
http://www.davidelicordari.com
*/
function CheckFacebookConnection(fbDivS,noFbDivS)
{
	//recupero gli elementi del DOM
	var fbDiv = document.getElementById(fbDivS);
	var noFbDiv = document.getElementById(noFbDivS);

	//creo oggetto ajax di connessione
    var xhr;
    try {  xhr = new ActiveXObject('Msxml2.XMLHTTP');   }
    catch (e)
    {
        try {   xhr = new ActiveXObject('Microsoft.XMLHTTP');    }
        catch (e2)
        {
          try {  xhr = new XMLHttpRequest();     }
          catch (e3) {  xhr = false;   }
        }
     }

	//evento in ascolto al termine della chiamata
    xhr.onreadystatechange  = function()
    {
		 var facebookOk = false;

		 //se chiamata andata a buon fine
         if(xhr.readyState  == 4)
         {
              if(xhr.status  == 200) {
                  facebookOk = true;
              }
         }

		 //setto lo stile dei DIV
		 if (facebookOk){
			fbDiv.style.display="block";
			noFbDiv.style.display="none";
		 }else{
			fbDiv.style.display="none";
			noFbDiv.style.display="block";
		}
    }

   xhr.open("GET","http://www.facebook.com",  true);
   xhr.send(null);
}
</script>
<div id="fbDiv" style="display:none">Visibile se facebook è accessibile</div>
<div id="noFbDiv">Visibile se facebook non è accessibile</div>
<script>CheckFacebookConnection('fbDiv','noFbDiv')</script>

Questa è solo una delle soluzioni applicabili, per spiegare il meccanismo di verifica tramite una chiamata Ajax. Io ho giocato con la visualizzazione di due DIV, ma si può benissimo fare in modo di pubblicare il pulsante solo se la connessione Facebook è possibile.

L’esempio presentato è in Ajax: se nel sito è presente jQuery si può usare la funzione load() e verificare lo status di ritorno. Se volete potete – quando un utente non ha Facebook – pubblicare il link al mio post sul proxy 😉

Loading Facebook Comments ...

Lascia un commento

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