This is THE fastest, lightest weight social share button plugin available – especially if you tweak a couple of settings.
See how to make it as fast as possible on your site while still looking great.
Why It’s the Best for Speed and Function
The Scriptless Social Sharing plugin is the ONLY plugin that offers a way to achieve:
- zero added CSS and JS requests
- zero added page weight
- zero deduction in Google PageSpeed Insights (GPSI) score
- assignable custom Pinterest image
And it’s free!!
No other free or paid share button plugin can lay claim to all that.
Select Your Buttons And Where They Appear
For this tutorial, I selected and rearranged the buttons shown to be the most common I believe y’all will be using.
I also placed them above and below the content, and removed the Heading that says “Share this post” too.
A typical Genesis child theme was used for all snapshots of how the buttons appear.
Shown below are those selections in the Button Settings area.
NOTE: Scroll to the bottom of the settings page and save your settings after you make changes.
You may also need to purge cache and/or use an incognito window to see the changes, depending on how you have caching set up on your site and browser. You may also have luck either previewing a post (instead of actual View post) or just viewing a different post.
See this tutorial for how to Delete Cache Everywhere.
About the Default Settings
The default settings load:
- a CSS file so that each button has the proper color for its platform
- Font Awesome for the social platform icons. Font Awesome can also be used for the text font on the buttons.
All of these things make the buttons look nice, but they can also impact your page load speed.
Why Use Custom Settings?
Font Awesome has super looking icons, and lots of them.
However, they have to be brought in from the outside world. Plus, the entire and extensive library has to be brought in, not just the icons you are using.
All of that translates into:
- more requests (number of items it takes to display your page)
- heavier page weight (how many bytes each item is)
- a request outside of your site that cannot be cached
And all of that means one thing – slower page loads.
Fortunately, Scriptless Social Sharing gives you several ways to speed things up.
Settings for Ultimate Speed
If you want max speed and a perfect GPSI score, then just uncheck all 3 boxes in Plugin Styles.
That way the CSS file and Font Awesome won’t load.
The buttons will look something like this (if your theme has a button style)
As you can see, the share buttons:
- have no icons
- have no individual social platform colors
- took on the default button color of the theme
Settings for Looks and Speed
The above look is not too bad, and perhaps you want all the buttons to be the same color to match your branding.
But I like the social platform colors and slimmer buttons.
Scriptless Social Sharing can do that!!
In Plugin Styles:
- check the first box for Load the main stylesheet
- set Button Padding to 4
To get the text to display on mobile:
- add the following to your theme’s CSS file (style.css)
OR
- in Additional CSS, but only if you are already using that through the Customizer.
Do one or the other, not both.
Big thank you to Marcy Diaz of Amethyst Website Design for the CSS styling!!!
/* Scriptless Social Sharing
—————————————– */
.scriptlesssocialsharing span.sss-name {
position: relative !important;
font-size: 16px;
}
@media only screen and (max-width: 600px) {
.scriptlesssocialsharing span.sss-name {
font-size: 12px;
}
.scriptlesssocialsharing-buttons {
display: block !important;
}
.scriptlesssocialsharing .scriptlesssocialsharing-buttons a.button {
display: inline-block !important;
min-width: 33.33333333%;
}
}
Now your buttons will look like this:
This is the same look I have on BlogAid.
Yes, it does add a request for the CSS file, and a wee bit of weight (24 KB, which is the tiniest of all the plugins).
But, that one file is local, meaning on your site. And it can be cached with both a local caching plugin and the visitor’s browser. So in the end, it adds nothing.
And you still get a perfect score on GPSI, even when there is no caching help.
You can’t beat that!!!
Assign a Pinterest Image and Turn Off Buttons
Another sweet feature Scriptless Social Sharing offers is a way to assign a custom Pinterest image from the images embedded in the content to the Pinterest share button.
You can’t even find something like this in ANY other free share button plugin.
(Note: if no Pinterest image is assigned, the Featured Image will be used.)
And, the plugin allows you to turn off share buttons on a per post basis too.
You’ll find both settings in the admin sidebar module, as shown below.
But I Want My Icons!
Okay!
Instead of using Font Awesome, you might be able to use DashIcons, which have been natively supported in the WordPress core since version 3.8.
Or, you might be able to use a custom set of icons that you store on your site.
These also could be used for your social follow buttons.
But, both will take a designer to install and configure for you.
What About Share Counts?
Nope! That’s the one thing that Scriptless Social Sharing doesn’t do – and for good reason!
Everything about showing share counts slows down your site.
Not to mention how inaccurate they are because so many of the social platforms no longer provide real data anymore.
And it’s no longer true that showing counts increases shares. That’s so 2016!!
Wrap Up
I think Scriptless Social Sharing is the perfect free plugin for most bloggers.
That’s why I use it on BlogAid.
With easy tweaks to the settings, it’s by far the fastest and lightest social share button plugin available.
And it’s the only free one that provides extra Pinterest features.
Wow Thank you so much MaAnna!! What a simple change that makes a difference!!! I really don’t even notice that much of a change in my buttons either. I actually like the slimmer look better too:). Thanks!!
Super, Kathleen!!! And that’s why tests like this are so important. Fashion can cost. Function and speed have to be looked at too.
Do I need to add the CSS to this. I don’t know where to find it and I wasn’t sure if it was necessary if I wanted to keep the main style and colorsheet. I like that it pulls in my branding colors a bit. I would also prefer that all my pin size images pop up as well and not just the one I pick. Do you know if that is an option? I just switched today from add to any which I really liked because I could customize the colors more to my branding but I need some speed to my site so I am trying it out. Thanks.
If you’re not familiar with changing CSS, I would definitely encourage getting a pro designer to do it, else you could mess up your theme.
SSS is a very light plugin and doesn’t have many whistles and bells like other paid plugins. The whole point is to be super light. You may want to consider Social Pug to get more features.
Do I need to change the CSS? I can leave the options the way they are by only selecting the first box, I assumed.
I am definitely going to try it out for awhile.
I am not really ready to throw it out because it doesn’t do exactly what I want it to. I do appreciate your recommendations and so I am going with it and the lightness of it may be better than the bells and whistles. I was using add to any. It was just simple but had what I was looking for. But honestly, all you really need is a convenient way to share. I am not sure that people are not sharing your stuff because they don’t like the looks of your share buttons😂.
Thanks again, MaAnna. Your help and time are appreciated!
You don’t NEED to change the CSS. It just depends on the look you want on desktop and mobile.
Thanks again, MaAnna!
Oh My! thank you, thank you for this post and plugin. I wish I had found it before I paid for Tasty pins because I wanted to be able to select a specific Pinterest image. But I don’t care because I love how the buttons look and that I can pick a specific Pinterest image and that the Pint button doesn’t show on any other images.
Again, thank you so much.
You still need Tasty Pins, Lise. It’s the best way to separate your SEO meta description form the longer, keyword stuffed, and hashtag overload that Pinterest needs.
Thanks again MaAnna for your research and expertise. I made the switch to Scriptless Social Sharing. The only thing that looks different is the font color on my buttons is gray, rather than white, so the words are a little hard to read. I suppose it has to do with my theme. Any suggestions?
It may be inheriting a font from your theme. Would need a designer to look at the whole CSS for the order of things.
I cut a whole second off my site speed! You are royalty! Thank you so much!
Thrilled to hear it!!!! That’s a sweet little plugin for sure, and getting better.
MaAnna – Help! I just switched from social warfare to scriptless social sharing. I’m sure this answer is stupid-obvious, but I can’t find the admin sidebar module to specify which image I want to be shared on Pinterest.
With both the Classic Editor and Gutenberg, the module is in the right sidebar when you are on the Text Editor page (creating a post/page). If you don’t see it, go up to Screen Options, which is just under where you log out in the top right, and ensure the box is checked on for it.
Great article! Took me 2 mins to implement. Thank you for your great content
Woot!!!! So glad it was quick and easy.
Great article. Just switched to SSSP, one question, the options are different now, with SVG icons instead.
Any change to the suggestions on settings now?
I’m thrilled she switched over to SVG icons and I have it on my to do list to update this post with the new settings, as well as run new speed tests on it and update those posts as well.
Keep reading Tips Tuesday for when those hit!!
I’m glad to have found this plugin thanks to Grayson Bell. One question though, I’ve installed it but when I try pinning an image from my post–I get all kinds of symbols in the pin description that aren’t there when I just use the pin button from the Tasty Pins plugin I’m using. Any thoughts about what I might be filling out wrong?
This plugin has it’s own description fields for Pinterest sharing, as well as its own image, I believe. Check those and/or the two may be conflicting. You can check with the developer via the plugin’s forum too, she is very responsive
Hi. You might want to update this article since the plugin now supports SVG!
It’s on my long to do list!!
An svg logo would be a great way to add a lightweight social media logo to the script.
Yeah, I’ve got to update this tutorial. The SVG images are in there now.
They sure are! I installed it yesterday and am stoked they had that option already.
Thanks for a great writeup, and the quick follow-up!
The buttons don’t show number of shares done, how to fix that? or is this feature missing?
Share counts slow down page load and are inaccurate anyway.
This plugin is made to be super simple and light and has never included share counts and likely never will. And that’s why we love it.