Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Add Floating Social Share Buttons in WordPress without Plugin

How to Add Floating Social Share Buttons in WordPress without Plugin

In this tutorial, I am going to teach you how to add floating social share buttons in WordPress single post page. By using this you can remove  Shareit, Digg Digg, Sharebar or any other social sharing plugin. Before reading further, if you are concern about your website SEO, add nofollow links to all your blog pots external links.

Add Social Share Buttons to Your WordPress Theme

Add the HTML code of Social Share Buttons into your website theme. I have created html funtcion and add this function into your footer by using wp_footer hoot. If you wish to add this html function directly, just inlcude this code in footer.php file from your theme editor area.

function blogger-story_social_float() {
if (is_single()) { ?>

  • ” data-via=”blogger-story” data-text=”” data-related=”_sekhar” data-count=”vertical” data-hashtags=”WordPress”>

  • ”>

  • ” data-send=”false” data-layout=”box_count” data-width=”60″ data-show-faces=”false”>

add_action(‘wp_footer’, ‘blogger-story_social_float’);

Note: Please don’t forget to replace data-via and data-related fields of Twitter button in the above code with your own twitter account values

Floating Social Share Buttons to wordpress without plugin

Add CDN Version of jQuery to Your WordPress Theme

jQuery is required for these floating share buttons to check the display resolution. If the resolution is less than 1030px wide, then share buttons will be hidden. This way they wont mess up with other elements when viewed on low resolution devices.

function blogger-story_js_scripts() {
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ‘’);
wp_enqueue_script( ‘jquery’ );
add_action(‘wp_enqueue_scripts’, ‘blogger-story_js_scripts’);

Add the above code to functions.php file and save it. Google CDN version of jQuery will be included in your WordPress blog. If you have already integrated jQuery in your WordPress theme, then no need to add it again.

Load Scripts Asynchronously

Add the asynchronous version of social share button scripts in the footer. The main reason behind loading scripts asynchronously is to improve page loading speed and to optimize WordPress for Google Page speed score.

Add below code to functions.php file in your theme and the scripts will be loaded only on the single post page.It is always recommended to load JS files in the footer of WordPress and hence wp_footer hook is used.

function blogger-story_footer_scripts() {
if(is_single()) { ?>

} }
add_action(‘wp_footer’, ‘blogger-story_footer_scripts’);

Add CSS for Floating Social Share Buttons

Add styles to your floating share buttons by including below CSS code in wordpress theme style.css file.

#social-float {
background-color: #FFFFFF;
border: 1px solid #bbb;
bottom: 15px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
display: none;
opacity: 0.8;
padding: 5px;
position: fixed;
text-align: center;
width: 60px;
margin:0 0 0 60px;
#social-float:hover {opacity: 1;}
#social-float ul {list-style: none;}
#social-float ul li.twitter {padding: 0;}
#social-float ul li.facebook { padding: 5px 0 0;}
#social-float ul li.gplus {padding: 5px 0 0;}

How to Add Floating Social Share Buttons in WordPress without Plugin
Sekhar Uppari

This post first appeared on Blogger-Story, please read the originial post: here

Share the post

How to Add Floating Social Share Buttons in WordPress without Plugin


Subscribe to Blogger-story

Get updates delivered right to your inbox!

Thank you for your subscription