Displaying Facebook Page News Feed on a Website

The following tutorial will help us incorporate a Facebook Page News Feed directly onto our PHP-based website without the use of a Facebook Widget such as a “Like Box”. By using the PHP Code below, the web developer will be able to integrate and style the Facebook feed so that it fits seamlessly into a website’s design or template.

SOURCES

Please NOTE: I did not create the PHP Code or develop the steps to enable Facebook Page News Feeds to be included on a website. I have just accumulated the information here on my blog. Therefore, I would like to give credit to the original developers/bloggers listed here:

Original Design by John at: JB Design
Tutorial by Alex at: SixtyNine Design

See the Code In Action

Where I am currently using the datafeed:
BG Karaoke Saloon Home Page with 1 News Feed: BGKaraokeSaloon.com and with 5 News Feed on the NEWS page: BG Karaoke Saloon – NEWS

You Could Pay to Have the Code Created…

Want someone else to develop the code for you? John from JohnDoeDesign.com (link posted above) used to have this code on his site, but now it appears that he simply links to: SmashBalloon.com. Smash Balloon will create a Standalone PHP version (for $14) or a WordPress Plugin. Their code/plugin claims to be completely customizable and fits seamlessly into your website.

Do It Yourself? Then… LET’S BEGIN THE TUTORIAL!

I will apologize in advance for the primitive stature and/or crudity of this walk-through. To get our PHP Code to work we will need our Facebook Page ID (or Name) and obtain an ACCESS TOKEN. To get an Access Token, we must create an App and utilize the APP ID and APP SECRET. So, here we go!

  1. Go to the Facebook Developers Page (https://developers.facebook.com/) and Sign In.
  2. Click on Apps in the Menu bar. Then, click “Create a New App”

  3. Give your APP a name. Leave the next line and checkbox blank. Hit Confirm. Fill Out Captcha and continue.

  4. Copy and Paste the APP ID and APP SECRET into Notepad and then click SAVE CHANGES.

  5. To get your ACCESS TOKEN copy this URL and replace CLIENT_ID and CLIENT_SECRET with the APP ID and APP SECRET previously obtained and pasted into Notepad. https://graph.facebook.com/oauth/access_token?grant_type=client_credentials&client_id=CLIENT_ID&client_secret=CLIENT_SECRET
  6. COPY & PASTE the PHP Code below into your .php web page. To customize, you will need to (or may need to) replace some of the following code with your own data:
    • $FBid = ‘WallyDFantasyFootball’; REPLACE WallyDFantasyFootball with your Facebook Page Name (see RED Circle in Image Below) or Facebook ID.

    • If you do not or cannot use your Facebook Page Name, use this website to find your Facebook Page ID FindMyFacebookID.com
    • Replace the PASTE-ACCESS-TOKEN-HERE (access_token=PASTE-ACCESS-TOKEN-HERE&limit=5) with the access_token you received in step 5 (a long string of characters, numbers, and symbols)
    • In the same “access_token=” line, you will see &limit=5. This is for HOW MANY COMMENTS to include on your page. If you want the most recent five (5) comments listed, then enter &limit=5
    • Before the foreach ($FBdata->data as $news ) I included an echo statement and H2 Tag for the Title of the news feed. You can also include an H2 Tag, IMG, and/or Class CSS after the “//Explode News and Page ID’s into 2 values”. For example my echo statements below set up a DIV with CLASS, an H2 tag, and an image floated right.

    //Explode News and Page ID’s into 2 values
    $StatusID = explode(“_”, $news->id);

    echo ‘<div class=”news-item”>’;
    echo ‘<h2 style=”color: white;”>B.G. Karaoke Saloon – Current Status</h2>’;
    echo ‘<img src=”images/bg-karaoke-saloon-logo.png” alt=”BG Karaoke Updates &amp; News” style=”float: right;” />’;

  7. If you want to EXCLUDE the likes/comments/shares counts, simply remove or comment out the following code:
    //echo ‘<ul class=”meta”><li>Likes: ‘;
    //if (empty($news->likes->count)) { echo ‘0’; }
    //else { echo $news->likes->count; }
    //echo ‘</li><li>Comments: ‘;
    //if (empty($news->comments->count)) { echo ‘0’; }
    //else { echo $news->comments->count; }
    //echo ‘</li><li>Shares: ‘;
    //if (empty($news->shares->count)) { echo ‘0’; }
    //else { echo $news->shares->count . ‘<br />’; }
    //echo ‘</li></ul>’;
  8. FINALLY, Here is the Code that you will need to COPY + PASTE into your PHP-Based web page:

<?php
//Set the page name or ID
$FBid = ‘WallyDFantasyFootball’;
//Get the contents of a Facebook page
//**ENTER ACCESS TOKEN** &limit=5 at the end for number of posts to show
$FBpage = file_get_contents(‘https://graph.facebook.com/’ . $FBid . ‘/posts?access_token=PASTE-ACCESS-TOKEN-HERE&limit=5’);
//Interpret data with JSON
$FBdata = json_decode($FBpage);
//Ttime stamp function
function timeSince($original) {
// Array of time period
$chunks = array(
array(60 * 60 * 24 * 365 , ‘year’),
array(60 * 60 * 24 * 30 , ‘month’),
array(60 * 60 * 24 * 7, ‘week’),
array(60 * 60 * 24 , ‘day’),
array(60 * 60 , ‘hour’),
array(60 , ‘minute’),
);
// Current time
$today = time();
$since = $today – $original;
// $j saves performing the count function each time around the loop
for ($i = 0, $j = count($chunks); $i < $j; $i++) {
$seconds = $chunks[$i][0];
$name = $chunks[$i][1];
// finding the biggest chunk (if the chunk fits, break)
if (($count = floor($since / $seconds)) != 0) {
break;
}
}
$print = ($count == 1) ? ‘1 ‘.$name : “$count {$name}s”;
if ($i + 1 < $j) {
// now getting the second item
$seconds2 = $chunks[$i + 1][0];
$name2 = $chunks[$i + 1][1];
// add second item if it’s greater than 0
if (($count2 = floor(($since – ($seconds * $count)) / $seconds2)) != 0) {
$print .= ($count2 == 1) ? ‘, 1 ‘.$name2 : “, $count2 {$name2}s”;
}
}
return $print;
}
// ADDED CSS STYLING CONTENT
echo ‘<h2>Wally D. Fantasy Football NEWS Feed</h2>’;
//Loop through data for each news item
foreach ($FBdata->data as $news )
{
//Explode News and Page ID’s into 2 values
$StatusID = explode(“_”, $news->id);
//Here is my CSS Styling in an External CSS document – be sure to style class news-item as you need.
echo ‘<div class=”news-item”>’;
//Text/title/description/date
if (!empty($news->story)) { echo ‘<h3>’ . $news->story . ‘</h3>’; }
if (!empty($news->message)) { echo ‘<p class=”wdd-news”>’ . $news->message . ‘</p>’; }
if (!empty($news->description)) { echo ‘<p>’ . $news->description . ‘</p>’; }
echo ‘<p class=”date”>Posted ‘. timeSince(strtotime($news->created_time)) . ‘ ago</p>’;
//Check for rich media
if ($news->type == ‘link’) {
echo ‘<a href=”‘.$news->link.'”><img src=”‘. $news->picture .'” border=”0″ style=”padding-right:10px;” /></a>’;
//Display link name and description
if (!empty($news->description)) {
echo ‘<a href=”‘.$news->link.'”>’. ‘<b>’ . $news->name . ‘</b></a>’;
}
}
else if ($news->type == ‘photo’) {
echo ‘<a class=”photo” href=”‘.$news->link.'”><img src=”‘. $news->picture .'” border=”0″ /></a>’;
}
else if ($news->type == ‘swf’) {
echo ‘<a href=”http://www.facebook.com/permalink.php?story_fbid=’.$StatusID[‘1′].’&id=’.$StatusID[‘0’].'” target=”_blank”><img src=”‘. $news->picture .'” border=”0″ /></a>’;
}
else if ($news->type == ‘video’) {
//Show play button over video thumbnail
echo ‘<a class=”vidLink” href=”‘ . $news->source . ‘”><img class=”playBtn” src=”images/facebook-playBtn.png” /><img class=”poster” src=”‘ . $news->picture . ‘” alt=”‘ . $news->description . ‘” /></a>’;
}
//Check for likes/comments/share counts
echo ‘<ul class=”meta”><li>Likes: ‘;
if (empty($news->likes->count)) { echo ‘0’; }
else { echo $news->likes->count; }
echo ‘</li><li>Comments: ‘;
if (empty($news->comments->count)) { echo ‘0’; }
else { echo $news->comments->count; }
echo ‘</li><li>Shares: ‘;
if (empty($news->shares->count)) { echo ‘0’; }
else { echo $news->shares->count . ‘<br />’; }
echo ‘</li></ul>’;
if (!empty($news->link)) { echo ‘<a class=”viewpost” href=”‘ . $news->link . ‘”>View this post on Facebook</a>’; }
echo ‘</div> <!– end .news-item –>’;
}
?>

Not too sure what 2013 Facebook changes has in store for this PHP Code, but I’m hoping there won’t be much of an impact:
July 2013 Roadmap Facebook Deveolper Changes

Tagged , , , . Bookmark the permalink.

Leave a Reply