Hook of the Month: Customizing Sharing Buttons

Jetpack’s sharing buttons look good, are simple to use, and include several hooks allowing you to customize every single aspect of the module. Let’s learn to use some of these hooks together!

Remove Sharing buttons on Mobile

Whether your site uses Jetpack’s Mobile Theme or a responsive theme, it’s sometimes useful to remove sharing buttons on mobile devices. Since most mobile phones include built-in options to share a link on popular social networks, removing those buttons from your site can be a real performance gain on mobile.

To completely remove the buttons, we’ll use two Jetpack features: the sharing_show filter, and a function named jetpack_is_mobile(). This function allows you to detect if your reader is browsing your site using a mobile device (with a Mobile User Agent).

// Check if we are on mobile
function jetpack_developer_is_mobile() {
 
    // Are Jetpack Mobile functions available?
    if ( ! function_exists( 'jetpack_is_mobile' ) ) {
        return false;
    }
 
    // Is Mobile theme showing?
    if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' ) {
        return false;
    }
 
    return jetpack_is_mobile();
}
 
// Let's remove the sharing buttons when on mobile
function jetpack_developer_maybe_add_filter() {
 
    // On mobile?
    if ( jetpack_developer_is_mobile() ) {
        add_filter( 'sharing_show', '__return_false' );
    }
}
add_action( 'wp_head', 'jetpack_developer_maybe_add_filter' );

Hide buttons in the Sharing Settings interface

You can use the sharing_services filter to hide some buttons from the Sharing Settings interface, so they can never be activated on the site. In the example below, we’ll hide the Facebook button:

function jetpack_developer_rm_facebook( $services ) {
	unset( $services['facebook'] );

	return $services;
}
add_filter( 'sharing_services', 'jetpack_developer_rm_facebook' );

If you’d rather add buttons instead of hiding them, you can check how some Jetpack add-on plugins managed to add extra buttons to the interface:

Remove the “Pin” button appearing on images when using the Pinterest sharing button

If you use the “Official Buttons” type, and add a Pinterest button to your posts, an extra “Pin” button will appear above each image in your post when you move your mouse over that image.

If don’t like this feature, you can disable it with the jetpack_pinit_over_button filter, like so:

add_filter( 'jetpack_pinit_over_button', '__return_false' );

Remove sharing counts

If you use one of the non-official button types under Settings > Sharing in your dashboard, Jetpack automatically adds sharing counts for Facebook, LinkedIn, and Pinterest.

If you’re not interested in displaying these sharing counts, or if you’d like to improve the performance of your site by limiting the number of extra requests made on each page, you can use the jetpack_sharing_counts filter to remove the sharing counts:

add_filter( 'jetpack_sharing_counts', '__return_false' );

The Sharing module includes 49 other hooks in addition to the ones mentioned above. Check the code to learn more. You can also visit our support page to discover some of the other options available for customizing the sharing buttons.

Do you want to dive deeper into Jetpack, and discover other useful hooks to help you customize Jetpack? Make sure to follow this blog and discover a new hook each month!

This entry was posted in Code snippets, Tips & Tricks and tagged , , , , . Bookmark the permalink.

Comments

  1. Dave Z says:

    If the Mail sharing feature still broken when hiding sharing counts? Thanks!

    Like

    • Jeremy says:

      No, this filter doesn’t affect the email sharing button. You can use it without breaking anything! 🙂

      Like

      • Dave Z says:

        Nope, still doesn’t work. 😦

        shared=email&msg=fail

        Like

      • Jeremy says:

        I can’t seem to reproduce on my end.

        Could you let me know how you disabled sharing counts?

        Like

      • Dave Z says:

        I feel like it was previously discussed and I’m not the only one. I put the filter indicated above at the bottom of my functions.php. The counts vanish, but the Email share button ceases to work. It does work when counts are visible. Thanks for researching with me!

        add_filter( ‘sharing_js’, ‘__return_false’ );

        Like

      • Jeremy says:

        This used to be a problem when the filter didn’t exist, and you had to remove the whole sharing JavaScript file to remove the counts. The filter allowed us to solve that issue though.

        If you experience issues with the filter, could you send us an email with more details about your site, so we can take a closer look?

        Thanks!

        Like

      • Dave Z says:

        Working now! The filter/hook I was using must have been the old one. The new one is working great. Amen and thank you!

        Like

  2. This was extremely useful. I just made the switch to add https:// to my web address a few days ago, and as a result, the web treated my new url as an entirely different site, and wiped out all of my share counts. After 5 years of blogging I was really discouraged by that. However, I have been contemplating how to remove the counts altogether now that I have to start over, and your tip on removing share counts is a great lead to help me decide whether or not I want to go through with it.

    Thank you.

    Like

  3. Dave Warfel says:

    I just want to say thanks for doing these monthly showcases and showing us what Jetpack is really capable of. I’ve been a proponent of the plugin for a long time, and this helps prove that it not only comes with a solid lineup of features, but there are many ways to customize it, too.

    Like

  4. sdpate956 says:

    I tried to enter the code in either the Custom CSS or Header and it does not get saved. Only this portion passes the syntax test.

    // Check if we are on mobile
    function jetpack_developer_is_mobile() {
    }

    // Is Mobile theme showing?
    if ( isset( $_COOKIE[akm_mobile] ) && $_COOKIE[akm_mobile] == false ) {
    }
    }

    Like

Say Hello to 200 Themes

Jetpack Professional now bundles 200+ Premium WordPress themes,
alongside business class security tools, and marketing automation.

Use code "PRO" at checkout for 50% introductory discount.

%d bloggers like this: