live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a Node.js Express Facebook GraphQL API to Build Video & Reels Downloader in Browser Using JS
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-node-js-express-facebook-graphql-api-to-build-video-downloader-from-url-in-browser-using-js/
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:02
uh hello guys welcome to this live
0:04
stream so in this live stream we will
0:06
actually be talking about a new tool
0:08
that I added on my website which is
0:10
Facebook video downloader and uh it is
0:14
actually using the graphql API of
0:16
Facebook in the background and I
0:19
developed this tool in nodejs and
0:21
express and I deployed this on my
0:23
website freem mediat tools.com so this
0:25
is the official website of my YouTube
0:27
Channel free mediat tools.com you can
0:29
visit it and here I deployed this tool
0:33
Facebook media downloader if you go to
0:35
this tool here you just need to paste
0:37
the URL of your face Facebook video If
0:40
you go to Facebook and search for the
0:42
video section you can also go to any
0:45
reals that you want it it is also a
0:48
reals downloader also if you want to
0:53
download video and reals it is
0:57
also let me change the title of
1:04
so it is also able to download reals as
1:07
well
1:10
videos as well so I changed the title so
1:14
if you go to this video uh basically
1:16
copy the link right here this is
1:18
actually the video 5 minute 33 second if
1:21
I paste the link inside my tool click on
1:24
download so it will basically give you
1:26
the title of the video which is instant
1:29
Punjabi you can see that that this is
1:30
actually the thumbnail of the video
1:32
which is also short little preview of
1:34
the thumbnail of the video and duration
1:36
in seconds so
1:38
33,300 013 second so it is in
1:42
millisecond duration and there are two
1:46
qualities of it standard quality and
1:48
high quality high definition so if you
1:50
click the standard
1:52
quality your video will open right here
1:55
you will see that it will be opening in
1:58
a normal quality but if you want the
2:01
video in a high quality then then you
2:04
will open you can see that it will you
2:07
can that directly download This by
2:09
clicking these three dot buttons click
2:11
on download and this video will be
2:13
downloaded inside your machine so you
2:16
will see that so in this way so you can
2:20
play this video inside your video play
2:23
you can see that so video is
2:24
successfully downloaded guys so the link
2:26
is given you can directly purchase the
2:28
full source code of this project at the
2:30
checkout page I have also given the live
2:32
demo you can first of all check out the
2:34
live demo before purchasing the full
2:36
source code it is basically built inside
2:38
react nodejs and express and we are
2:41
using Facebook graphql API to actually
2:43
fetch these links and it can even be
2:46
able to download res as well if you go
2:49
to the real section and
2:51
uh just
2:56
uh copy the link here
3:05
if you just
3:08
uh search for a
3:18
real so reals are also there guys you
3:21
can even download reals as
3:26
well so this is actually the video link
3:30
Facebook reels are also there you just
3:34
need to copy the link address of it and
3:36
simply plug this inside this URL and
3:40
basically you will see that now this is
3:42
actually the title thumbnail duration
3:45
standard quality you can see that this
3:49
is high definition
3:51
quality so all these things are coming
3:53
guys so it's a fully flesh tool you can
3:55
even try out for reals as well so
4:00
if you have reals stories you can all
4:03
try
4:06
it so if you are basically interested in
4:11
this tool first of all you can try out
4:12
on my website before purchasing it so
4:15
let me show you the two
4:17
website this is actual
4:20
code I specifically built out a module
4:23
which is free media tools Facebook
4:24
downloader and uh now let me first of
4:27
all build out this application from
4:29
scratch so
4:31
what let me delete all the source code
4:33
so first of all guys what we need to
4:37
do uh let me store this code in a
4:50
file so link is given guys in the
4:53
description you can check out the full
4:54
source code and purchase it
5:01
this is actually the JavaScript code
5:03
here let me
5:05
just so for this specific application
5:08
guys you need two modules here for
5:12
actually constructing the backend server
5:13
in Express we just need to install npmi
5:17
Express and ejs so these are the two
5:19
modules you need to install so I've
5:21
already installed it so I will simply
5:24
start my application node more
5:27
index.js so first of all I
5:30
will
5:33
start Express server so we will simply
5:36
require
5:43
Express and then we will basically be
5:46
setting the view
5:50
engine and then we will basically be
5:53
using these two middlewares which is
5:56
necessary for body passer Express URL
5:58
encoded extended to
6:06
false and express. Json so these two
6:09
middle wees are necessary for body
6:11
passer if you are taking data
6:14
from the forms and then we will
6:18
basically be binding a on click sorry
6:21
whenever we someone goes to the home
6:23
page we will actually be
6:27
showing we will actually be showing
6:29
basically a template so this will be the
6:33
index
6:35
template so for EGS you need to make a
6:39
views folder inside your root directory
6:41
and just make index. EGS this will
6:43
actually hold all the HTML code for your
6:45
application I will simply start the
6:47
express application on the port number
6:54
5,000 so you can see that app is
6:56
listening on Port 5,000
7:00
so inside this we will simply make
7:03
a title I will give it as Facebook video
7:08
and real
7:12
Downloader
7:16
so inside
7:19
this we will actually be having the
7:22
container class of botra
7:36
so here we will make a simple form which
7:38
will actually make the post
7:41
request to this
7:47
route and then we will have a simple
7:50
label for actually allowing the user to
7:53
write the URL so enter Facebook video
7:59
so if you just reload your application
8:02
go to Local Host
8:04
5000 you will basically
8:07
see for styling purposes we do need to
8:10
use bootstrap for constructing the UI so
8:13
I will simply paste the CDN for
8:16
bootstrap so after that it will style it
8:20
like
8:20
this so here we do need to have this
8:24
input field so input type a text it
8:28
should be required
8:29
and we will be giving a form control
8:31
class to it we will give it a name
8:34
parameter of URL that's
8:40
so and then we will have this button
8:43
which will say download
8:55
video so you can see that so here the
8:57
user will enter the Facebook video URL
9:00
and there is a button out there now we
9:02
need to construct this post request
9:04
inside you can say app.
9:08
poost uh Slash download FB video and
9:14
uh here we need to first of all get the
9:16
URL which is submitted by the user so it
9:20
will be coming through request. body.
9:22
URL so whatever is the name parameter
9:24
that you have given so name is equal to
9:26
URL so we are simply getting the URL of
9:29
the
9:30
video so here we will first of import
9:33
our special module guys that I
9:36
constructed for you guys it will only be
9:39
available if you purchase it you will
9:41
get this
9:43
module so this is the module that I
9:47
developed it is I call this as free
9:49
media tools Facebook
9:52
downloader so you will get only if you
9:55
purchase it this module it will it will
9:57
be automatically present in the node
9:58
module folder if you check right here it
10:01
is already present free media Facebook
10:04
downloader so once you purchase it the
10:06
overall project you will get this module
10:09
and uh after this we will actually use
10:11
this module to actually download the
10:15
video Facebook and you will pass URL
10:19
this returns a promise we can handle
10:21
this Promise by dot then so this Returns
10:24
the result to
10:26
us and we can console log it
10:31
and then we can rerender the
10:33
template this time passing the result as
10:37
well so here we can simply make this
10:40
result variable as undefined whenever we
10:43
are loading the template for the very
10:46
first time this result will be undefined
10:48
and here we are reentering it and
10:49
passing the result
10:51
variable that's all and now we just need
10:53
to go to index. EGS and right here we
10:56
need to display the information using
11:00
ejs eded JavaScript template so here we
11:03
will write some conditional logic if the
11:06
result variable exist then only execute
11:09
this
11:12
code so this is the actual syntax of
11:26
ejs so video details and and right here
11:30
we will
11:43
have so we will basically have these
11:45
informations displayed the title of the
11:48
video then we will have the thumbnail of
11:51
the
11:53
video the duration of the
11:57
video the standard definition video or
12:01
the high definition video HD video so
12:05
these five things we will display title
12:07
thumbnail duration SD video HD video SD
12:10
stands for standard definition and HD
12:13
stands for high
12:14
definition and right here you will have
12:17
table
12:24
body and inside this you will show the
12:27
title result. title
12:31
in this similar way this will actually
12:33
print out the title of the video and in
12:36
similar
12:38
way we can basically print out all the
12:41
things so what I will do I will not take
12:43
much much time so I will simply copy all
12:46
that and paste
12:50
it so you will see that inside the
12:52
second we are basically displaying the
12:55
image which is result. thumbnail then we
12:57
are displaying result SD result. HD
13:00
result. duration so all this is coming
13:03
in the Json object if I console log the
13:06
response that we
13:08
get you will get in the you will see in
13:11
the console as I submit the URL of the
13:13
Facebook video if I just uh copy link
13:16
address and uh now if I refresh the
13:19
application submit the URL click on
13:22
download video you will see all this
13:24
information that we are displaying right
13:26
here it is coming here the title the URL
13:29
duration St HT all these things the
13:32
title is not given for the video so you
13:35
see that so if
13:44
I so you will see
13:50
that so if you take another video for
13:52
example
14:00
paste it and uh now we will see
14:09
that so this is actual application gu
14:12
it's very fast it fits you all the
14:14
details of that video or you can even
14:17
take reels as example I don't have reels
14:19
so you can cross check uh if you have
14:22
some reals you can even download them
14:24
you can see the option here reals
14:27
option you can
14:35
you can copy the reals as well so in
14:37
this way so if you are interested guys
14:41
the link is given in the description you
14:44
can directly purchase the full project
14:45
source code and uh you will get this
14:48
special model that I constructed
14:50
specifically for this application which
14:51
actually fetches all these videos and
14:54
reels alongside with all the title
14:56
duration SD and HD links
15:00
so thank you very much for watching this
15:01
video and I will be seeing you in the
15:03
next live stream
#Fun & Trivia
#Flash-Based Entertainment
#Music & Audio
#Music Streams & Downloads
#TV & Video
#Online Video
#Photo & Video Sharing
#Other
#Video Sharing