How To Display Facebook Page Feed On Website Using PHP? 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 page 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 Page 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 page 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 LEVEL 1 Source Code

FEATURES LEVEL 1
Do it once: update your Facebook timeline feed and reflect it on your website Yes
Save time figuring out and coding these features on your website Yes
Display Facebook page name with link Yes
Automatically show type of post, it can be status, link, video, etc. Yes
Type of post is clickable, it links to actual content Yes
Status post will have “View On Facebook” link Yes
Link posts will show the link thumbnail, title, and description Yes
Shows posted photo Yes
Display number of likes Yes
Display number of comments Yes
Bootstrap UI enabled Yes
Responsive layout (great for mobile devices!) Yes
Show “time ago” of posts Yes
Show like and comment icons Yes
Free email support for 6 months. Yes
Free source code updates. Yes
Download Now

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

16.2 Download the LEVEL 2 Source Code

FEATURES LEVEL 2
All features of the LEVEL 1 source code. Yes
Clickable link to other people or pages mentioned in a post Yes
Load people who liked and commented on a post via AJAX Yes
Show post comments Yes
Show people who commented and link to their profiles Yes
URLs on post will be a clickable link automatically Yes
Show some people who liked a post and link to their profiles Yes
Load more posts automatically when scrolling Yes
Will show newly loaded contents with all the features above Yes
Timeline view Yes
Responsive timeline view Yes
Download Now

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

16.3 Download LEVEL 3 Source Code

FEATURES LEVEL 3
All features of LEVEL 1 and LEVEL 2 source codes. Yes
Uses a PHP Class (Object Oriented) Yes
4-Step Only Integration Yes
Include class & class instance Yes
printCSS_DsmFacebookTimeline(); method Yes
printContents_DsmFacebookTimeline(); method Yes
printJavaScript_DsmFacebookTimeline() method Yes
Well-documented via code comments Yes
Fast & friendly support from me for 9 months Yes
Download Now

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

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 feeds Yes
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
ITEM Original Cost LEVEL 3 PRO PACK
Display Facebook EVENTS on Website $49.99 YES
Display Facebook PHOTOS on Website $49.99 YES
Display Facebook VIDEOS on Website $49.99 YES
Display Facebook FEED on Website $49.99 YES
Display Instagram FEED On Your Website $49.99 YES
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.99 YES
Display Google+ FEED on Website $29.99 YES
BUY TO DOWNLOAD PRO PACK NOW FOR ONLY $309.93 $198

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Read more about this package.

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 page feed on website using PHP and Facebook Graph API!