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:

• ManageWP.org button
• SMS Sharing Button
• Viber Sharing Button
• Scoop.it button
• Telegram button
• Vk.com button
• PDF button

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!

Jeremy Herve

Jetpack Mechanic 🚀 at Automattic. WordPress, board games, TV Series, music.