Add via @username to Twitter Button in Jetpack Sharing

There are a number of popular social share plugins that add buttons to your WordPress posts to make it easy for people to share your content.  I prefer a horizontal sharing bar, and my two favorite sharing plugins are Floating Social Bar and the Sharing module in Jetpack or Slim Jetpack.

In your posts, the Floating Social Bar and Jetpack look very similar except for two things:

1. The Floating Social Bar will add your @username to the tweet generated by the tweet button.
2. The Floating Social Bar also has more positioning options.

Add the @username to Twitter Button in Jetpack Sharing

When a reader clicks your Twitter button in Jetpack sharing, they will get a “Share a link with your followers” box that is missing the “via @username”. You can add your username with a filter in your functions.php or your Code Snippets plugin, so that your “Share a link with your followers” looks like:

This code comes from How to Add Twitter Handle to Jetpack Sharing Module
Be sure to add your Twitter username, in place of “username”.

// Add Twitter @username to Jetpack Sharing
// from http://wpspeak.com/adding-twitter-handle/
function jps_add_twitterhandle_via() {
    return 'username';
}
add_filter ( 'jetpack_sharing_twitter_via', 'jps_add_twitterhandle_via' );

Add Jetpack Sharing to the Top and the Bottom of Your Posts

For a Genesis Child Theme

Jetpack only adds the sharing bar at the bottom of posts. If your posts are long (like some of mine), it’s easier for readers to share, if you add the sharing bar to both the top and bottom of each post, as you see in the first image in this post.

Genesis hooks make it easy to add another share button bar at the top of your posts. Just add this code to your functions.php or Code Snippets.

// Jetpack Share Buttons at top and bottom of entry-content
function amethyst_jetpack_share_top(){
    if ( function_exists( 'sharing_display' ) ) {
        echo sharing_display();
    }
}
add_action( 'genesis_entry_content', 'amethyst_jetpack_share_top', 7 );

For Other Child Themes

To add Jetpack share buttons to the top in other themes, you will need to edit the template file for your posts. Be sure to edit theme files safely. Then find where you want to add the share buttons and add this code:

<?php
     //Jetpack Sharing
     if ( function_exists( 'sharing_display' ) ) {
          sharing_display( '', true );
     }
?>

For instance to add the sharing bar to the top of a post in the Twenty Twelve theme, you would first copy the Twenty Twelve content.php file, and add it to your child theme folder. Then open the child theme content.php, and find the lines:

<div class="entry-content">
     <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>

You want to add the code above between these two lines, so it looks like this:

<div class="entry-content">
     <?php
          //Jetpack Sharing
          if ( function_exists( 'sharing_display' ) ) {
          sharing_display( '', true );
          }
     ?>
     <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>

Add Some Optional Styles

For an extra, if you want a line above and below your Jetpack share buttons, like I have, you can add this code to your style.css or Custom CSS editor.

/* Sharedaddy Social Share Buttons */
div.sharedaddy {
	margin-bottom: 24px;
}

div.sharedaddy div.sd-block {
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
}

So now you’ve added your @username to your Jetpack Twitter button, and you’ve also added the sharing button bar to the top of your posts. How does this work for you?