Up next in 10
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'll will show you a
0:04
package of social media sharing if you
0:08
do want to display social media icons on
0:10
your next CH or react CHS or gatp
0:13
website this is actual package that you
0:15
will need next share and it is almost
0:19
having 34,000 weekly downloads this is
0:22
actually the command here npmi next Dash
0:25
share I've already installed it it do
0:28
offer its own website as well you can
0:30
check out the documentation so it's say
0:33
social share buttons plugin for next
0:35
shares Gatsby or react Chase as well so
0:40
the installation is pretty simple once
0:42
you install this I will show you a very
0:45
basic example so just make it a
0:47
functional react chairs component you
0:50
can even use it in next chairs as well
0:53
so first of all I will import everything
0:56
from this plugin so it actually offers
0:59
all these social media networks Facebook
1:01
Twitter
1:02
LinkedIn all the major networks so now
1:06
do actually embed any of the buttons we
1:09
simply write uh whatever Network that
1:12
you want to use Facebook and you will
1:14
see Facebook share button and it will be
1:20
imported so this takes actually the URL
1:22
that you want to share so I will just
1:25
say I want to share my website which is
1:28
free mediat tools.com
1:30
the second option it takes is actually
1:32
the
1:33
quote so you can just write any quote
1:36
this
1:38
website inside I think you need to pass
1:42
it
1:45
in yeah curly bracket you need to use
1:48
curly bracket
1:50
here this is amazing website the third
1:54
option it takes is actually the hashtag
1:56
you can even provide some hashtag as
1:58
well if you need to have
2:01
website so if you just now see and
2:05
inside these
2:06
Facebook share button you can even have
2:09
the Facebook icon as well so Facebook
2:11
icon and you can control the sizing by
2:14
providing the size here and then you can
2:16
also turn this round as
2:19
well so if you see now refresh you will
2:22
see this round icon
2:24
appearing and if you want the bigger
2:26
size you can just change let's suppose
2:28
to 90
2:32
so you can see so once the user clicks
2:34
this icon they will be redirected to
2:36
their Facebook feed where automatically
2:39
this hashtag will be present and they
2:41
will be able to share your website so in
2:44
this way this plugin is very much
2:46
helpful and it do offer other networks
2:50
as well such as
2:52
Pinterest Reddit Twitter so you will
2:58
see same goes with read reddit reddit as
3:03
well the convention is
3:09
simple it ALS it also takes the same
3:12
options the URL the
3:14
actual so you'll
3:19
see so it supports all the networks
3:21
Twitter
3:23
Tumblr uh telegram all these things it
3:27
supports WhatsApp as well
3:30
so you can check out the documentation
3:32
as well by going to their official
3:33
website you can see all the basic
3:35
networks are supported so you can easily
3:37
uh embed these
3:39
icons uh to actually share allow the
3:41
user to share your website so you can
3:45
see that
3:46
it actually have a great documentation
3:49
just this is actually the website NEX
3:52
share.
3:53
js. so it's specifically built for next
3:56
CH react CHS and Gatsby so if you do
4:00
have this you can use this social share
4:02
buttons
4:03
plugin so this was the tutorial that I
4:06
wanted to show you thank you very much
4:08
for watching this video and do check out
4:10
my website as well free mediat tools.com
4:12
which contains thousands of tools
4:15
regarding audio video and image and I
4:17
will be seeing you in the next video
#Computers & Electronics
#Internet & Telecom
#Online Goodies
#Social Network Apps & Add-Ons
#Photo & Video Sharing
#Photo & Image Sharing