How To Display Facebook Page Videos On Website Using PHP? Step By Step Guide!

display-facebook-video-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 videos 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…

Do you have a video manager on your website? Do you upload videos on your Facebook page?

If your answer is both YES, you’re wasting a lot of time managing your brand’s videos online.

What if there’s a way to upload a video ONCE, and then let it appear both on your Website and Facebook page?

Will you be happy saving your precious time?

Our code for today will make you happy then, just like we are!

Today I’m gonna teach you how to display publicly available Facebook Page VIDEOS on your website.

This one is great if you want your Facebook page videos to be shown in your website in a synchronized way.

Once you uploaded a video on Facebook, it will be automatically reflected on your website too.

Today post will include the following contents:

1.0 Source Code Overview
2.0 Display Facebook Page Videos on Website – Output
3.0 Create An App
4.0 Create index.php
5.0 Enable Bootstrap
6.0 Specify Variables
7.0 Build JSON Link
8.0 Loop Through Videos
9.0 Format Post Date
10.0 Download the Complete Source Code
11.0 Social Media Scripts – LEVEL 3 – PRO PACK
12.0 What’s Next?
13.0 Related Source Codes
14.0 Some Notes

1.0 Source Code Overview

Here’s an overview of what our code does:

1.1 Gets videos listed with data such as the video itself, video title, description, date posted, etc. from your Facebook fan page without using any Facebook PHP SDK, just the Facebook Graph API!

1.2 Display these videos to a webpage (assuming it is your WordPress or PHP website.)

1.3 Show some awesome UI powered by Bootstrap. If you’re not yet familiar with this awesome front-end framework, see our step by step Bootstrap tutorial here.

2.0 Display Facebook Page Videos on Website – Output

2.1 LEVEL 1 Source Code Output

We have to know where we are going, if we’re done with the code tutorial below, we will achieve this output:

2.1 LEVEL 2 Source Code Output

2.1 LEVEL 3 Source Code Output

LEVEL 3 source code has almost the same output as LEVEL 2, but it is coded better. We use PHP classes and so features are easier to use, more actively improved and added.

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

For now, let us learn how the LEVEL 1 source code was made. Enjoy the following step by step tutorial!

3.0 Create An App

You can follow our tutorial on how to create an app on Facebook developers website.

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

Create index.php and set the timezone, Facebook page and the page title. Put the following code inside index.php

<?php
// set timezone for servers that requires it
date_default_timezone_set("America/Los_Angeles");

// set Facebook page ID or username
$fb_page_id = "katyperry";

// page title
$page_title = "LEVEL 1 - Display Facebook Page Videos on Website";
?>

5.0 Enable Bootstrap

Put a Bootstrap-enabled basic HTML after the code on section 4.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> <!-- /container -->

<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 Specify Variables

Specify the values for the following variables:

  • $profile_photo_src so that the Facebook page primary picture will be rendered in thumbnail.
  • $access_token obtained on section 3.0, this will give us the power to get Facebook page videos.
  • $fields are actually column names in Facebook page videos database.
  • $limit the number of videos you want to be displayed on your page.

Put the following code inside the ‘container’ tags on section 5.0

$profile_photo_src = "https://graph.facebook.com/{$fb_page_id}/picture?type=square";
$access_token = "CHANGE_TO_YOUR_ACCESS_TOKEN";
$fields = "id,title,description,created_time,from,source";
$limit = 5;

7.0 Build JSON Link

Use the variable values on section 6.0 and construct the $json_link. Get the data from that URL, decode it, and count the number of records it returned.

In short, put the following code after the code in section 6.0

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

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

8.0 Loop Through Videos

Loop through each records, extract each video information and place it in an HTML structure.

for($x=0; $x<$feed_item_count; $x++){
	echo "<div class='row'>";
		// video source
		$source = $obj['data'][$x]['source'];

		// display Facebook page video
		echo "<div class='col-md-6'>";
			echo "<video controls class='embed-responsive-item'>";
				echo "<source src={$source} type=video/mp4>";
			echo "</video>";
		echo "</div>";
		

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

			// user's custom message
			$title = isset($obj['data'][$x]['title'])
						? htmlspecialchars_decode($obj['data'][$x]['title']) 
						: "Video #" . $obj['data'][$x]['id'];
			
			$description = isset($obj['data'][$x]['description']) ? $obj['data'][$x]['description'] : "";
			$description = htmlspecialchars_decode(str_replace("\n", "<br>", $description));

			// 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_id = $obj['data'][$x]['from']['id'];
			$page_name = $obj['data'][$x]['from']['name'];

			// display video title
			echo "<h2 style='margin: 0 0 .5em 0;'>{$title}</h2>";

			// display video description
			echo "<div>";
				echo $description;
			echo "</div>";

			// display when it was posted
			echo "<div style='margin:.5em 0 0 0; color: #999;'>";
				echo "Posted {$ago_value} by <a href='https://facebook.com/{$page_id}' target='_blank'>{$page_name}</a>";
			echo "</div>";

		echo "</div>";
		
		echo "<div class='col-md-12'>";
			echo "<hr style='margin:2em 0; border:thin solid #f1f1f1;' />";
		echo "</div>";
	echo "</div>";
}

9.0 Format Post Date

time_elapsed_string() is a function that will return the “time ago” value, from section 8.0, we pass when the video was posted so that we can display something like: 9 days ago, 9 months ago, a year ago, etc…

Put the following code after the closing ‘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';
}

10.0 Download the Complete Source Code

You can get the source code for free 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.

10.1 Download LEVEL 1 Source Code

FEATURES LEVEL 1
Upload videos on your Facebook page, watch them on your website. Yes
Save time figuring out and coding these features on your website. Yes
Display video list from your Facebook page. Yes
Display video title. If none, display video number. Yes
Display video description. Yes
Post date with “time ago” format. Yes
Display Facebook page name (with link) for each video. (opens in new tab) Yes
Bootstrap enabled script. Yes
Responsive layout. (great for mobile devices) Yes
Free source code updates for 6 months. Yes
Free support for 6 months. Yes
Download Now

10.2 Download the LEVEL 2 Source Code

All features of LEVEL 1 source code. Yes
Display number of likes. Yes
Display number of comments. Yes
Display some likers and link to their profiles. Yes
Display commenters and link to their profile. Yes
Display user comments. Yes
Show comments and comment replies on pop up. Yes
Load more videos automatically when scrolling (infinite scroll). Yes
Newly loaded content still has video controls, number of likes, etc. Yes
Will say “All videos were loaded.” when there’s no content to be loaded. Yes
Make links clickable in video description. Yes
Make links clickable in user comments. Yes
Link to actual Facebook page video post. Yes
Likers and commenters are loaded and shown via AJAX Yes
Show comments Yes
Show more comments, loaded via AJAX Yes
Show comment replies Yes
Show more comment replies, loaded via AJAX Yes
Download Now

10.3 Download the LEVEL 3 Source Code

FEATURES LEVEL 3
All Features of LEVEL 1 and LEVEL 2 Yes
Made with PHP classes Yes
Useful class methods & properties Yes
4-step easy integration to your website Yes
Free support and updates for 1 year Yes
Download Now

Need more reasons to download?

MORE REASONS TO DOWNLOAD IT
Buy only once, use on unlimited number of 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 page videos. 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
You get free code and feature updates Yes
Tutorial above is always free and updated every Facebook API update. 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!

10.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!

10.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.

10.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!!!

11.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 LEVEL 3 PRO PACK NOW USING
Read more about this package. * You can use your debit or credit card with PayPal.

12.0 What’s Next?

Today we have learned how to show your Facebook page videos on your website.

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

Let us go to the next tutorial: How To Display Facebook TIMELINE on Website?

13.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

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