How To Display Facebook Page Posts On Website Using PHP?

Before we start coding, you might be someone NOT interested in coding. If that's the case, you should use a website plugin like SociableKIT. Watch the following video.

What's next? You can try SociableKIT now, view a live demo here or continue with the code tutorial below.

Let's code!

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 posts! Today we will display Facebook page posts on your PHP wesbite.

I know, you can embed your Facebook page posts 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 Page Posts Feed on Website - Output
3.0 Get your page access token
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 What’s Next?
18.0 Related Source Codes
19.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 Facebook Page Posts Feed - Output

2.1 BASIC 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 posts on website - demo screenshot

2.2 PRO Source Code Output

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

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

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

3.0 Get your page access token

Before you can get any data from your Facebook page via the graph API, you need a "page" access token.

Follow this detailed tutorial about how to get a page access token: How to get a Facebook page access token?

Replace YOUR_ACCESS_TOKEN with your page access token.

4.0 Create index.php and add a page title.

<?php
$page_title = "Facebook page posts";
?>

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 = "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 PRO 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 BASIC Source Code

FEATURES BASIC
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 PRO Source Code

FEATURES PRO
All features of the BASIC 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
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!

17.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?

18.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 Page EVENTS on Website
Display Facebook Page PHOTOS on Website
Display Facebook Page VIDEOS on Website
Display Facebook Page POSTS on Website
Display Instagram FEED On Your Website
Display Twitter FEED on Website
Display Google+ FEED on Website

19.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 posts on website using PHP and Facebook Graph API!