WordPress floating social share buttons can be added by using any plugin, it means there are so many free plugins available in the WordPress plugin repository. You may thinking why Jetpack?
Well there are so many good reasons for using the Jetpack plugin. It helps by increasing your site traffic, view stats, speed up your site, and protect yourself from hackers. Most importantly it’s form Automatic.
By default Jetpack sharing style is simple and minimal, so it looks nice with any themes. But one downside, there is no option for floating social share buttons, it works only bottom of the content. By following instructions you can float the sharing icons.
Step 1:
First you need to install and active the Jetpack plugin to your site. Then you have to active the sharing add on. Go to the Jetpack menu > Settings > Engagement tab. Here you can see all the add on list. Active the sharing add on.
After activating the sharing add on, Navigate to the Settings menu > Sharing. From here you can configure the sharing and connect to your social accounts and customize the sharing icons.
Choose the sharing icons you want to show by drag and drop and save the settings. For button style, select icons only. Choose your post types where you want to show the sharing icons.
Step 2:
If you configure the Jetpack settings correctly you should see the sharing icons bellow the selected post type content. Now for floating we have to add the sharing icons to our site footer. Then we customize it’s style for floating. Add the following PHP code to your theme or child theme functions.php to add the sharing icons in footer.
[php]
/**
* Post sharing icons
*/
function xt_post_shareing_icons(){
if( function_exists( ‘sharing_display’ ) && is_singular( ‘post’ ) || is_singular( ‘download’ ) ){
echo ‘<div class="xt-floating-sharing-buttons">’;
echo sharing_display();
echo ‘</div>’;
}
}
add_action( ‘wp_footer’, ‘xt_post_shareing_icons’ );
[/php]
Here I am using is_singular function to make sure the sharing icons are load in the site footer only for single post and download ( custom post type ).
Now We are going to add few CSS to float the sharing ions. You can add those CSS code to your theme or child theme style.css file.
[css]
.xt-floating-sharing-buttons {
position: fixed;
top: 30%;
left: 0;
z-index: 100;
}
.xt-floating-sharing-buttons div.sharedaddy h3.sd-title {
display: none;
}
.xt-floating-sharing-buttons .sd-content > ul,
.xt-floating-sharing-buttons .sharing-hidden .inner:before,
.xt-floating-sharing-buttons .sharing-hidden .inner:after,
.xt-floating-sharing-buttons .sd-content ul li.share-end {
display: none;
}
.xt-floating-sharing-buttons .sharing-hidden .inner {
position: inherit;
display: block!important;
max-width: 53px;
border: 0;
height: inherit!important;
margin: 0!important;
padding: 10px!important;
}
[/css]
Now if you check your single post page you can see the result like the screenshot bellow.
