In this tutorial, I will show you how to display Facebook page videos on website using PHP.
Videos from your Facebook page are not shown to your website visitors. You spend a lot of time creating, editing, and managing your videos. But the fans, audience, and customers from your website still do not see your Facebook videos.
Our code in this tutorial will allow you to automatically display your Facebook page videos on your website using PHP. Upload your videos on Facebook and it will also appear automatically on your website.
Contents
- 1 Source Code Overview
- 2 Don’t want to code?
- 3 Display Facebook Page Videos on Website – Output
- 4 Get your page access token
- 5 Create index.php
- 6 Enable Bootstrap
- 7 Specify Variables
- 8 Build JSON Link
- 9 Loop Through Videos
- 10 Format Post Date
- 11 Download the Complete Source Code
- 12 What’s Next?
- 13 Related Source Codes
- 14 Some Notes
Source Code Overview
This code will get the list of videos from your Facebook page 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!
We will display these videos to a webpage (assuming it is your WordPress or PHP website.)
We will use a user interface powered by Bootstrap. If you’re not yet familiar with this awesome front-end framework, see our step by step Bootstrap tutorial here.
Don’t want to code?
Before we continue coding, if you later realized you do not want to code and you need more features, you can use a website plugin called SociableKIT. It is the best no-code tool for the job.
You can easily customize the look and feel of your Facebook page videos feed and embed it on your website in 3 minutes. The videos feed on your website will update automatically.
Follow this tutorial: Embed Facebook page videos on website. You can also embed Facebook page live stream and Facebook page playlist videos. There’s a free plan that you can use if you don’t need the premium features of SociableKIT.
Display Facebook Page Videos on Website – Output
BASIC 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:
PRO Source Code Output
We used 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 BASIC source code was made. Enjoy the following step by step tutorial!
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.
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 = "BASIC - Display Facebook Page Videos on Website";
?>
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">
<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>
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 = "YOUR_ACCESS_TOKEN ";
$fields = "id,title,description,created_time,from,source";
$limit = 5;
Build JSON Link
Use the variable values on the previous section 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']);
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 "<lt;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>";
}
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';
}
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.
Download BASIC Source Code
| FEATURES | BASIC |
| 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. | YES |
| Free support for 6 months. | YES |
Download the PRO Source Code
| All features of BASIC 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 |
| Made with PHP classes | YES |
| Useful class methods & properties | YES |
| 4-step easy integration to your website | YES |
| Free support for 1 year. | YES |
| Free source code updates. | YES |
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 [email protected], or via our official Facebook page! We can work on it!
Thank you for supporting our projects here at codeofaninja.com!
Please provide your Facebook page URL on the message, thanks!
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 Page POSTS on Website?
Related Source Codes
| 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 | |
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 [email protected], 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.
#3 Thank You!
Thanks for visiting our tutorial on how to display Facebook page videos on website using PHP and Facebook Graph API!
Hi @michele_vitolo, would you tell me the error message you encountered? Make sure your page access token is valid. You may send the details via email so I can check it. My email is [email protected]
$json = file_get_contents($json_link);
is not accepted some webhosting companies for security reason, can you please make it in Curl format, I really need it but don’t know how to convert it to Curl
Hello @Ali, I cannot add the cURL version for now but I believe a script like this will get you started:
function file_get_contents_curl($url) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_AUTOREFERER, TRUE);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
Another solution is to find a web hosting provider that can secure the file_get_contents() PHP function.