Jetpack

Moving Sharing Icons

One of the most common requests you send us is “Can we move the Sharing and Like buttons?” By default, the Sharing and Like buttons get printed at the end of the the_content() Loop function, which causes them to display at the end of your post’s text — but that may not be where you want them in your site’s design.

There are actually two ways to move the Sharing buttons and one for the Like button.

Move the Sharing and Like buttons

Jetpack, by default, just attaches this tag to two filters — the_content() and the_excerpt() — so that the Sharing icons get displayed. By editing your theme files, you can move the tag wherever you’d like — we default to attaching it to the filters so that, when the Sharing and Likes modules are activated, the buttons are displayed with no extra work. You’re free to move it around to put the Sharing icons where you’d like; here’s how:

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

2. Find the file for the location where you’d like the sharing icons to appear and 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( '' );
}

Note that you do not need to display these together; you can put sharing_display() in a separate place from the Likes display codeblock.

Move the Sharing Buttons via jQuery

This method comes via Beau Lebens, a fellow Automattician. He coded this jQuery method for moving the Sharing icons:

jQuery( document ).ready( function( $ ) {
    // Relocate Jetpack sharing buttons down into the comments form
    jQuery( '#sharing' ).html( jQuery( '.sharedaddy' ).detach() );
} );

The #sharing selector is just the DOM location where I want to move the buttons to, and the .sharedaddy one is the container that Jetpack places its buttons in normally. We just detach it from the normal position and then dump it into the new location exactly as it was.

We hope this helps you develop your theme and display things the way you like.

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

4 Responses to Moving Sharing Icons

  1. Joe says:

    Thanks for the info. Not to sound too harsh, but most users would not find editing their functions.php file easy. I think it’s time to re-define what “easy” is. Easy means that one does not need to muck around in their core WordPress files in order to accomplish a stated benefit. A better solution is to offer a dropdown menu and have the logic on the backend do the hard work for the user.

    (I’m not speaking for myself, but for the dozens of people who ask me “what’s a functions file?”)

  2. The ‘Jetpack Extras by BarryCarlyon’.plugin might be the way to go. It gives you multiple options for placement of the share buttons via the settings panel.

  3. JT says:

    Great (sic). I added the suggested code to my functions.php file and now I am locked out of my entire site due to a parse error. I’m a novice, so now I’ll spend hours trying to figure out how to FTP into the site and fix whatevers broke. (Yes I backed up the functions.php file, but it was too late – locked out completely (Parse error: syntax error, unexpected ‘<' in /home/content/81/11246381/html/wp-content/themes/cave/functions.php on line 28 :-(

    • Jeremy says:

      None of the code we suggested include the ‘<', so you might want to double check the code you copied in your theme's functions.php file.

      As a general rule, you can add such code at the end of the file, right before the closing ?> tag if there is one.

      To log in to your site via FTP, you can follow the instructions in the Codex.

Follow

Get every new post delivered to your Inbox.

Join 62,852 other followers