[Music]
so in this video we're going to be
looking at how to implement share it and
the share link
Stacks now here we are in the share it
demo file and we're going to be looking
at this particular grid of icons here
and all the different variations that we
can do with our
icons now I think to kind of get the
gist let's go ahead and create a
completely new instance so here we have
a new page let's go ahead and add the
share it stack to the page and let's go
through the settings here so here under
icons we can choose which social network
we want and what you'll notice is by
default the various social networks have
their particular brand color integrated
by default so you don't need to worry
about what is the LinkedIn blue or what
is Facebook blue all right what is
Twitter
x black it's actually not black right um
it's slightly different what is Twitter
if you still want the old school Twitter
bird right what is Twitter bird blue
right these colors are there by
default then you can configure their
size right so obviously you can just
choose your pixel dimensions here you
can CH 64 whatever okay you can set your
size of your icon next we have the
ability to customize the style so we
have three different styles first you
can have just the icon the default icon
as is then you can also customize just
the color of the logo so let's say you
know I wanted Twitter um the Twitter
bird but I wanted it my own custom color
then we have a third level which allows
us to actually enclose our icon within a
circle then we can customize the
background the border the SVG color as
well as a drop shadow on
Hover now if you are a foundation 6 user
or a CSS Guru you can go ahead and use
your own custom classes here to apply
swatches to even accentuate or style
these even
farther so once you've configured your
icon we can go ahead and configure what
service we want this particular logo to
trigger so in this case obviously we are
at Twitter so we're going to go ahead
and choose um X formerly known as
Twitter okay now by default the
attributes that are going to be shared
are pulled from your website
metadata now we have the SEO helper
stack and part of that stack set is the
SEO meta tags and this allows you to
Define things such as your OG title open
graph image OG URL so on and so forth
this metadata is the data that share it
will look for when generating your share
actions now there are other ways you can
use you know your own metadata
generators to do this as well SEO
helpers is just our product that is a
really efficient way of doing this now
if you don't have SEO Helper and you
want to potentially Define this metadata
manually for the share service you can
go ahead and click on manual in the
share data and you can manually Define
it for this particular share action so
you can Define the title you can Define
the actual URL that's going to be used
you can Define the text so in this case
this is the text that's added to the
tweet that will be posted okay an image
this is primarily used for Pinterest um
so if you're actually using a Pinterest
action um you want to be able to have an
image so that that image is posted to
Pinterest along with your
content then as you saw um in the demo
uh we have the ability to open up in a
popup window and this is what is uh the
actual size of the popup window that
opens up now on mobile devices it is
very nice in that if a user has the
Twitter client installed it'll actually
open up
Twitter um the only exception to this as
of this recording is Facebook where
Facebook will still use the web
interface it won't actually open up
inside Facebook however if you are on
touch you'll notice that there is a
checkbox here that says share sheet on
touch and what that will do is that will
actually instead of open up the native
or the web share interface it'll
actually open up the OS share sheet so
that someone can share to a particular
service such as Facebook or Twitter or
whatever other apps they might have
installed you'll notice that there is
another Shar data called manual Plus
warehouse and what this allows us to do
it the only difference here is it
actually has an image Warehouse URL
instead of a drag and drop image again
this is uh an integration really only
used for Pinterest and actually for
share sheets as well so if you are
integrating with a share sheet this
image can get sent along with the share
sheet now let's let's have a look at the
share link stack and as you see see this
is going to be a very similar interface
to the lot to the previous stack um you
can go ahead and configure your service
now one thing I didn't mention when we
looked at the share action stack we can
go ahead and click custom here and you
can actually configure your own custom
icon so if you have an SVG that You'
like to use you can go ahead and paste
the SVG code directly into here and that
will be used instead of one of the
default icons that comes with share it
now for links we don't really have it's
not nothing crazy fancy would just have
a title for accessibility so you have a
little title tag and then the URL that
you want to link to so this is purely a
way of linking to either pages on your
site or to your social media profiles so
a lot of times you can have multiple
instances of these on the page that you
can then link to all your different
social media profiles
online so I just want to show you some
common use cases that we can use share
it for now a lot of times we're going to
just have maybe up in our layouts maybe
in the top Corner maybe a list of
various icons right they're going to be
right next to each other and the way
share it and share it link
work is that inside edit mode they'll
actually look like they are on top of
each other however they're configured so
when you do that they just magically
just sit right next to each other on the
live page so if we look here in preview
you'll notice that even though they're
on top of each other in edit mode um
they just live directly right next to
each other okay now how can we control
the alignment here by default they will
be aligned left of whatever layout you
have them
in however they follow the common just
content alignment options within your
layout Stacks so here I have the column
Stacks from my starter pack my free
starter pack and in there we can set the
text alignment or the content alignment
um of the content within that layout so
if I would like to Center these I can do
that they'll centered and you'll look
here and now they're centered and then I
can also set them to a line right and
then they're aligned to the right right
so again uh kind of a different way you
might be used to um I do this in a lot
of my other Stacks but yeah little
things like this like little buttons and
whatnot it just makes it convenient
where if you just put them on top of
each other inside edit mode in real life
on the on the page they just sit
directly next to each other um and then
using the content alignment options
inside your layout Stacks is a really
efficient
[Music]
way