A moltissimi di voi sarà capitato di dover creare una pagina sul vostro sito con del contenuto visibile solo a chi ha fatto “mi piace” su Facebook in una pagina aziendale.
Innanzitutto bisogna creare la propria app in http://developers.facebook.com, perchè, per fare quello che ci serve, abbiamo bisogno di un app ID che Facebook ci deve rilasciare.
Una volta creata la vostra app (usando il tasto Crea Applicazione in alto a destra), vi verrà assegnato un App ID/API Key: è un codice numerico.
Ora quello che ci serve è una pagina .html ed una .php, che useremo per caricare le API di Facebook e indicheremo come gestire la cache al browser.
Create un file e nominatelo facebookapi.php:
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/it_IT/all.js"></script>
Ora create un file index.html:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
div#container_notlike, div#container_like {
display: none;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<div id="container_notlike">
Non hai fatto mi piace sulla mia pagina!
</div>
<div id="container_like">
Ti piace eh?
</div>
</body>
</html>
Come potete notare non c’è ancora traccia del codice javascript per gestire gli eventi. Un attimo di pazienza! Abbiamo semplicemente inserito la libreria jQuery ( una versione non nuovissima, a voi le eventuali implementazioni…) e i due div che dovranno apparire a seconda degli eventi del codice per gestire gli eventi su Facebook.
Sono entrambi nascosti, perchè starà al codice javascript mostrare uno piuttosto che un altro. Viene da sp
Ora dobbiamo inserire il codice javascript nell’head, possibilmente dopo che il DOM è pronto per rispondere. Come si fa? Beh, facile…
$(document).ready(function(e){
//codice...
});
Aggiungiamo ora il codice all’interno del mio document.ready…
window.fbAsyncInit = function() {
FB.init({
appId : '[il vostro APP ID senza le parentesi]',
channelUrl : 'facebookapi.php',
status : true, // controlla lo status su FB
cookie : true, // attiva i COOKIES
xfbml : true // fa il parsing XFBML
});
FB.getLoginStatus(function(response) {
var page_id = "[l'id della vostra pagina di Facebook]";
if (response && response.authResponse) {
var user_id = response.authResponse.userID;
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
FB.Data.query(fql_query).wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
//console.log("Ha già fatto LIKE, mostro la pagina");
$('#container_like').show();
} else {
//console.log("Non ha fatto like");
$('#container_notlike').show();
}
});
} else {
FB.login(function(response) {
if (response && response.authResponse) {
var user_id = response.authResponse.userID;
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
FB.Data.query(fql_query).wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
// console.log("Ha fatto il Like");
$('#container_like').show();
} else {
// console.log("Non ha fatto il Like");
$('#container_notlike').show();
}
});
} else {
//console.log("Non ha fatto il Like");
$('#container_notlike').show();
}
}, {scope: 'user_likes'});
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
Ora tutto dovrebbe funzionare a dovere.
Chiaramente non sarebbe male implementare la pagina facendo si che, invece di mostrare il div con la scritta “hai fatto like”, venisse caricato del contenuto con una chiamata ajax.
Se non vi funziona, commentate pure esprimendo tutto il vostro disappunto 😉
