How To Display Facebook FEED on Website? Step By Step Guide!

display-facebook-feed-on-website
Before we start coding, let me ask you this: Do you really want to code this feature on your website? Or would you prefer to use a website plugin that does the trick instantly?

There is an easy way to customize & embed Facebook feed on your website. No coding required. How? Use the DSM Website Plugin! Learn how to use it from this Step by step tutorial.

Going back to coding…

Hey guys! We have a new Facebook script for you!

This one is closely related to our previous FB scripts: Displaying Facebook page photos and events on your website.

For those who are not familiar with it, our Facebook scripts can synchronize data, like photo albums and events, from your Facebook page to your website.

Now it’s time to share with you how to do it with your Facebook page feed! Today we will display Facebook page feed on your PHP wesbite.

I know, you can embed your Facebook page feed using the Facebook page plugin, but you cannot customize the look and feel. It looks like the default Facebook interface.

Don’t get me wrong, it looks good! But sometimes, our design scheme or our clients have a different requirement, they want the Facebook feed to look different.

The good news is, our code for today is a way to do it!

Today’s post will cover the following content:

1.0 Source Code Overview
2.0 Display Facebook Feed on Website – Output
3.0 Create An App
4.0 Create index.php and add a page title.
5.0 Enable Bootstrap
6.0 Initialize Variables
7.0 Get JSON Contents
8.0 Decode JSON
9.0 Loop Through Posts
10.0 Format Time
11.0 Show Post Details
12.0 Link To Content
13.0 Custom CSS
14.0 How to Display Likes and Comments?
15.0 What People Say About This Code?
16.0 Download Source Code
17.0 Social Media Scripts – LEVEL 3 – PRO PACK
18.0 What’s Next?
19.0 Related Source Codes
20.0 Some Notes

Let’s get started!

1.0 Source Code Overview

Today we’re going to do a code that:

1. Gets any type of posts like videos, statuses or pictures, from a Facebook fan page wall feed (using Facebook Graph API).

2. Display these posts or contents to a webpage (assuming it is your website) beautifully with Bootstrap. If you’re not yet familiar with this awesome front-end framework, see our step by step Bootstrap tutorial here. It is also responsive so it’s one advantage for mobile devices.

2.0 Display Facebook Feed on Website – Output

2.1 LEVEL 1 Source Code Output

It is important to know where we are going. You can view output of our step by step tutorial here:

display facebook feed on website - demo screenshot

2.2 LEVEL 2 Source Code Output

display-fb-timeline-feed-PRO-demo-screenshot

LEVEL 2 source code also has a timeline view.
site-timeline-view-display-facebook-page-timeline-feed-on-website

2.3 LEVEL 3 Source Code Output

LEVEL 3 source code has almost the same output as LEVEL 2, but it is coded differently. We use PHP classes and so it is easier to use

See the full list of features in section 16.1 to 16.3 below. It has all the details of these features.

Now, let’s take a look at how the LEVEL 1 source code was made. Enjoy the following step by step tutorial!

3.0 Create An App

Create an app, get your app id and secret keys, and generate your access token using the URL below.

https://graph.facebook.com/oauth/access_token?client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET&grant_type=client_credentials

4.0 Create index.php and add a page title.

<?php
$page_title = "Facebook Page Feed";
?>

5.0 Enable Bootstrap

Put a Bootstrap-enabled basic HTML after the code on section 3.0

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?php echo $page_title; ?></title>

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>
<body>

<div class="container">
	<div class='col-lg-12'>

	<!-- page feed code will be here -->

	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</body>
</html>

6.0 Initialize Variables

Inside the div tag with ‘container’ class, put the page header and initialize the essential variables.

<?php
echo "<h1 class='page-header'>{$page_title}</h1>";

$fb_page_id = "change_to_your_fb_page_id";
$profile_photo_src = "https://graph.facebook.com/{$fb_page_id}/picture?type=square";
$access_token = "change_to_your_access_token";
$fields = "id,message,picture,link,name,description,type,icon,created_time,from,object_id";
$limit = 5;
?>

7.0 Get JSON Contents

Specify the following JSON url and get contents.

$json_link = "https://graph.facebook.com/{$fb_page_id}/feed?access_token={$access_token}&fields={$fields}&limit={$limit}";
$json = file_get_contents($json_link);

8.0 Decode JSON

Decode the JSON string and count the given items.

$obj = json_decode($json, true);
$feed_item_count = count($obj['data']);

9.0 Loop Through Posts

Loop through the given items and prepare the values on variables.

for($x=0; $x<$feed_item_count; $x++){

	// to get the post id
	$id = $obj['data'][$x]['id'];
	$post_id_arr = explode('_', $id);
	$post_id = $post_id_arr[1];

	// user's custom message
	$message = $obj['data'][$x]['message'];

	// picture from the link
	$picture = $obj['data'][$x]['picture'];
	$picture_url_arr = explode('&url=', $picture);
	$picture_url = urldecode($picture_url_arr[1]);

	// link posted
	$link = $obj['data'][$x]['link'];

	// name or title of the link posted
	$name = $obj['data'][$x]['name'];

	$description = $obj['data'][$x]['description'];
	$type = $obj['data'][$x]['type'];

	// when it was posted
	$created_time = $obj['data'][$x]['created_time'];
	$converted_date_time = date( 'Y-m-d H:i:s', strtotime($created_time));
	$ago_value = time_elapsed_string($converted_date_time);

	// from
	$page_name = $obj['data'][$x]['from']['name'];

	// useful for photo
	$object_id = $obj['data'][$x]['object_id'];
}

10.0 Format Time

To get “time ago” text, put the following function code below the ending HTML tag.

// to get 'time ago' text
function time_elapsed_string($datetime, $full = false) {

	$now = new DateTime;
	$ago = new DateTime($datetime);
	$diff = $now->diff($ago);

	$diff->w = floor($diff->d / 7);
	$diff->d -= $diff->w * 7;

	$string = array(
		'y' => 'year',
		'm' => 'month',
		'w' => 'week',
		'd' => 'day',
		'h' => 'hour',
		'i' => 'minute',
		's' => 'second',
	);
	foreach ($string as $k => &$v) {
		if ($diff->$k) {
			$v = $diff->$k . ' ' . $v . ($diff->$k > 1 ? 's' : '');
		} else {
			unset($string[$k]);
		}
	}

	if (!$full) $string = array_slice($string, 0, 1);
	return $string ? implode(', ', $string) . ' ago' : 'just now';
}

11.0 Show Post Details

Inside the for loop, show the profile image thumbnail, the type of what he shared and the caption entered by the user.

echo "<div class='row'>";

	echo "<div class='col-md-4'>";

		echo "<div class='profile-info'>";
			echo "<div class='profile-photo'>";
				echo "<img src='{$profile_photo_src}' />";
			echo "</div>";

			echo "<div class='profile-name'>";
				echo "<div>";
					echo "<a href='https://fb.com/{$fb_page_id}' target='_blank'>{$page_name}</a> ";
					echo "shared a ";
					if($type=="status"){
						$link="https://www.facebook.com/{$fb_page_id}/posts/{$post_id}";
					}
					echo "<a href='{$link}' target='_blank'>{$type}</a>";
				echo "</div>";
				echo "<div class='time-ago'>{$ago_value}</div>";
			echo "</div>";
		echo "</div>";

		echo "<div class='profile-message'>{$message}</div>";
	echo "</div>";
echo "</div>";
echo "<hr />";

12.0 Link To Content

Still inside the div with ‘row’ class on the previous step. Show the link to the actual content, the thumbnail and if it is a status, just show a link.

echo "<div class='col-md-8'>";
	echo "<a href='{$link}' target='_blank' class='post-link'>";

		echo "<div class='post-content'>";

			if($type=="status"){
				echo "<div class='post-status'>";
					echo "View on Facebook";
				echo "</div>";
			}

			else if($type=="photo"){
				echo "<img src='https://graph.facebook.com/{$object_id}/picture' />";
			}

			else{
				if($picture_url){
					echo "<div class='post-picture'>";
						echo "<img src='{$picture_url}' />";
					echo "</div>";
				}

				echo "<div class='post-info'>";
					echo "<div class='post-info-name'>{$name}</div>";
					echo "<div class='post-info-description'>{$description}</div>";
				echo "</div>";
			}

		echo "</div>";
	echo "</a>";
echo "</div>";

13.0 Custom CSS

Put some custom CSS inside the head tag, preferably under the CSS line of bootstrap.min.css

<style>
.profile-info{
	overflow:hidden;
}

.profile-photo{
	float:left;
}

.profile-photo img{
	width:40px; height:40px;
}

.profile-name{
	float:left; margin:0 0 0 .5em;
}

.time-ago{
	color:#999;
}

.profile-message{
	margin:1em 0;
}

.post-link{
	text-decoration:none;
}

.post-content{
	background: #f6f7f9; border: 1px solid #d3dae8; overflow:hidden;
}

.post-content img{
	width:100%;
}

.post-status{
	margin:.5em; font-weight:bold;
}

.post-picture{
	width:25%; float:left;
}

.post-info{
	width:70%; float:left; margin:.5em;
}

.post-info-name{
	font-weight:bold;
}

.post-info-description{
	color:#999;
}
</style>

14.0 How to Display Likes and Comments?

You just have to add the ‘likes’ and ‘comments’ on the $fields variable. It will show you additional data on the JSON result that you can parse and use in any way you want.

In the LEVEL 2 demo, I added a feature that if the likes and comment count were clicked, it will show the actual likes and comments data. It was achieved using jQuery.

15.0 What People Say About This Code?

I’m so glad that other people are delighted by this code, here are some of them!

★★★★★ “This guy is the best. There was a small issue and he me helped right away. I recommend this script to everybody. Instead of wasting time by copy pasting, just purchased the package and saved a lot of time also it came with many ajax features.” ~ Aykun

★★★★★ “BIG THANKS! I’ve been searching and messing around with SDK, Composer, FB APIs… to achieve to place feeds in my FB page to appear on my website without any luck until now.” ~ Hip

★★★★★ “Hi there Mr. Ninja, thanks for that guide and your effort. It is working great, after I understood how to use it. :)” ~ Martin Pfeiffer

★★★★★ “Like a boss! You’re awesome! Thanks a lot!” ~ Freddy Moran Jr.

★★★★★ “Thanks for the script!” ~ Omer Rosenbaum

★★★★★ “Thanks a lot. Amazing support. Let me know if there is anywhere that I can write a review.” ~ A. Cetinkaya

16.0 Download Source Code

You can get the source code by following the whole, well detailed tutorial above. But isn’t it more convenient if you can just download the complete source code we used, and play around it?

There’s a small fee in getting the complete source code, it is small compared to the value or skill upgrade it can bring you, or income you can get from your website project or business.

For a limited time only, I will give you the source code for a low price. DOWNLOAD THE SOURCE CODE by clicking the green buy button below.

16.1 Download the LEVEL 1 Source Code

FEATURESLEVEL 1
Do it once: update your Facebook timeline feed and reflect it on your websiteYes
Save time figuring out and coding these features on your websiteYes
Display Facebook page name with linkYes
Automatically show type of post, it can be status, link, video, etc.Yes
Type of post is clickable, it links to actual contentYes
Status post will have “View On Facebook” linkYes
Link posts will show the link thumbnail, title, and descriptionYes
Shows posted photoYes
Display number of likesYes
Display number of commentsYes
Bootstrap UI enabledYes
Responsive layout (great for mobile devices!)Yes
Show “time ago” of postsYes
Show like and comment iconsYes
Free source code updates for 6 months.Yes
Free fast and friendly email support for 6 months.Yes
LEVEL 1: BUY AND DOWNLOAD NOW USING
* You can use your debit or credit card with PayPal.

16.2 Download the LEVEL 2 Source Code

FEATURESLEVEL 2
All features of the LEVEL 1 source code.Yes
Clickable link to other people or pages mentioned in a postYes
Load people who liked and commented on a post via AJAXYes
Show post commentsYes
Show people who commented and link to their profilesYes
URLs on post will be a clickable link automaticallyYes
Show some people who liked a post and link to their profilesYes
Load more posts automatically when scrollingYes
Will show newly loaded contents with all the features aboveYes
Timeline viewYes
Responsive timeline viewYes
LEVEL 2: BUY AND DOWNLOAD NOW USING
* You can use your debit or credit card with PayPal.

16.3 Download LEVEL 3 Source Code

FEATURESLEVEL 3
All features of LEVEL 1 and LEVEL 2 source codes.Yes
Uses a PHP Class (Object Oriented)Yes
4-Step Only IntegrationYes
Include class & class instanceYes
printCSS_DsmFacebookTimeline(); methodYes
printContents_DsmFacebookTimeline(); methodYes
printJavaScript_DsmFacebookTimeline() methodYes
Well-documented via code commentsYes
Fast & friendly support from me for 9 monthsYes
LEVEL 3: BUY AND DOWNLOAD NOW USING
* You can use your debit or credit card with PayPal.

Do you need more reasons to download the source code?

MORE REASONS TO GET IT
Buy only once, use on up to 10 websites and Facebook pages!Yes
No different kind of licenses.Yes
No many different pricing schemes.Yes
No monthly or any recurring fees.Yes
No need to rely on another website to render Facebook timeline feedsYes
No need for codes from other websites.Yes
You can learn more how to code, I love teaching and can give you free tips!Yes
Familiarize yourself with the Facebook Graph API.Yes
Features are constantly improving, and you get it for free.Yes
Completely customizable.Yes

If you think there’s a missing feature, please let us know by sending me a message via email mike@codeofaninja.com, or via our official Facebook page! We can work on it!

Thank you for supporting our projects here at codeofaninja.com!

16.4 Do You Want a Demo?

If you want a demo to see if this will work with your own Facebook page, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please provide your Facebook page URL on the message, thanks!

16.5 How To Use It with WordPress?

If you’re using it in a widget, you can just put the source code in a wp-fb folder, and use iframe to load it in your page.

You can also play around with your page.php, more details coming soon.

16.6 Want To Donate More?

For those people who ask how to donate more for my works here at codeofaninja.com, send it to my PayPal ID: mike@codeofaninja.com, thanks a lot!!!

Thanks for your support, it keeps this website alive!

17.0 Social Media Scripts – LEVEL 3 – PRO PACK

Social Media Scripts - LEVEL 3 - PRO PACK
ITEMOriginal CostLEVEL 3 PRO PACK
Display Facebook EVENTS on Website$49.99YES
Display Facebook PHOTOS on Website$49.99YES
Display Facebook VIDEOS on Website$49.99YES
Display Facebook FEED on Website$49.99YES
Display Instagram FEED On Your Website$49.99YES
BONUS! The following script does not have LEVEL 3, only LEVEL 2. We will give them to you as bonus.
Display Twitter FEED on Website$29.99YES
Display Google+ FEED on Website$29.99YES
BUY TO DOWNLOAD LEVEL 3 PRO PACK NOW USING
Read more about this package. * You can use your debit or credit card with PayPal.

18.0 What’s Next?

Today we have learned how to show your Facebook timeline feed on your website.

Did you know that you can also display Instagram feed on your website?

Let us go to the next tutorial: How To Display Instagram FEED on Website?

19.0 Related Source Codes

Did you know that you can also display other social media data on your website? I’ve created tutorials on them too, see the following:

Social Media Script Tutorials
Display Facebook EVENTS on Website
Display Facebook PHOTOS on Website
Display Facebook VIDEOS on Website
Display Facebook TIMELINE on Website
Display Instagram FEED On Your Website
Display Twitter FEED on Website
Display Google+ FEED on Website

20.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, we can solve it faster via Email or FB message, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide an error message and your test or page URL. Thanks!

Please feel free to comment if you have any questions, suggestions, found something wrong or want to contribute to this code.

#2 Become a true Ninja!

  • 1. Subscribe to social media scripts tutorial news and updates.
  • 2. Be updated about what works and what does not work on social media APIs.
  • 3. Be notified for any related social media API updates.
100% Privacy. We will never spam you!

#3 Thank You!

Thanks for visiting our tutorial on how to display Facebook feed on website using PHP and Facebook Graph API!