How to develop your own Facebook Video Downloader in 3 Steps

The majority of us have come across a Facebook video that we wished we could download and save onto our phones or computer so we could later watch the video over and over again.

In this tutorial, I will take you through a step-by-step process to develop your own Facebook video downloader web application that you can use to download unlimited videos from Facebook. At least you can download the public videos available on Facebook and not the private ones. Private Facebook videos are the type that you cannot watch if you are not logged into your Facebook account. If you can still watch the video when you sign out of your Facebook account, then, hurray, it is likely you will be able to download that video with the application that we are going to develop in this tutorial.

I will assume that you have some knowledge about website design and development so when some parts are not explained vividly, I assume you can still follow.

You will need to have a local development environment because we will be using PHP programming language which requires an Apache to run. I use WAMP server as my local web development server. I have never thought of trying any other local server after the first testing WAMP server in 2013 although there are alternatives like XAMPP, AMPPS, MAMP, Laragon, and others. You can learn how to install WAMP server here if you don’t know about it.

STEP 1. Design the interface

To design the interface of the Facebook video downloader application, we will use a bootstrap template. For this tutorial, I used the Navbar Static, one of the example templates from the bootstrap website. You can get this template from here.

First, create a new folder in the www folder in your WAMP server, and let’s call it Facebook-Downloader

Now let’s go and save the bootstrap template. On the template page, Right-Click and select “save as”.

Bootstrap Navbar Static example template

Save the template in the Facebook-Downloader folder we just created in the WAMP www folder. After saving, the folder structure should look like the screenshot below.

Folder Structure after saving the bootstrap template

Change the HTML file name and extension to “index.php”. Afterward, change the folder name to “assets”. Now create one new folder and call it “system”.

When you have successfully done this, your folder structure should look the same as below.

Facebook video downloader folder structure

Now we have some cleanup to do. Let’s go into the “assets” folder, you will find four files in this folder, two of them are CSS files and the others are JS files that have been saved with a .download extension, eg: bootstrap.bundle.min.js.download

You can delete the two js.download files and leave the CSS or you can just remove the .download extension so you will have a .js as the extension, eg: bootstrap.bundle.min.js will be the file name. Let’s go back to the main folder and open the index.php in a code editor, you can use Notepad++, Sublime Text 3, or any other code editor you are comfortable with.

In the index.php

Replace

<link href="./Top navbar example · Bootstrap_files/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

With

<link href="asset/bootstrap.min.css" rel="stylesheet">

Now let’s replace the jumbotron div element.

Replace

<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
<a class="btn btn-lg btn-primary" href="https://getbootstrap.com/docs/4.4/components/navbar/" role="button">View navbar docs »</a>
</div>

With

<div class="jumbotron">
<h1>Download Facebook Videos</h1>
<p class="lead">Online websites that allows you to download and save Facebook videos online.</p>

<form action="index.php#down" method="POST" enctype="multipart/form-data">
<div class="input-group mb-3">

<input type="url" name="url" class="form-control" placeholder="Enter Facebook Video Link" required>
</div>
<div class="text-center">
<button type="submit" class="btn btn-block btn-success"> <i class="fa fa-download"></i> Download Video</button>
</div>
</form>
</div>

After you have added the code correctly, our new page should finally look like this.

The Facebook downloader web application interface

Congratulations!!! You have successfully completed the first step in developing your own Facebook video downloader web application.

STEP 2. Coding the PHP

Now, this is where the fun begins. We need to create the functions that we will use to get the Facebook video that we want to download. Let’s go into the systems folder and create two new PHP files ( action.php and functions.php )

Once you have created the new files, open the functions.php in your code editor.

Copy & Paste the below code into it and save.

<?php
//function to pass facebook video url through curl
function url_get_contents($url)
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.47 Safari/537.36');
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}

//function to get the HD quality video link
function hdLink($curl_content)
{
$regex = '/hd_src:"([^"]+)"/';
if (preg_match($regex, $curl_content, $match)) {
return $match[1];
} else {
return;
}
}

//function to get the SD quality video link
function sdLink($curl_content)
{
$regex = '/sd_src_no_ratelimit:"([^"]+)"/';
if (preg_match($regex, $curl_content, $match1)) {
return $match1[1];
} else {
return;
}
}

//function to decode the facebook video title
function cleanStr($str)
{
return html_entity_decode(strip_tags($str), ENT_QUOTES, 'UTF-8');
}

//function to get the facebook video title
function getTitle($curl_content)
{
$title = null;
if (preg_match('/h2 class="uiHeaderTitle"?[^>]+>(.+?)<\/h2>/', $curl_content, $matches)) {
$title = $matches[1];
} elseif (preg_match('/title id="pageTitle">(.+?)<\/title>/', $curl_content, $matches)) {
$title = $matches[1];
}
return cleanStr($title);
}

Now let’s open the action.php file in the code editor and paste the code below into it and save.

<?php
//include the functions file
require_once(__DIR__ . "/functions.php");

if (!empty($_POST['url'])) {

//get data for URL
$data = url_get_contents($_POST['url']);

//get the video links and title
$hdlink = hdLink($data);
$sdlink = sdLink($data);
$title = getTitle($data);

if ($sdlink != "" && $hdlink != "" ) {
//Get both the SD and HD video quality
$download_button = '<a target="_blank" href="'.$sdlink.'" class="btn btn-lg btn-block btn-success"> (MP4) Download SD Video</a>';
$download_button .= '<a target="_blank" href="'.$hdlink.'" class="btn btn-block btn-lg btn-success"> (MP4) Download HD Video</a>';

}elseif($sdlink != ""){
//Get the SD video alone
$download_button = '<a target="_blank" href="'.$sdlink.'" class="btn btn-lg btn-block btn-success"> (MP4) Download SD Video</a>';

}elseif($hdlink != ""){
//Get the HD video alone
$download_button = '<a target="_blank" href="'.$hdlink.'" class="btn btn-lg btn-block btn-success"> (MP4) Download HD Video</a>';

} else {
//Return blank if there is no video
$download_button = '';
}

?>

<section class="text-center">
<div id="down" class="container">
<div class="row">
<div class="col-12 col-md-12 mt-5 mb-5">
<h2 class="text-success">Great!! Download Your video Now</h2>
</div>

<div class="col-12 col-md-6">
<h3><?php echo $title; ?></h3>
</div>

<div class="col-12 col-md-6">
<?php echo $download_button; ?>

<a href="/" class="btn btn-block btn-lg btn-primary">Convert Again </a>
</div>
</div><!--.row-->

</div><!--.container-->
</section>

<?php } ?>

If you have added the codes successfully, the final thing to do is to include the action.php into the index.php. It means that when you enter a Facebook video URL link in the search field and click Download Video, the form will POST through the action.php file which will call the url_get_contents() function, this will then return the MP4 video buttons giving you the opportunity to download and save the video either in SD or HD quality.

You get the whole drift now right, great, now let’s open the index.php file in the code editor. Right under the closing </form> tag, copy and paste the code below into that space

<?php include(__DIR__ . "/system/action.php"); ?>

Include the action.php file in the index.php

STEP 3  – Download a Facebook video

If you have followed all the steps correctly, your Facebook video downloader application should be ready now. This application will enable you to convert videos from Facebook to MP4 .You can go on Facebook to copy the URL of any video you wish to download. However, make sure the video is a public video because if it is not, then this code cannot download it.

You can test your application with this Facebook video link: https://www.facebook.com/TheMoveChannel/videos/1467900783381729/

I hope this tutorial was helpful. You may leave a comment below to let me know how you did.