Up next in 10
Build a React.js Twitter API to Embed X(Twitter) Timeline,Posts & Tweets on Website in Browser
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 package
0:05
which allows you to display
0:08
Twitter you can able to interact with
0:11
Twitter API and display your Twitter
0:14
profile you can have all these buttons
0:16
to display Twitter videos from URL so
0:19
you can see I'm displaying my own post
0:21
Twitter
0:22
post from the URL and displaying it
0:25
inside the react CHS application we are
0:27
also displaying these buttons to
0:29
directly DM you or you can follow them
0:32
post it to your Twitter hashtag you can
0:36
directly message them and also we are
0:37
displaying the Twitter video from URL so
0:39
all these widgets are coming from a
0:42
package which allows you to directly
0:44
interact with the Twitter API and it
0:46
does offer these all these components so
0:49
the actual package name is if you go to
0:52
npmjs.com and just search for this
0:54
package react Twitter embed this is
0:58
actually the name of the package
1:00
if you just write it on npmjs.com react
1:04
Twitter embed component and it it's the
1:07
simplest way to add Twitter widgets to
1:09
your react Chase project and it's almost
1:11
having 78,000 weekly downloads so this
1:15
is actually the command I've already
1:17
installed this so you can install this
1:20
by executing this command so I will show
1:22
you a very basic example of using this
1:25
so just make a simple functional
1:27
component so first of all what we will
1:29
do we will display our profile Twitter
1:33
profile so now to display that Twitter
1:35
profile first of all in the diff tag I
1:37
will just style it and just pick a
1:41
maximum width of 800 pixel and I will
1:44
just pick a margin of zero Auto just to
1:47
make it in the center of the
1:49
screen and inside this we will actually
1:53
embed our
1:57
Twitter timeline so if you want to embed
2:00
the Twitter
2:02
timeline there is a specific component
2:04
for this so all these components will be
2:06
coming from this package so what I will
2:08
do I will import all these package you
2:11
will see Twitter timeline Twitter share
2:14
button follow button hashtag button
2:16
mention button tweet you can ED moment
2:20
PM button video so all these things are
2:22
coming from this package so we are
2:25
simply including our timeline so you can
2:29
EAS pass some options right here to this
2:32
component so very first option it takes
2:34
is the source type so it will be a
2:38
profile and here you can give your
2:41
actual Twitter profile URL so mine is
2:46
geeky Gotham 1997 so this will display
2:49
my profile and we can even provide some
2:51
options right here which is height of
2:54
the 400 so if you refresh now what you
2:58
will see in the
3:03
browser
3:04
[Music]
3:06
so Twitter timeline embed is not defined
3:09
sorry
3:12
this T is not Capital
3:16
here so if you refresh now what you will
3:20
see your Twitter timeline will display
3:23
right here a short little preview and
3:26
then it will say that post from gy aam
3:29
and here you can follow it to see more
3:31
on X so when you click it it will be
3:33
redirected to my profile so you can see
3:36
that so in this way you can display the
3:39
timeline the second component it offers
3:42
is the if you want to specifically
3:44
display a specific tweet you can embed
3:49
it so here you need to specify your
3:52
Tweet ID so whatever is your twet ID you
3:55
can display it
4:03
by passing this prop which just tweet ID
4:06
so what you will
4:10
see so this is my tweet which is
4:12
displaying you will see
4:15
that all these controls will display the
4:18
user can directly like as it and when
4:21
they like it they will be redirected to
4:23
your post and they can like the post so
4:26
in this way you can display your
4:28
specific post and then we can also have
4:31
a share button as well
4:33
appearing if you embed the share
4:37
button whatever you want to share let's
4:40
suppose I want to share my profile of
4:42
Facebook so I will just replace the
4:44
address of
4:49
this and then here you can provide some
4:52
options as
4:54
well which is
5:02
so now if you also see there will be a
5:04
share button which will be
5:08
embedded so this is your share button if
5:11
you click the share
5:13
button you can
5:17
see so after this we also have the
5:21
mention button hashtag Button as well so
5:24
if you want to mention your profile name
5:27
there is a mention button inside Twitter
5:29
as as well if you use Twitter on a daily
5:32
basis you will know here you need to
5:35
profile provide your username which is
5:38
this
5:39
one so if you refresh now there you will
5:41
also
5:42
see a mention button you can directly
5:45
post it by clicking this button you can
5:48
directly post whatever to your timeline
5:50
click on the post
5:53
button and then we have the hashtag
5:56
button follow Button as well
6:01
so all these components you can display
6:04
it so this is the hashtag button you can
6:06
provide a specific hashtag and then
6:09
there is a follow button you'll replace
6:11
your whatever is your username so when
6:14
they click on follow they can follow you
6:17
directly by clicking this follow button
6:19
so you can see that and then we have
6:22
the
6:23
hashtag this hashtag will be
6:25
automatically be embedded you will see
6:27
that whenever you're writing the post
6:31
so then we also have the DM button the
6:34
moment share button as
6:40
well so whatever you want to share you
6:43
can embed the ID and the DM Button as
6:45
well
6:48
so so you will see that you can DM them
6:52
by clicking so you can directly directly
6:55
message you by clicking the message and
6:58
lastly if if you want to specifically
7:00
display a Twitter video you can even
7:02
display it by using this component
7:05
Twitter video embed and here you need to
7:07
replace the ID of the video which you
7:10
want to display on your website so you
7:12
will see the video to it will also
7:14
display and if you play the video the
7:16
video will play in the new
7:19
tab so we're displaying this video you
7:22
just need to paste this ID in the
7:24
URL and it will now show so in this way
7:28
you can directly embed post videos you
7:31
can embed the profile timeline you can
7:34
embed the share buttons mention buttons
7:36
DM buttons of Twitter so it's a powered
7:40
by Twitter API this module specifically
7:43
for react shars it is using Twitter API
7:45
in the background
7:46
X so to build out these widgets so it's
7:49
a complete free API open source you can
7:52
use it inside your react CH project if
7:54
you are working with Twitter so thank
7:56
you very much for watching this video
7:58
and do check out my website as well
8:00
freem mediat tools.com which contains
8:03
thousands of tools regarding audio video
8:05
n MH and I will be seeing you in the
8:08
next video
#Online Media
#Multimedia Software
#Social Network Apps & Add-Ons