Si può ottenere il feed di una pagina di Facebook con una richiesta GET a https://www.facebook.com/feeds/page.php?id=your-page-id&format=format. Dovete solo specificare l'ID numerico della vostra pagina ed il formato restituito (nel nostro esempio sarà JSON). jQuery non può accedere direttamente al feed, quindi useremo uno script proxy in PHP che effettuerà la richiesta.
Il codice PHP
Lo script PHP json.php convalida l'ID della pagina ed effettua la richiesta remota.
<?php
header( 'Content-Type: application/json' );
$page_id = $_GET['id'];
$fb_url = 'https://www.facebook.com/feeds/page.php?id=';
if( filter_var( intval( $page_id ), FILTER_VALIDATE_INT ) ) {
$json_url = $fb_url . $page_id . '&format=json';
$curl = curl_init();
$header[0] = 'Accept: text/xml,application/xml,application/xhtml+xml,';
$header[0] .= 'text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5';
$header[] = 'Cache-Control: max-age=0';
$header[] = 'Connection: keep-alive';
$header[] = 'Keep-Alive: 300';
$header[] = 'Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7';
$header[] = 'Accept-Language: en-us,en;q=0.5';
$header[] = 'Pragma: ';
curl_setopt( $curl, CURLOPT_URL, $json_url );
curl_setopt( $curl, CURLOPT_USERAGENT, 'Mozilla' );
curl_setopt( $curl, CURLOPT_HTTPHEADER, $header );
curl_setopt( $curl, CURLOPT_REFERER, '' );
curl_setopt( $curl, CURLOPT_ENCODING, 'gzip,deflate' );
curl_setopt( $curl, CURLOPT_AUTOREFERER, true );
curl_setopt( $curl, CURLOPT_RETURNTRANSFER, true );
curl_setopt( $curl, CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $curl, CURLOPT_SSL_VERIFYHOST, false );
curl_setopt( $curl, CURLOPT_TIMEOUT, 10 );
$json = curl_exec($curl);
curl_close($curl);
echo $json;
exit();
} else {
$output = array();
$output['error'] = 'Invalid page ID';
echo json_encode( $output );
exit();
}
Il codice jQuery
Tutti i post di una pagina Facebook sono contenuti nell'array entries del feed JSON. Ogni voce dell'array è un oggetto che contiene diverse proprietà tra cui content, dove viene memorizzato il contenuto del post come stringa HTML.
Useremo questa proprietà ma tenete presente che l'HTML restituito contiene anche codice JavaScript inline. Il feed restituisce i 30 post più recenti ma noi useremo un valore numerico come limite per evitare di visualizzarli tutti.
(function( $ ) {
$.fn.facebook = function( options ) {
options = $.extend({
url: "json.php", // Lo script PHP
pageID: "315199031854016", // L'ID della pagina
limit: 5, // Il numero di post da visualizzare
loader: "#loader" // Un'immagine animata usata come preloader
}, options);
var _parseData = function( json ) {
var html = "";
if( json && json.entries.length > 0 ) {
var entries = json.entries;
for( var i = 0; i < entries.length; ++i ) {
var entry = entries[i];
var n = i + 1;
if( n <= options.limit ) {
html += "<div class='facebook-status'>";
html += entry.content;
html += "</div>";
}
}
}
return html;
};
var _getData = function( element ) {
$.getJSON( options.url, { id: options.pageID }, function( data ) {
$( options.loader, element ).hide();
var contents = _parseData( data );
element.html( contents );
});
};
return this.each(function() {
var $element = $( this );
_getData( $element );
});
};
})( jQuery );
Quindi usiamo il codice come segue:
(function( $ ) {
$(function() {
$( "#facebook" ).facebook();
});
})( jQuery );