Support Home > Social > Sharing

Sharing

This guide will show you how to add sharing buttons to your blog posts to give your readers the ability to easily share your content with Twitter, Facebook, and a host of other services, to help your message spread across the web.

Jetpack Sharing buttons

Jetpack Sharing gives readers the tools to post your content to their networks from the bottom of each post and/or page. You can add this to your site in four short steps:

  1. Navigate to Settings → Sharing in your site’s dashboard.
  2. Under Sharing Buttons, drag and drop the services you want to use into the Enabled Services area.
  3. Choose your preferred button style and where you would like the buttons to appear.
  4. Save!

To add new services, drag the button into the Available Services area at any time. You can configure services to appear as icons, text, or both.

Some services have an additional option letting you display “official” buttons that show the number of times the post has been shared. Just choose your display option and drag the services you want displayed to the Enable box.

sharingsettings

The following services are currently supported:

  • Twitter
  • Facebook
  • Tumblr
  • Google+
  • Pinterest
  • Skype
  • Reddit
  • Pocket
  • LinkedIn
  • Press This (for sites that are part of a multisite network)
  • Email
  • Print
  • Telegram
  • WhatsApp

How can I move where the sharing icons are displayed?

By default, the sharing icons will display right at the bottom of your post’s content. Sometimes, you might want to move it elsewhere on your post, such as right before the content.

To do this, in your functions.php file, add the following:

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' );

Then find the file for the location where you’d like the sharing icons to appear. Insert the following code in the area you want the Sharing or Likes buttons to appear:

if ( function_exists( 'sharing_display' ) ) {
    sharing_display( '', true );
}

if ( class_exists( 'Jetpack_Likes' ) ) {
    $custom_likes = new Jetpack_Likes;
    echo $custom_likes->post_likes( '' );
}

Please note that this is provided as a courtesy and we do not provide support with implementing or editing custom code.

How do I create my own custom sharing buttons?

If you would like to add a sharing service that is not available in the standard set, navigate to Settings → Sharing in your dashboard, and add it using the Add a new service link in the Available Services section.

You will need to enter:

  • Service name
  • Sharing URL
  • Icon URL

The Service name is the name you would like to use for the sharing service. It will appear in the link to the service and in the blog sharing stats.

The Sharing URL is the URL address to the sharing service. You can use the variables %post_title%, %post_url% (short URL), %post_full_url% and %post_excerpt% in the URL, i.e. http://www.google.com/buzz/post?url=%post_url%

The Icon URL is the URL address to the icon image you wish to use for this service, i.e. http://www.someserver.com/images/buzz.png

Save the service and the new service will appear in the Available Services section.

As you customize the sharing services, you can see how they are ordered in the Live Preview section.

How do I add a Captcha to the Email sharing button?

The Email button is great, and you can make it even better by adding a Captcha to the submission form:

reCaptcha for Jetpack

To add the Captcha to your site, follow these steps:

    1. Register for an account on this site. Upon registration, you will receive a Public and a Private key.
    2. Open your site’s wp-config.php file in your favorite text editor. Add the following constants with both reCaptcha keys right before /* That's all, stop editing! Happy blogging. */:
      define( 'RECAPTCHA_PUBLIC_KEY', 'XXXXXXX' );
      define( 'RECAPTCHA_PRIVATE_KEY', 'XXXXXXX' );
      
    3. Save wp-config.phpand refresh your site.

Voila! Your email sharing buttons are now protected against spam.

How can I hide the sharing buttons on mobile?

Insert this code in your functions.php file:

// 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' );

How do I use my own resources instead of Jetpack’s default sharing CSS and JS files?

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' );

How do I add “via @username” to the tweets sent via the Twitter button?

There are 2 options to add your Twitter account to the end of each tweet:

  • You can fill in the “Twitter Site Tag” option in Settings → Sharing.
  • If you use the Publicize module and connected a Twitter account, this account will be used in the Twitter sharing button.

I don’t see sharing counts for Twitter anymore!

Due to Twitter removing support for third party sharing counts, we removed the option from our Twitter sharing buttons (Icon Only, Text Only, and Icon + Text) effective in Jetpack 3.8. Twitter dropped support for this feature in November 2015.

  • Categories

  • Contact Us

    Need more help? Feel free to contact us.