Hey everyone! This is Scott from sertmedia.com and in this video I'm gonna be
showing you a very very new plugin that just came out. I just purchased it. An
unlimited site license. I'll probably use it on some of my client sites and sites
that I build. And it's called Novashare. It is made by the same team who made
perfmatters, which I already did a video on. I'll put that up here in the little "i" thing.
It's meant to be a very very very lightweight and yet also feature-rich
plugin. One of my common gripes with sharing plugins are, they tend to be
quite bulky. And Social Warfare, as I talked about in its video, I wrote a
specific plug-in that removes some of the junk that it adds. Notably, its usage
of font files. So, it uses a woff2 file and it loads its assets on every
page indiscriminately and those were issues that I initially had with it. This
plugin is really small. It's a very very minimal amount of CSS and I and that's
why I just thought I had to have it right away. I'd like to have things as
clean and lightweight, but allows me to have enough flexibility to use it how I
want. So one of the things that you're gonna see right off the bat, is this
plugin doesn't seem to load anything until you enable it. So we're going to
just turn on the inline content for the post. So what this does is it allows you to have
your share buttons. You can enable it to be inline, floating, or a click to tweet
feature. Which allows to use the block editor to basically put a quote in a box.
That when they click it, it'll tweet that and you can use your @ handle to get
more Twitter followers. I'm a big fan of features like that. As you can see it
supports Facebook, Twitter, Linkedin, Pinterest, Buffer, so on and so forth. It
supports all of the major networks that I would hope. The one thing I do wish is
that it supported as some of the non-English related platforms. Something
like, there's a Russian social network that I'm not even tried to pronounce it.
It's like something another. And then they do not have support for
Sina Weibo, which is a Chinese social network, kind of like Twitter, but
more like Facebook. I wish that they added support for that, just that way
they target international users a little bit better. But it's got about as many
options and some of them are even more than what you even find in Social Warfare Pro.
We will be doing a comparison with Social Warfare, the light version, from a
performance point of view, here in just a minute though. So you turn this on and
we're just going to have the most basic configuration. You'll open up your post
and it adds it over here in the footer. Looks really good and you can enable and
disable any of them as you wish and you can drag them in any order that you wish
as well. You can define a mobile breakpoint, which is where the buttons
will start treating the device as a mobile device. That's pretty flex, it's
very flexible. And it allows you to modify things like the floating bar, for
mobile only users. You could choose to hide the content above a certain
breakpoint. So, depending on your break point here, if you enable this, it will
hide this content if the screen is larger than 1200 pixels and width. So if
I enable this, I expect these buttons to go away. And it does or you could choose to
hide it below that width right there. This is a
little bit confusing because you're able to check both these options, which
doesn't really make a lot of sense to me. If you're gonna have an option to hide
it at the above and below breakpoint, those options should have some sort of
logic that just says if one of these is checked the other one can't be checked
because then it's not gonna display at all. But it exists as options here. You
could choose your button size as small medium and large. And then you could
choose your button shape to be squared, rounded, or circular. If you're curious
what they look like, here is the circular option. It looks just like a circle. They
look really good. And there is the rounded option, which is basically just a
square option with rounded off corners and it also looks really good. There is
no real, large horizontal one, like you see in Social Warfare where it takes
up the whole space. And I think that's in part, due to the amount of buttons you
can have. I also imagine that it'll be added down the line. This plugin just
came out this month, like a couple days ago. So as soon as I saw it and I'm
like, "Ooh. This is really promising and I would use this." And then you have, you
could change the button colors, the hover colors to fit your brand styling through
here. And then you have a total share count, which allows you to display the
total share count for your social share buttons. When you share it to a platform
I'm just gonna click and then delete. It should start incrementing a counter. Now
we're gonna get to share counter here in a minute.
Personally though, I have to say I'm not that big of a fan of share counters. Some
people are, but I personally don't use them. But I'm going to show you them
because a lot of people do like to use them. The floating bar is exactly like the
rest of the options. You enable this and it's a bar that floats. You could choose
to float it over here onto the left-hand side this looks very much like Add This.
Add This is a JavaScript based platform. You just paste the JS on your site and
you're allowed to customize and change how it loads. So it looks really good. I'm
super impressed with how easy it is to get this thing up and running. And if
you're on mobile, we're just gonna simulate a Galaxy S5 here. As you can see,
it now is a button that floats at the bottom of the screen. So, you could if you
knew a little bit of custom CSS, you could go ahead and make it look like
it's a floating bar relatively easily or you could just add enough social
share buttons like this. One thing that's a little odd, in my opinion, is the real
lack of a background color option for the floating bars. I feel like that
should definitely be included because users are going to be using this as a
floating bar in the footer and if you're just using this setting you can't quite
tell how to do that. You could do a button color and the hover color. Then
you have the click to tweet. I'll show you what this looks like. So we're gonna
add it to this post here that came default with WordPress. You'll click Edit
and then we're going to just go to the bottom and when we get to the bottom we
are going to
the Novashare Click To Tweet and then you type in whatever you want. Hello
World. It tells you the amount of characters remaining because remember
with Twitter you can only use 280 characters and then it's gonna have your
@ symbol as well. The call to action you can choose to change it from click
from Click To Tweet to whatever you wish. And then you could choose to remove
your username if you so wish or to remove the URL. You could change the
styling to be more in line with your brand. So you can even use the grey
background or transparent or the blue native Twitter background. Personally, I
will just be using the blue background because I like it to look more in line
with Twitter branding, instead of the website's branding. You could choose to hide
hashtags if you so wish. And really simple and straightforward. So, if you now
come over to this post scroll down to the bottom, you get this nice little
Click To Tweet. We'll click it. Will have it pop up and it says Hello World and it's
linking to this post. Now, you might be wondering, "Well that's great, but how do I
make it tweet at me?" This is where you get your configuration settings. Another
configuration, you can make a couple of changes. You can enable your share
capture here using Twit Count. Twit Count is a third party share API.
Remember that Twitter did away with it's native share counter API many years ago.
And you can also set a minimum share count threshold to prevent
showing the share count until you've reached a certain amount.
There is currently not a way to fake a share count. Which is just where you inflate the numbers.
And then count off incrementally from that, but I imagine that it will exist in the future.
You could choose to enable the Facebook Open Graph data. If you're using something like Yoast SEO
make sure you disable this. And then you're gonna include your Twitter user
names. So I'm just gonna put this @ScottTHartley, which is my personal
Twitter handle and we're gonna now go back to over here and I'm gonna
demonstrate what happens. When you click this it now says via @ScottTHartley.
So it's doing the information for your Click To Tweet from this section. If you
use the native share buttons, it will also tweet at your username. That's
an ideal configuration in my mind. You should have a tweet at you to expand your
reach when somebody shares your content. You could go ahead and choose to insert
your Facebook app ID and app secret ID for setting up your shares. Share Counter
from Facebook. And then you can choose to use their Open Graph Data, as we just
covered. You could choose to purge all share counts. You should only do this if
you're trying to debug something. If you do this, it probably will just reset your
calendar back to zero, until it goes ahead and calls the API again, for like
the Twitter count. And then you can enable Google Analytics UTM parameters.
If you're trying to track your share information via Google Analytics, you can
set this up here. I'm not going to show you how to do that because that could be
quite time-consuming, but for the sake of this, you have the ability to do it
You can enable link shortening via Bitly. Bitly is a free, freemium, URL shortener.
You'll just insert your access token here and you could choose to include a subset
of grouping links. You would just set a group Bitly to something like social
or share buttons, so that way your subsetting them from the ones you
generate, from the ones that users are generating from sharing your post. Then
under the tools you could just choose to do a clean uninstall, which is where it
deletes all data that Novashare has in the database when you deactivate and
uninstall it. And there's an accessibility mode which, disables the
use of visual UI elements, such as checkboxes and hovering tooltips. That's
good if you have to use a screen reader. This just makes it easier on those who
have more difficult times accessing content hidden behind hovers. So now the
real reason that people are probably here is to figure out, well, how does this
compare to Social Warfare. So to demonstrate this, what we're gonna do is
I'm gonna enable the floating buttons and I'm only gonna be doing it on the
post page because that's the page we're gonna be measuring. Everything else on
these sites are exactly the same. They're running the same version of WordPress.
They're running the same themes. They both have all caching disabled, except
for the need of browser caching, but because we're using GTmetrix, that does
not matter. I'm gonna enable the share counter
because that's what I have on the other one and I have, I'm gonna enable the five
free buttons they give you over here and I have seven over here which won't
matter too much. And we're going to just leave it at that.
That should give us a very good amount of, here we'll do this on the left hand
side, just that way we're completely equal. I'm not gonna bother putting in
the Twitter username and I'm not gonna bother adding the, any other sub options
here because they won't really impact it. And then we're just going to make one
edit and we're going to also add a Twitter card into this post because it's
the same post and we're just wanting to demonstrate how equal they are. So you
have to just type your tweet. Type your tweet that you want to display on
Twitter.Type the quote that you want to display on the page and we're gonna just
send it at the default because that's what we had the other one as. And then
we're gonna go ahead and update and I'm just going to verify that this is indeed
loading how I want it to. I'm gonna turn off full-screen mode because that's
obnoxious. That was the worst decision in 5.3 and looks good. Alright, we now have
basically the exact same configuration. Looks like I have Novashare, only in the,
I'll put them on the above and below options so now they're totally equal.
Minus the additional share buttons in this floating one. So the goal here is,
we're gonna test both these URLs in GTmetrix. We're not so much looking for
load time as we are looking for page weight because that's really what's
going to matter. There's gonna be all kinds of issues with the server response
time and network response time because we're not using any sort of caching or
optimization, but we're just wanting to get a baseline understanding to see what
the differences are between these two plugins. I already know which one's going
to win, but the audience may not. So we're going on running this. Alright, so we
have 388 kilobytes with 18 requests and over here we have 412 kilobytes and 21
requests. That's pretty substantial, especially for
the same functionality. This comes down to a couple of reasons that we're gonna
have to discuss, but let's just look for the actual Novashare assets. It loads
two assets. A CSS file that measured 1.4 kilobytes. This is gzipped. This is not
using brotli and it is using 809 bytes of JavaScript.
Meanwhile, Social Warfare is loading. And we're just going to separate it again
by looking for social, which is going to only list Social Warfare assets. They're
loading the CSS for, actually they're loading a JavaScript. Their URL structure
does make any sense. This is a CSS file though. For, I'm assuming this is their
click to tweet button.
No. This is. I'm not quite sure what they have going on there
They have 9.6 kilobytes for their main CSS file. So 9.6 kilobytes and this one's
1.4. It's around four times as large and their main JavaScript file is 4.9
kilobytes. That's nearly, it's almost like six times
larger than this one. And then finally their icon font is 8 kilobytes.
You'll notice, that social, that Novashare is not loading an icon font. The
reason for that is Novashare uses inline SVG icons. So, if you just hover
over this asset and you'll see that it's declaring an inline SVG asset. What that
basically means is they're giving parameters for the browser to physically
draw the icons here as opposed to having them download an image or a font file to
load them. This is more performant in this kind of application and it really
does show. It should also totally work with any of the standard lazy loading
plugins because it's an SVG icon that's not loading via an image source. You
shouldn't notice any unusual issues. I tested it with WP Rocket and I didn't
run any issues using the configuration I did
in that video. But really this is an awesome plugin. Just the only change
between these two is the total page size is 388 kilobytes for Novashare and 412
kilobytes for Social Warfare. And that doesn't sound like a lot, but you have to
realize that there are some other tweaks going on in the background. For instance,
on the Novashare, if we look for the plugin assets, they're only loading let's
see, the JavaScript on the home page and I'm not quite sure why they're loading
it on the home page. It's probably to handle this Click To Tweet functionality.
But really it's just substantially less. It would be a noticeable
improvement, if you were running something like PageSpeed Insights. We'll
go ahead and run it to just to kind of demonstrate. This is not a perfect
scientific test here because we are gonna have to deal with
slightly different variations in the TTFB, but this is a really really
lightweight plugin guys. You're not going to find another plugin that is as
lightweight as this. I did comparison with the Genesis Simple Share, which only
offers like four social networking options and it still outweighed it. This is
the lightest social plugins social sharing plugin that I've managed to find
when I was testing. We get a 95 here. That doesn't really mean much because there's
not really a lot going on and we get a 94 over here. Again that's
well within the margin of error because these sites are not technically
optimized as they are. But really you're saving, look at it like 40
kilobytes or so on page size. You're knocking out three requests. They're going
to render faster because of the inline SVG's. It's just an overall better plugin.
I also like the fact that, instead of Social Warfare which adds a top-level
item in my admin bar, which always bugs me when plugins add something here, when
they're not really needed, this one adds it underneath your settings and your
share buttons. Now this isn't a completely fair test.
Social Warfare Pro actually does weigh a bit more, because it's loading
more assets and it's a little bit bulkier, but even still we're comparing a
premium share plugin over here with more options, with more share buttons enabled,
and we're still getting substantially less on the page size front. Overall, if
you're looking to pay for a share button plug-in and you want something it's
gonna be a really lightweight. I would honestly highly suggest Novashare at
this point. The developers, I tweeted at them before I purchased the plug-in and
I asked something about, I mentioned something with perfmatters as well, there's gonna
be some integration with perfmatters at some point down the line. I'm not really
sure in what form that's going to come. perfmatters is also going to be getting
some additional features in the future for managing inline CSS. That's good to
hear. But, really this is definitely the plugin
I'm gonna be using. I'm gonna be swapping my sites over to it. I bought myself an
unlimited site license and honestly I'm gonna be very pleased with it. If you
have any questions about this plugin, maybe some feature that you're not sure
if it's covered or not, please feel free to ask in the comments below. Otherwise
thank you all so much for watching and goodbye.