Scriptless Social Sharing

Scriptless uses SVG files to display the social network icons, or you can revert to using the old FontAwesome webfont.

Text only buttons are an option as well. And if you prefer flexbox for styling items in rows instead of table CSS, that’s now available on the settings page.

Scriptless Social Sharing currently supports the following social networks:

• X (Twitter)
• Facebook
• Pinterest
• LinkedIn
• Reddit
• WhatsApp
• Pocket
• Telegram
• Hatena Bookmark
• SMS
• Email
• Bluesky

Instagram does not support social sharing buttons.

Yes, using a filter, you can change which SVG icons are used. The plugin provides SVG alternatives for social networks if they are available.

Here’s an example of how you could switch to using the “square” icons for each network (not all networks have one):

add_filter( 'scriptlesssocialsharing_svg_icons', 'rgc_use_square_icons' );
/**
 * Change the Scriptless Social Sharing SVG icons to use the square versions when available.
 *
 * @param $icons
 *
 * @return array
 */
function rgc_use_square_icons( $icons ) {
    $square_icons = array(
        'email'     => 'envelope-square',
        'facebook'  => 'facebook-square',
        'pinterest' => 'pinterest-square',
        'reddit'    => 'reddit-square',
        'twitter'   => 'twitter-square',
        'whatsapp'  => 'whatsapp-square',
    );

    return array_merge( $icons, $square_icons );
}

Want to use an icon not provided by the plugin? Load your own icons in your theme. As of version 3.2.0, the plugin uses SVG files directly, instead of sprite files. To use your own SVG files instead of the plugin’s, add them to your theme, in assets/svg. The plugin will use the theme icons in preference of the plugin.

Buttons can be added in multiple places, or easily add support so you can add buttons anywhere you like. The default button locations are:

• Before Content: at the beginning of the post/entry, within the post/entry content.
• After Content: at the end of the post/entry, within the post/entry content.
• Manual: select this if you are adding buttons with your own code (this ensures that the necessary styles are loaded, and some other housekeeping).

To take advantage of the new location options, you must visit the plugin settings page and update your settings.

Note: if you have code that removes the original buttons output and adds it back by hand, make sure that you select Manual for the location for each affected content type.

The best way to change the button output location is by using a filter. This example changes the locations from using the_content filter (with hook set to false) to using action hooks instead.

add_filter( 'scriptlesssocialsharing_locations', 'prefix_change_sss_locations' );
function prefix_change_sss_locations( $locations ) {
    $locations['before'] = array(
        'hook'     => 'genesis_before_entry',
        'filter'   => false,
        'priority' => 8,
    );
    $locations['after'] = array(
        'hook'     => 'loop_end',
        'filter'   => false,
        'priority' => 8,
    );

    return $locations;
}

If you use the Genesis Framework, there is a setting to tell the plugin to use Genesis hooks instead.

Yes! Introduced in version 3.0, the new sharing block allows you to put sharing buttons anywhere in your content. Add just a few buttons, or rely on the default configuration defined on the settings page.

As of version 2.0.0, you can add sharing buttons directly to your content with a shortcode. You can tweak the output, too. For example, to add the buttons to your content, exactly as you have them set up in your settings, just use this shortcode:

[scriptless]

If you want to remove the heading, try it this way (or customize the heading by adding text):

[scriptless heading=""]

Want to only show certain buttons in the shortcode? Add them as a shortcode attribute (separate with commas, no spaces). This will show just the email and facebook buttons:

[scriptless buttons="email,facebook"]

Yes. First, you have to tell the plugin that it can, in fact, run, even on the relevant archive page:

add_filter( 'scriptlesssocialsharing_can_do_buttons', 'prefix_add_buttons_archives' );
function prefix_add_buttons_archives( $cando ) {
    if ( is_home() || is_tax() || is_category() ) {
        $cando = true;
    }
    return $cando;
}

Then you can add the buttons to the individual posts (this example works only with the Genesis Framework):

add_action( 'genesis_entry_content', 'prefix_scriptlesssocialsharing_buttons_entry_content', 25 );
function prefix_scriptlesssocialsharing_buttons_entry_content() {
    if ( ! function_exists( 'scriptlesssocialsharing_do_buttons' ) ) {
        return;
    }
    $is_disabled = get_post_meta( get_the_ID(), '_scriptlesssocialsharing_disable', true );
    if ( ! $is_disabled && ! is_singular() ) {
        echo wp_kses_post( scriptlesssocialsharing_do_buttons() );
    }
}

Yes, this is intentional. Pinterest really really really wants your posts to have an image. The Pinterest button breaks if there isn’t an image. The plugin looks in three places to find one: 1) the custom Pinterest image; 2) the post featured image; and 3) if there is no featured image set, it picks the first image uploaded to that specific post. At this point, if there is still no image, rather than putting up a button which won’t work, the plugin won’t output a Pinterest button at all on that particular post.

You can add an image for the plugin to use specifically for Pinterest, instead of the post’s featured image. This image will be added to the Pinterest sharing button as well as hidden in your content, so that the Pinterest bookmarklet will be able to “see” the image. Scroll down in the post editor sidebar to find where to add the custom image.

It has always been possible to add a custom sharing button with custom code, but version 3.2.0 makes this a little easier by creating a new helper function. You’ll access the helper function by using a filter. Here’s an example of how to add a button to share a post to Tumblr:

add_filter( 'scriptlesssocialsharing_register', 'prefix_scriptless_add_tumblr_button' );
/**
* Adds a custom sharing button to Scriptless Social Sharing.
*
* @return void
*/
function prefix_scriptless_add_tumblr_button( $buttons ) {
    $buttons['tumblr'] = array(
        'label'    => __( 'Tumblr', 'scriptless-social-sharing' ),
        'url_base' => 'https://www.tumblr.com/share/link',
        'args'     => array(
            'query_args' => array(
                'name' => '%%title%%',
                'url'  => '%%permalink%%',
            ),
            'color'      => '#35465c',
            'svg'        => 'tumblr-square', // Use this with the SVG icons and add the SVG file to your theme's `assets/svg` folder
            'icon'       => 'f173', // Use this when using the FontAwesome font for icons
        ),
    );

    return $buttons;
}

The %% are used to designate placeholders for the attribute variables that the plugin will apply when building the button.

Note that there is both an svg and an icon argument in the code sample. svg is preferred, but only applies if you are using the SVG option for the sharing icons. To add a new icon, upload it to your theme’s assets/svg directory and the plugin will use it automatically. If you are using the older FontAwesome option, use icon to add the CSS unicode for the icon.