How to Customize Jetpack Sharing Icons

Jetpack Sharing Icons are built into Jetpack and you can access the options by going to Settings->Sharing. In this tutorial, I'm going to show you how to customize the Jetpack Sharing icons to match your theme or style them however you desire.

Hiding the Sharing Icons

First things first, let's hide the sharing icons in the main loop. This will allow you to insert the Sharing options wherever you like. This can be accomplished with the code below.

function jptweak_remove_share() {
    remove_filter( 'the_content', 'sharing_display', 19 );
    remove_filter( 'the_excerpt', 'sharing_display', 19 );
    if ( class_exists( 'Jetpack_Likes' ) ) {
        remove_filter( 'the_content', array( Jetpack_Likes::init(), 'post_likes' ), 30, 1 );
    }
}
 
add_action( 'loop_start', 'jptweak_remove_share' );

Customizing the Headline

By default, the sharing icons look like this:

Let's customize the headline with some filter goodness and perhaps some styles.

add_filter( 'jetpack_sharing_headline_html', 'mrbb_jetpack_sharing_headline', 20, 3 );
function mrbb_jetpack_sharing_headline( $label, $sharing, $label_escaped ) {
	return sprintf( '<h3 class="sd-title">%s</h3>', esc_html( 'Share This Page' ) );
}

Let's apply some CSS to customize the headline.

div.sharedaddy h3.sd-title {
    color: #FF0000;
    font-family: Arial, sans-serif;
    font-size: 22px;
    border: 0;
    text-transform: uppercase;
}
div.sharedaddy h3.sd-title:before {
    display: none;
}

Customizing the Text

Let's customize the text shown to the user.

function mrbb_jetpack_sharing_titles( $title, $object, $id, $args ) {
	$shortname = $object->shortname;
	switch ( $shortname ) {
		case 'twitter':
			$title = 'Share via Twitter';
			break;
		case 'facebook':
			$title = 'Share on Facebook';
			break;
		case 'pinterest':
			$title = 'Share on Pinterest;
			break;
		case 'email':
			$title = 'Share via Email';
			break;
		case 'jetpack-whatsapp':
			$title = 'Share on WhatsApp';
			break;
		case 'pocket':
			$title = 'Share on Pocket';
			break;
		case 'print':
			$title = 'Print';
			break;
		case 'reddit':
			$title = 'Share on Reddit';
			break;
		case 'linkedin':
			$title = 'Share on LinkedIn';
			break;
		case 'telegram':
			$title = 'Share on Telegram';
			break;
		case 'skype':
			$title = 'Share on Skype';
			break;
		case 'tumblr':
			$title = 'Share on Tumblr';
			break;
	}
	return $title;
}
add_filter( 'jetpack_sharing_display_text', 'mrbb_jetpack_sharing_titles', 10, 4 );

Customize the Sharing Icons With Styles

Since I'm only showing four options, let's center the headline and make the sharing icons into full-width columns.

div.sharedaddy .sd-content ul {
	display: flex;
	flex-wrap: wrap;
}

div.sharedaddy .sd-content li {
    display: block;
    width: 25%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
div.sharedaddy .sd-content li a.sd-button {
    display: flex;
    justify-content: center;
    height: 100%;
	width: 100% !important;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

Conclusion

There are many other effects you can do with Jetpack sharing. You can check out my demo over at BB Vapor.

If there's interest in this tutorial, leave a comment, and I'll post a part 2 on how you can insert the different icon types wherever you want.

Leave a Comment

Your email address will not be published. Required fields are marked *