Display Facebook Page Videos On Website Using PHP
Previously, we learned how to display Facebook page photo albums on your website.
Today, our tutorial will explore integrating Facebook page videos onto a website using PHP. With this solution, website visitors can easily access the videos you've invested time in creating, editing, and managing on your Facebook page.
Say goodbye to manually uploading videos to both Facebook and your website. Implement our code and have your Facebook videos automatically displayed on your website for your audience to enjoy.
This is a great way to increase engagement on your website and encourage your audience to follow your Facebook page.
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 on a webpage made in PHP. We will use a user interface powered by Bootstrap. See our step-by-step Bootstrap tutorial here if you’re not yet familiar with this excellent front-end framework.
Don’t want to code?
Before we continue coding, if you realize you do not want to code and 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 video 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 streams and Facebook page playlist videos. There’s a free plan that you can use if you don’t need the premium features of SociableKIT.
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:
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';
}
Source code or SociableKIT?
You can choose whether to download our source code or use the SociableKIT Facebook page videos widget.
| FEATURES | Code | SociableKIT |
|---|---|---|
| Upload videos on your Facebook page and automatically display them on your website. | ✔ | ✔ |
| Save time figuring out and coding these features on your website. | ✔ | ✔ |
| Display the list of videos from your Facebook page. | ✔ | ✔ |
| Display video title. If none, display the video number. | ✔ | ✔ |
| Display video description. | ✔ | ✔ |
| Post date with “time ago” format. | ✔ | ✔ |
| Display the Facebook page name (with a link) for each video. (opens in new tab) | ✔ | ✔ |
| Responsive layout. (excellent for mobile devices) | ✔ | ✔ |
| No coding required | - | ✔ |
| Works with any website builders like WordPress, Squarespace, or Wix | - | ✔ |
| Customize colors, font, and more | - | ✔ |
| Event details with a map can be shown in a popup | - | ✔ |
| Priority chat and email support | - | ✔ |
| Lifetime support and system updates | - | ✔ |
| No need to worry about Facebook API updates | - | ✔ |
| Use the buttons below. ↓ | Code | SociableKIT |
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 a Facebook page posts feed on your website?
Let us go to the next tutorial: How To Display Facebook Page POSTS on Website?
What students say?
Don't just take our word for it. See what our students have to say about our tutorials and source codes. We are proud to have helped many individuals and businesses to build their own applications. Here are a few of the testimonials from our satisfied students.
★★★★★ “Wow, I love you guys! The best web programming tutorial I’ve ever seen. So comprehensive, yet easy to follow. I love how you combine all necessary elements in such a neat structure.” ~ Olaug Nessa
★★★★★ “The fact that you’ve put it all together saves so much time and its worth buying the code. Makes me feel good supporting a developer like yourself. Keep up the good work!” ~ Dan Hudson
★★★★★ “Thanks for making these awesome tutorials! I bought your source codes. To be honest, it’s very readable code and helps me understand a lot of things and how it’s done in PHP. Thanks for that again.” ~ Michael Lammens
★★★★★ “Hey Mike, my name is Leonardo from Argentina. I’ve been reading your blog since like 4 months from now, and I really must say: your tutorials are very good, they has helped me in many of my works… Well, thank you very much man. I really admire your work.” ~ Leonardo
★★★★★ “Words can’t express how grateful I am for the work and the articles you post, had some troubles with doing somethings but your articles as per usual hit the hammer right on the head. They are a great way for expanding upon later too!” ~ Jeremy Smith
Got comments?
At codeofaninja.com, we strive to provide our readers with accurate and helpful Display Facebook Page Videos On Website Using PHP Your feedback is essential in helping us achieve this goal.
If you have encountered any issues with the code, have suggestions for improvement, or wish to provide praise, we welcome you to leave a comment below. Please be as descriptive as possible to address your concerns effectively and include any relevant error messages, screenshots, or test URLs.
We request that comments remain on-topic and relevant to the article above. If your question or comment pertains to a different topic, we recommend seeking assistance elsewhere.
Furthermore, we ask that you review our code of conduct before commenting to ensure that your feedback is constructive and respectful.
Thank you for taking the time to provide feedback and for supporting codeofaninja.com. Your contributions help us improve our tutorials and serve the developer community better.
Subscribe for FREE!
Improve your web development skills and stay ahead of the competition by subscribing to our tutorial series. Sign up for FREE and access exclusive, cutting-edge content delivered straight to your inbox.
Take advantage of the chance to elevate your skills and advance your web development career. Subscribe now.
Thank You!
We hope you've found our Display Facebook Page Videos On Website Using PHP helpful and informative. We understand that learning new programming concepts can be challenging, but we're glad we could make it easier for you.
Thank you for choosing to learn with us and for supporting codeofaninja.com! Consider sharing this tutorial with your friends and colleagues who may also be interested in learning about Display Facebook Page Videos On Website Using PHP
The more people know about our tutorials, the more we can help the developer community grow. Keep learning, keep coding, and keep growing as a developer. We can't wait to see what you'll create next!
Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]
I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.