You can get a Facebook's page feed simply by running a direct GET request to https://www.facebook.com/feeds/page.php?id=your-page-id&format=format. You only need to specify your Facebook's page ID (a numeric value) and the desired return format. In our example we're going to use JSON as the default format. Since jQuery cannot directly access the remote feed, we also need to create a PHP proxy script that will actually perform the request.
The PHP code
Our PHP script, named json.php, simply validates the numeric ID passed by jQuery and fetches the remote feed.
<?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();
}
The jQuery code
All the recent Facebook posts of our pages are contained within the entries array of the returned JSON object. Each post is an object that, in turn, contains several properties. The actual post contents are stored in the content property as an HTML string.
In the following example we're going to build an HTML string by using the content property. This is not always a good idea because the HTML tags returned by Facebook also contain JavaScript calls that will trigger several errors when included outside the Facebook's site.
Facebook returns 30 recent posts. To limit this number, we can set a numeric value as the limit for the items contained within the entries array.
(function( $ ) {
$.fn.facebook = function( options ) {
options = $.extend({
url: "json.php", // PHP script
pageID: "315199031854016", // Your page ID
limit: 5, // How many posts we want to display?
loader: "#loader" // An animated loader to be shown during the AJAX call
}, 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 );
Then we can use our code as follows:
(function( $ ) {
$(function() {
$( "#facebook" ).facebook();
});
})( jQuery );