Moving Jetpack Sharing Buttons

I’m working on a new WordPress theme (for this site, and it’ll be released for download once complete). The theme is deeply integrated with Jetpack, and one of the things I wanted to do was have the Jetpack Sharing buttons appear in a location other than the very end of the content. Normally they are applied as a filter on the_content, so they just appear right at the end. I wanted to relocate them into a different location, and it turns out that’s really easy to do with the power of jQuery.

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.

  1. Jake Spurlock said:

    That's great and handy, but doesn't it make sense to do it programmatically too?

    I suppose it could be filtered out, popped in where you wanted tho…

    echo jetpack('sharing');

    • Beau Lebens said:

      You could actually do some unhooking/re-hooking and move it around with PHP as well, I was just experimenting with some pretty JS-heavy stuff so it seemed to work to do it like this.

      Jetpack Sharing is hooked in with the following, so you could just hook in later and remove it:

      add_filter( 'the_content', 'sharing_display', 19 );
      add_filter( 'the_excerpt', 'sharing_display', 19 );

  3. The LisaKat said:

    I am new to wordpress, a very true beginner and no nothing of programming. Can you tell me where I would put this, and how to tell it where to hook, like the top of the post of page? Thanks for your patience with such a noob.

    • Beau Lebens said:

      This is definitely a developer's solution, so it might be tricky for you to get working.

      The code above assumes that your theme already uses jQuery. You'd need to insert that piece of code either into an existing Javascript (.js) file that's loaded in your theme, or else wrap it in <script> tags and insert it into your theme somewhere else (header or footer most likely).

      As for indicating where to hook; you'd change the part that currently says #sharing, to be a CSS/jQuery selector that pointed to a new HTML element where you wanted to place the buttons. Depending on how you were doing that, you might also need to change how the buttons were inserted though — unfortunately there's no generalized "this is how you do it" answer to your question 🙂

  4. Jeremy said:

    I'm interested in putting the Jetpack Sharing buttons at the top of each post, as well as at the bottom. Can you help me with that?

    Thanks!

  5. Rex said:

    Hi! This is what I'm looking for. But I'm not a coder yet and I'm still working in that. Anyways, is there a way for me to insert this to a hooked widgetized area thru HTML or PHP code?

    Thanks!

      • Rex said:

        It did not work for me. I added the code in a Text widget and it didn't change to sharing buttons. Is there anything else that maybe you can suggest me to try.

  6. ricardo said:

    I'm having some problems placing this one homepage blog.
    It placing all 10 group buttons on the first (#name of the id)
    How can i place each group of buttons on each post (#name of the id)
    Thanks

    • Beau Lebens said:

      If you\’re doing it on a page with multiple Posts then you\’ll need to figure out something most likely using classes for the selector, and then traversal for re-positioning the buttons (relative to where they were originally placed).

Comments are closed.