Scriptless Social Sharing, the lightweight social sharing button plugin

As I've already said more than once, I usually do small jobs for blogs that run under WordPress optimisation for blogs running under WordPress. Everything I apply I usually test and measure it before here and in the end I end up turning the notes into a post as a reminder and in case it is useful for someone else. This is one of them.

One of the things that sometimes really slows down the load are those lame social sharing buttons on social networks because they either come with heavy visual artifacts, counters and drop-down scrolls, or they load requests even where they are not being used or all at once.

Scriptless Social Sharing is a light and free plugin to add the typical buttons to your posts and/or pages developed by Robin Cornett that dispenses with all that.

It's so lightweight that it only adds sharing links using the most basic method that each network allows. There is no javascript, no animation, no counter, no ornaments. It simply builds a set of links with its own little bit of CSS. The result is that it reduces requests to zero, none.

It has a settings page, also very simple, so you can adjust which types of content should have share buttons, which buttons should be added, and whether or not to use the plugin's styles. Beyond that, you can also use a filter to add any other network hosting its corresponding .SVG icon.

Everything the plugin does can be done by hand by registering the icons, but since it doesn't add any requests, its weight is minimal and its code is clean, it's one of the best options to save a bit of work.

Its author declares full compatibility with WordPress 5.8 and although it doesn't announce compatibility with WordPress 5.8, it works perfectly in the new version WordPress 5.9it works perfectly in the new version as it does not add anything new.

Settings

By default, when you activate the plugin you will find the icons like this:

Or like this if you select "show names".

And this is the screenshot of the icon settings working here with this result:

But to make the buttons appear round and to add the Menéame button (or any other network) just pull their filters to register the icon and tinker a bit with the CSS. Nothing too complicated.

Steps to add a new button

1- Search for and download the .SVG icon of the network you want to add, in this case the best one, although it could be improved, that I have found from Menéame is this.

2. Upload the icon to the /assets/svg/ directory of your template (if this path doesn’t exist you have to create it) and the plugin will recognise it and use it automatically

3. Register the icon with its corresponding filter by adding it to your functions plugin, using Code Snippets or adding it by hand to the functions.php of the template, the method is up to you.

add_filter( ‘scriptlesssocialsharing_register’, ‘prefix_scriptless_add_meneame_button’ );
/**
* Añade un botón personalizado a Scriptless Social Sharing.
*
* @return void
*/
function prefix_scriptless_add_meneame_button( $buttons ) {
$buttons[‘tumblr’] = array(
‘label’ => __( ‘Menéame’, ‘scriptless-social-sharing’ ),
‘url_base’ => ‘https://www.meneame.net/submit?url=’.get_permalink().’» target=»_blank’,
‘args’ => array(
‘query_args’ => array(
‘name’ => ‘%%title%%’,
‘url’ => ‘%%permalink%%’,
),
‘color’ => ‘#e35614’,
‘svg’ => ‘meneame-square’, //Subir a `assets/svg` de tu plantilla
‘icon’ => ‘f173’, // Para fuentes FontAwesome
),
);
return $buttons;
}

You need to call your icon file “whatever-square.svg” for the filter to work.

It is also important that you pay attention to the exact structure of the sharing link of the network in question because it has to be added in ‘url_base’. In the case of Menéame it is https://www.meneame.net/submit?url=’.get_permalink()

Finally, you just have to play with the CSS until you find the final appearance and position you want, for the example we have used this CSS:

/* CSS botones compartir del plugin */
.scriptlesssocialsharing__buttons a.button {
    /* CONVERTIR A colores parar linea background*/ 
    background-color: #7F7F7F !important; */
    color: #ffffff;
    border-radius: 100px;
	  margin-right: 1px;
    margin-left: 1px;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 900; 
}

.scriptlesssocialsharing__buttons {
    justify-content: right;
}

.scriptlesssocialsharing__buttons a.button:hover {
  background-color: #ff2121 !important;
  color: #ffffff !important;
}

If everything went well, you will now find the icon added in the plugin settings and you will be able to order it, remove it or set it to your own style like the rest of the default icons.

Gutenberg block and shortcodes

The plugin also adds a block (which you can deactivate) to Gutenberg that allows you to place your buttons between paragraphs or under certain content elements.

You also have shortcodes so that you can place them wherever you want and with the possibility of limiting the networks that are displayed at a specific point.

Add [ ]

Generic” shortcode.

scriptless

To remove the heading or customize it.

scriptless heading=""

scriptless buttons="email,facebook"

The author also adds on her website the specific filters needed to add a Facebook Messenger button.

There are other plugins, also lightweight and with more aesthetic features, but this one is perfect if you are passionate about loading speed. As a lightweight paid alternative with a few more design options, Novashare (from the creators of GeneratePress and Perfmatters) is also a very good option.