Transcript

00:10 so in this video we're going to be
00:11 looking at the share it Swatch stack now
00:15 this is a useful stack when you want to
00:17 turn anything you want into a share
00:21 action so here I have a demo where I
00:23 have a picture it's just a picture stack
00:26 I have a header stack and then a button
00:28 stack all three of these Stacks are from
00:30 my starter pack so um it is free go
00:33 ahead and download that now the Sher it
00:35 Swatch can be accessed from the
00:37 components drop down inside site Styles
00:40 or you can access it directly from the
00:43 swatches stack as well in this big huge
00:46 ginormous list it's towards the
00:48 bottom so let's look at some
00:50 implementations here so here in this
00:52 picture stack I have a class of share
00:56 sheet let's look at the share sheet
01:00 Swatch here so here I have a shareit uh
01:03 Swatch and I've added a class of share
01:06 sheet and what I've done is I then
01:08 configured that to work with the share
01:11 sheet service so all I did is I set the
01:14 service to share sheet I said it's going
01:16 to automatically get the metadata from
01:18 the web page if you want you can
01:19 actually manually Define that data as
01:21 well but I'm fine with automatic and
01:24 just by just this one simple thing
01:28 allows me to trigger a Shar sheet action
01:31 just by clicking on this photo let's
01:33 have a
01:35 look so clicking on this gives us access
01:39 to the share sheet super easy we've done
01:43 the same thing here inside Mastadon so
01:45 um in this this is just a header um
01:48 where I've created a class called masto
01:52 sh okay and I have a share it Swatch set
01:57 to that class it's set to the share
02:00 service of Mastadon I've configured my
02:02 pop-up window size and my share data is
02:05 automatic it's going to get acquired
02:07 from The Meta tags on this page let's go
02:09 ahead and in order to use this we need
02:12 to preview in the browser so we'll go
02:14 ahead and click on that so we get our
02:16 pop-up
02:17 window and then it will share to
02:21 Mastadon now last but definitely not
02:24 least this is a common use case for this
02:26 is actually just integrating it into a
02:28 button okay okay now this button stack
02:31 is from my starter pack um if you're
02:33 using like a foundation 6 button there
02:34 would be a class setting here um but the
02:37 starter pack button Works a little bit
02:38 differently so we go ahead in here we
02:40 can click edit link and uh this works
02:43 with any link as well this is how you
02:45 would do it with any sort of Link within
02:47 Stacks um so we go ahead and add a class
02:50 attribute to our link and set that to be
02:52 copy
02:53 link okay again if you're using a
02:56 foundation 6 button it's a little bit
02:57 easier you just have a class setting
02:59 Direct ly here and you can put that
03:01 class on that button and then here I
03:04 have my share it Swatch set to the copy
03:07 link
03:08 class and that simply ties to the copy
03:12 link
03:14 service at that point all I need to do
03:16 is I can click on this and the link is
03:18 magically copied to my
03:21 clipboard now before we go I want to
03:23 show you one small caveat and that is to
03:26 get around content blockers okay since
03:30 we are in control using the Swatch of
03:32 the classes you have to be careful of
03:35 what classes you might want to use let
03:38 me show you an example let's go ahead
03:40 and create a Shar Swatch um for Facebook
03:44 and um what I'm going to do is I'm going
03:46 to create a a class seems logical it's
03:49 going to be
03:50 share- um
03:52 Facebook okay and that's going to
03:55 configure to the Facebook service okay
03:58 and let's go and add this to a button so
04:01 um I talked about Foundation six buttons
04:02 let's just go ahead and use that so I'm
04:04 can use the normal button stack okay and
04:08 um let's just give it a text of um share
04:11 to um Facebook okay and I'm going to
04:15 give it the class of
04:17 share
04:19 share- Facebook okay and uh just for fun
04:23 let's go ahead and uh let's add a little
04:26 bit of radius or roundness and let's
04:28 make it Center L okay right so now I
04:31 have my button share on Facebook and if
04:34 I were to click on that it should open
04:36 up a Facebook share and uh let's test it
04:39 out so here I've previewed my
04:43 page and if you notice the button is
04:46 nowhere to be seen why is that that is
04:49 because I use a Content blocker let's go
04:52 ahead and I'm going to turn off the
04:53 content blocker I use one called one
04:55 blocker I'm going to go ahead and turn
04:56 that off I'm going to pause blocking and
04:59 it's going to refresh my page and
05:01 magically when I turned off content
05:02 blocking my share button is there now it
05:06 wasn't there a second ago it's there
05:08 just because I turned off my content
05:10 blocker now why was that that's because
05:14 of the class name that we chose we chose
05:17 something very explicit that a Content
05:20 blocker thinks it needs to block share
05:24 Facebook
05:26 so what we need to do is be a little bit
05:28 cryptic here so instead of a class share
05:32 Facebook I'm just going to do um FB sh
05:37 okay Facebook
05:39 share okay so now um I have a a class
05:42 called
05:43 FB um and I'm going to go ahead and
05:45 let's go ahead and change this to
05:49 FB here so now my button nothing else
05:52 about my button is everything else is
05:53 the same it just changes the class
05:55 that's all I did let's preview and have
05:58 a look so now my content blockers are
06:01 back
06:02 on and we see our button and if you see
06:05 if we click on this button now it will
06:08 launch our Facebook
06:18 share