How to Add Floating Lazy Load Social Share Buttons in WordPress without any plugin. This is an exclusive tutorial crafted by WPSquare that helps to add unique and attractive lazy load share buttons on single post page in WordPress.
This entire tutorial has been divided into three sections and every piece of code has been tested. You need to add these codes in some files of your WordPress Theme.
- HTML for Social Share Buttons
- SocialScripts to enable Lazy Loading
- CSS Code to style buttons
Recommended How to Add Social Media Icons to Sidebar of your Blog
Another good part is, these floating buttons can also be displayed in Thesis and Genesis Themes. Required codes (actually functions with hook) are also included.
Now, follow things step by step and add floating lazy load share buttons to your WordPress blog. Also, dont forget to backup your theme files.
Add Floating Lazy Load Social Share Buttons in WordPress
HTML part that helps to add Lazy Load Social Share buttons in WordPress. Add this code after <h2> </h2> in single.php file and update it. In this code, you will get 4 share buttons including Facebook, Twitter, Google Plus and Stumbleupon. You can also include other share buttons, but we prefer keep them to a limited number.
/** Display Social Buttons on single post page */
<div id="floating-sharebar" class="floating-sharebar">
<div class="floating-title">Share:</div>
<div class="floating-twitter">
<div class="social-float twitter-script">
<a href="#" id="floating-twitter">Tweet</a>
<a rel="nofollow" href="http://twitter.com/share"
data-url="<?php the_permalink(); ?>"
data-via="wpsquare"
data-text="<?php the_title(); ?>"
data-count="horizontal">
</a>
</div>
</div>
<div class="floating-facebook">
<div class="social-float facebook-script">
<a rel="nofollow" href="https://www.facebook.com/sharer.php?u=<?php echo get_permalink(); ?>" id="floating-facebook">Share</a>
<div id="fb-root"></div><fb:like layout="button_count" href="<?php echo get_permalink(); ?>" show_faces="false" width="100"></fb:like>
</div>
</div>
<div class="floating-gplus">
<div class="social-float gplus-scriptt">
<a rel="nofollow" href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php echo get_permalink(); ?>" id="floating-gplus">+1</a>
<div data-size="medium"></div>
</div>
</div>
<div class="floating-stumble">
<div class="social-float stumble-script">
<a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php echo get_permalink(); ?>" id="floating-stumble">Stumble</a>
<su:badge layout="1"></su:badge>
</div>
</div>
<div class="comm">
<div id="comment-link">
<?php comments_popup_link('0', '1', '% '); ?>
</div>
</div>
</div>
Replace twitter username (highlighted) with your name.
Check Out Display Facebook, Twitter and RSS Counts in Plain Text
Add Lazy Load Social Share Buttons in Genesis Theme
Add these cool buttons to your genesis child theme by including the above code in the functions part displayed below. Open functions.php file in your child theme and add the complete code to it.
function social() {
if ( is_single() ) { ?>
/** Place Above Social Share Buttons Code Here */
<?}}
add_action( 'genesis_before_post_content', 'social' );
You can also change the action hook used in this code.
Check How to Create Custom Archives Page in Genesis Theme
Add Lazy Load Social Share Buttons in Thesis Theme
Lazy Load social share buttons can be included in thesis theme by using hooks. Insert above HTML code in this part and add full code to custom_functions.php file in your thesis theme.
function social() {
if ( is_single() ) { ?>
/** Place Above Social Share Buttons Code Here */
<?}}
add_action( 'thesis_hook_before_post', 'social' );
If you want to display these buttons after headline, just change the action hook.
Read Add Author Bio Box below single post in Thesis Theme
Start of Floating Lazy Load Share Buttons
This below code helps to float the share buttons based on HTML tag.
/** Start of Floating Share Buttons */
$(document).ready(function () {
var top = $('#floating-sharebar').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
var maxY = $('#respond').offset().top;
if (y >= top && y < maxY) {
$('#floating-sharebar').addClass('fixed');
} else {
$('#floating-sharebar').removeClass('fixed');
}
});
});
Social Buttons will stay floated till the comment section is displayed.
Scripts that helps to lazy load Social Share Buttons
These scripts helps in lazy loading and the actual button will be displayed when mouse is hovered. (Downloading this files using link below).
/** Script for Google +1 Button */
$(document).ready(function () {
var element, script;
element = document.getElementById('floating-gplus');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
script.src = '//apis.google.com/js/plusone.js';
document.body.appendChild(script);
};
});
/** Script for Facebook Like Button */
$(document).ready(function () {
var element, script;
element = document.getElementById('floating-facebook');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
script.src = '//connect.facebook.net/en_US/all.js#xfbml=1';
document.body.appendChild(script);
};
});
/** Script for Tweet Button */
$(document).ready(function () {
var element, script;
element = document.getElementById('floating-twitter');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
script = document.createElement('script');
script.async = true;
script.src = '//platform.twitter.com/widgets.js';
document.body.appendChild(script);
};
});
/** Script for Stumble Upon Button */
$(document).ready(function () {
var element, script;
element = document.getElementById('floating-stumble');
element.onmouseover = function () {
this.onmouseover = null;
this.parentNode.removeChild(this);
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
script = document.createElement('script');
script.async = true;
script.src = '//platform.stumbleupon.com/1/widgets.js';
document.body.appendChild(script);
};
});
Download this entire code as socialshare.js file and upload it to your theme directory.
Add CDN version of jQuery to WordPress and Register Scripts
After uploading the socialshare file, you need to install jQuery plugin. Here is a pretty cool code that helps to add CDN version of jQuery to WordPress blog.
Add below code to functions.php file and update it.
/** Add CDN version of jQuery */
function my_init_method() {
if (!is_admin()) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js');
wp_enqueue_script( 'jquery' );
} }
add_action('init', 'my_init_method');
For Parent Themes
If you are using a parent WordPress theme, then add the below code to functions.php file.
/** Add Social Share Buttons JS to Theme */
function register_scripts() {
wp_enqueue_script('jquery-custom', get_bloginfo('template_directory').'/socialshare.js', false, '1.4.2');
}
add_action( 'wp_print_scripts', 'register_scripts', 100);
OR
For Child Themes
In case you are using any child theme, then add below code to functions.php file and update it.
/** Add Social Share Buttons JS to Child Themes */
function register_scripts() {
wp_enqueue_script('jquery-custom', get_bloginfo('stylesheet_directory').'/socialshare.js', false, '1.4.2');
}
add_action( 'wp_print_scripts', 'register_scripts', 100);
Add CSS to Floating Lazy Load Social Share Buttons
Final and most important part is to style the share buttons using CSS. Add the below code to style.css file and update it.
Download Image Files:
Download these images and upload them to your own server. Include image links in the CSS below (highlighted part).
#floating-facebook,
#floating-gplus,
#floating-twitter,
#floating-stumble{
color: #ffffff;
display: block;
line-height: 22px;
text-align: center;
text-decoration: none;
width: 55px;
background:url("ADD IMAGE URL HERE") no-repeat scroll 0 0 transparent;
}
#floating-facebook { background-position: -10px -35px;text-indent:-999em; }
#floating-google {background-position: -10px -0px;text-indent:-999em; }
#floating-twitter { background-position: -70px -35px;text-indent:-999em; }
#floating-stumble {background-position: -70px -0px;text-indent:-999em; }
#comment-link a{background: url("ADD COMMENT ICON LINK HERE") no-repeat scroll 0 center transparent;
color: #000000;
float: left;
font-family: arial;
font-size: 15px;
font-weight: bold;
height: 28px;
line-height: 28px;
padding: 0 0 0 32px;}
#comment-link a:hover{color:#D05B00; }
.floating-sharebar {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD;
float: left;
margin: 0 0 20px -20px;
max-height: 50px !important;
padding: 8px 0;
width: 650px;
}
.floating-sharebar .floating-title {
border-right: 1px solid #D2D2D2;
color: #B1A9A5;
float: left;
padding: 3px 15px 2px 5px;
text-transform: uppercase;
}
.floating-sharebar .floating-twitter {
border-right: 1px solid #E7E7E7;
float: left;
padding: 5px 0 5px 20px;
width: 90px;
}
.floating-sharebar .floating-facebook {
border-right: 1px solid #E7E7E7;
float: left;
padding: 5px 0 5px 20px;
width: 90px;
}
.floating-sharebar .floating-gplus {
border-right: 1px solid #E7E7E7;
float: left;
padding: 5px 0 5px 20px;
width: 80px;
}
.floating-sharebar .floating-stumble {
border-right: 1px solid #E7E7E7;
float: left;
padding: 5px 0 5px 20px;
width: 90px;
}
.floating-sharebar .comm {
float: left;
padding: 0 20px;
}
.floating-sharebar.fixed {
position: fixed;
top: 0;
z-index: 9999;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
}
Voila, you have successfully added lazy load floating social share buttons to your WordPress blog. We kindly request you to follow the steps clearly, otherwise you would end up breaking your blog theme. If you need any help, just drop a comment.
Thanks WPBeginner for this idea and Taylor for Lazy Load code.
Plugin to Add Floating Share Buttons:
Here is an awesome WordPress Plugin, developed by Way2Blogging, that helps to add floating share buttons. If you dont want to mess up with code, try this plugin.
Consider sharing this article…
How to add 3 column footer to WordPress theme
How to install a WordPress Plugin
How to Create Custom Post Templates in WordPress
How to Add 3 Column Widgetized Footer to Genesis
How to add ALT tag to images in WordPress
How to Remove Comment Author Website Link in WordPress
Wow, those buttons looks really impressive. Have you created them yourself?
yes and thanks for dropping by.
I don’t get the difference between using lazy buttons.. and normal ones.. which one would you suggest..??
Thanks…
It’s work on my site.
Yup.. why lazy buttons ? why not normal ones ?
The code given below the title ‘ Start of Floating Lazy Load Share Buttons’ should be added in function.php in Genesis Child Theme?
Bharat Nice tip for adding Floating buttons with out any plugin.
These days I hear a lot about combining Icons with CSS sprites who to achieve that? Any Idea
One more thing is how to get the a logo behind the code portion can you help with it.
Thanks
Not working on my Thesis theme plz where upload socialshare.js file ……..
plz help me…..
Wow! These buttons looks awesome. Thanks for the scripts.
I dont understand what code ito be pasted where…
i have pasted the codes in Single.php and Style.css….
But can’d understand what i should and post is function.php (with or without Slideshare.js)
Help…!!!
This was what I was searching for, as I was really pissed of my floating side share bar. So needed to add lazy social sharing on the top. Thanks for the pleasant and detailed tut, Bharath.
Hi Bharat,
May I know that you did not mention about this code on where to place:
/** Start of Floating Share Buttons */
$(document).ready(function () {
var top = $(‘#floating-sharebar’).offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
var maxY = $(‘#respond’).offset().top;
if (y >= top && y < maxY) {
$('#floating-sharebar').addClass('fixed');
} else {
$('#floating-sharebar').removeClass('fixed');
}
});
});
Amazing!! These socil icons have not only made my blog load fast but also clean and beatutiful.
great,, m gonna use it in my genesis theme
it really a great post i am searching for this button and finally i got it . thanks.
Nice Tips you have on your blog
These social sharing buttons looks just awesome. Thanks for sharing the scripts.
where to add the code under the heading of
Start of Floating Lazy Load Share Buttons
I want to modify this code to display a sharebar. I like the floating sharebar on your site(left). It loads after the page is loaded which does not slow down the site. Are you using custom code or plugin ?