How to use your own resources in the sharing module

The sharing module includes an “advanced” option, allowing you to use your own JavaScript and CSS files instead of the files added by Jetpack by default.

To get started, go to Settings > Sharing in your dashboard, and check the “Advanced” checkbox at the bottom of the page.

Then, you can add your own libraries by adding the following code in a functionality plugin or in your theme’s functions.php file:

function tweakjp_add_sharing_js() {
    wp_enqueue_script( 'sharing-js', WP_SHARING_PLUGIN_URL . 'sharing.js', array( ), 4 );
    $sharing_js_options = array(
	    'lang'   => get_base_recaptcha_lang_code(),
	    'counts' => apply_filters( 'jetpack_sharing_counts', true )
    );
    wp_localize_script( 'sharing-js', 'sharing_js_options', $sharing_js_options );
}
add_action( 'wp_enqueue_scripts', 'tweakjp_add_sharing_js' );

function tweakjp_add_sharing_css() {
    wp_enqueue_style( 'sharing', WP_SHARING_PLUGIN_URL. 'sharing.css', false, JETPACK__VERSION );
}
add_action( 'wp_enqueue_scripts', 'tweakjp_add_sharing_css' );

Once you’ve checked the option, you will be able to manually enqueue your own sharing js and css files.

You’ll note that Jetpack uses the WP_SHARING_PLUGIN_URL constant to build the path to load the libraries. You will have to change that constant by your own when re-enqueueing the sharing libraries.

You’ll also notice that you must localize the script and pass over lang and counts values to the sharing.js script.  A working example is included above.

Reference

Jeremy Herve

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