live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
React.js Project to Embed FB,Insta,YT and X(Twitter) Posts on Website Using react-social-media-embed
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a module
0:05
in react CHS which allows you to
0:09
fetch The Social Network post from
0:13
either any network so let me just show
0:16
you the demo here so it can fetch the
0:19
post from Facebook Instagram Twitter
0:21
LinkedIn Pinterest Tik Tok and YouTube
0:25
as well so all these posts are coming
0:27
from respective networks and you can
0:30
actually paste the URL of the post that
0:32
you want to display and that post will
0:35
now be displaying it so you can just see
0:37
on your screen we are fetching the post
0:40
and displaying it in the application so
0:43
it's a specific react chers module which
0:46
allows you to fetch these post using the
0:50
URL and actually the name of the module
0:53
is react social media embed so if you go
0:56
to npmjs.com and just search for this
1:00
package react social media
1:04
Ed so this is actually the module
1:08
here uh it has got almost
1:11
35,000 weekly downloads and this is
1:14
actually the command here npmi react
1:16
social media
1:17
Ed so I will just show you a very basic
1:20
example in this video on how to use
1:25
this so This is actually the command
1:27
npmi react social media ined
1:30
I've already installed it and it is
1:32
having 35,000 weekly downloads so you
1:36
can see we are displaying this Facebook
1:38
post Instagram post Pinterest LinkedIn
1:42
uh X Twitter post and YouTube video as
1:46
well from the URL
1:49
so now to get started just make a simple
1:52
functional component and we will try to
1:55
import the package using the import
1:57
statement so just use the Port statement
2:03
and from this module react social media
2:07
embed so it contains various components
2:10
if you want to embed Facebook you will
2:12
write Facebook embed and if you want to
2:15
include Instagram Instagram inet so
2:18
similarly we have various components for
2:20
various social media networks Pinterest
2:23
Tik Tok it
2:24
supports it also supports X which is
2:27
called as Twitter and then it also
2:30
supports YouTube as well and if you have
2:33
a custom placeholder image then you can
2:35
even use this component as
2:38
well so now we
2:42
will now to Simply show
2:46
the post we simply paste the link of the
2:52
post that we want to display in the
2:54
application so right
2:57
here you will have H one heading which
3:00
will say social media embed
3:03
demo and inside this you will
3:07
have first of all the Facebook one
3:10
so any Facebook post you can display
3:14
using this component so
3:16
we basically passed a URL as a prop so
3:20
it takes a URL property and here you
3:22
need to paste whichever post that you
3:25
want to display of Facebook so simply
3:27
copy the link and paste it and you can
3:31
even control the width here
3:34
so 100% so if you refresh the
3:36
application now you will see this
3:38
Facebook post will Now
3:40
display and you can click this and the
3:43
user will be redirected to the actual
3:45
Post in the Facebook here you'll see
3:46
that so if you have a personal post you
3:49
can display
3:51
it any post you can
3:58
display so now let suppose if I want to
4:00
display this image I copy the URL and
4:03
simply replace it right
4:15
here so for this uh the post should be
4:19
public so make sure you choose a post
4:22
which is public here
4:40
and similarly you can display the other
4:42
networks as well
4:50
so so for Instagram let's suppose
4:55
we use this component which is Instagram
4:58
embed and again you will pass the URL
5:01
that we want to display and simply
5:07
paste the URL that you want to
5:11
display and if you want the captions as
5:14
well you can include
5:23
it so you can see now it is also
5:26
displaying the you can click the view
5:28
profile widget inside this to go to that
5:32
specific profile so it will redirect you
5:34
Instagram you will see
5:38
that so here you can replace your own
5:41
profile and display it so it
5:44
actually does a very simple job of
5:47
displaying the Instagram post directly
5:49
inside your application then it also
5:51
supports LinkedIn as well which is a job
5:54
based website so it's having this
5:57
specific component again you can pass
6:00
the URL that you want to
6:02
display like
6:06
this and it actually takes the post URL
6:10
as well for LinkedIn so there are two
6:12
properties first is the actual post and
6:15
the URL of that
6:17
post and then we can control the width
6:20
of
6:22
the by saying 100% and
6:27
uh you can even control the height as
6:30
well by passing 570 so if you refresh
6:34
the page here you will see the in uh
6:36
LinkedIn post will also load you will
6:39
see that so this is actually the article
6:41
here which is hosted on LinkedIn so it
6:43
is displaying with this profile picture
6:45
and also this short little preview and
6:48
when the user clicks on it they will be
6:51
redirected to the actual LinkedIn post
6:55
where they can read more about it so in
6:57
this way you can display any post from
7:00
any social media network using this
7:02
module and same goes with Pinterest as
7:05
well Pinterest is again image sharing
7:08
website so here you can simply give it a
7:11
Pinterest embed component pass it a URL
7:14
and then control the withd and the
7:16
height so if you just refresh now you
7:18
will see the Pinterest pin will display
7:20
if you click on it you will be
7:23
redirected to the actual pin which
7:27
is so same goes with with Tik Tok as
7:30
well which is a video sharing
7:36
website so you pass it a URL of
7:39
whichever video you want to
7:42
display and same goes with the X which
7:46
is Twitter so you simply paste the Ed
7:49
URL that you want to
7:52
display so it will actually display this
7:55
profile uh sorry this post here with the
7:58
thumbnail and
8:00
if the user clicks on it they will open
8:02
inside the X
8:05
Twitter and lastly it also supports
8:08
YouTube as well so if you want to
8:10
specifically render a YouTube video
8:13
embed it you can use this component pass
8:17
it to a URL the width and the
8:20
height so you can see now it is
8:23
displaying the video as well so if you
8:26
want this custom post you can use this
8:29
custom component as
8:33
well so here if you have a placeholder
8:36
image that you want to display
8:42
then sorry this need
9:06
so this is actually the module here
9:09
which actually fetches post from
9:11
multiple social media networks and
9:13
display it so it's allinone module and
9:16
it supports all these networks I showed
9:18
you step by step so this is actually the
9:21
module react social media
9:23
embed so thank you very much for
9:26
watching this video and do check out my
9:28
website as as well free mediat tools.com
9:31
which contains thousands of tools
9:33
regarding audio video and
9:35
image and I will be seeing you in the
9:38
next video
#Internet & Telecom
#Web Services
#Online Goodies
#Clip Art & Animated GIFs
#Social Network Apps & Add-Ons
#Photo & Video Sharing
#Photo & Image Sharing
#Social Networks