Although, you might find a few plugins which are nicely doing the work of adding a Floating Share Box to a WordPress blog. But, if you’re like me and don’t like to install all those plugins which push crap to your database or add some useless widgets to your Dashboard, you can follow this guide to insert one easily. You might also not be willing to add a plugin because it uses additional resources of the server.
The guide below will add add the four major sharing tools i.e Twitter, Facebook, StumbleUpon and Reddit. However, you can add/remove any service easily.
Step 1 – Adding the required CSS:
The first step is to add the required CSS to your CSS file. Just open up your theme editor by clicking on Editor under the Appearance tab in your WordPress Admin panel. It will directly open up your CSS file. If it doesn’t, click on style.css (or something similar) at the right. Now, enter the following CSS code at the end of your CSS file:
/* Floating Share Widget */ .post-share { width : 80px; padding : 10px 0; padding-bottom : 0; background : #ffffff; border : 1px solid #d2d2d2; border-radius : 8px; text-align : center; position : fixed; top : 229px; left : auto; z-index : 15; margin: 0 0px 0 -135px; } .share-widget { margin-bottom : 10px; }
After pasting the above code, click on Update File.
Step 2 – Adding the Share Box:
Now, open up your Single Post file (single.php) by clicking on single.php from the templates in the right to insert the required code to call the sharing buttons. Now, copy and paste the following code to your Single Post file after the post is called, but before the call to comments appear.
<!-- Sharing Box Starts --> <div class='post-share'> <div class='twitter-share share-widget'> <a href="http://twitter.com/share" class="twitter-share-button" data-text='<?php the_title(); ?>' data-via="TechMestoz" data-count="vertical" data-related="TechMestoz:Tech Blog">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div> <div class='facebook-share share-widget'> <iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&send=false&layout=box_count&width=46&show_faces=true&action=like&colorscheme=light&font=arial&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:46px; height:65px;" allowTransparency="true"></iframe> </div> <div class='stumbleupon-share share-widget'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='reddit-share share-widget'> <script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script> </div> </div> <!-- Sharing Box End -->
Necessary Change: Please change the user in the data-via tag of the tweet button in the code to your twitter username or the user you wish to mention. Otherwise, we (TechMesto) will be @ mentioned in the share.
Why was it called after the post? The fact that it is called after post but before comments is because the first major thing of the page is the post. If we call the share buttons before the post, if somehow the social widget doesn’t responds correctly, it will pause the whole post from loading.
Showing the box on WordPress Pages:
If you want to show the widget on WordPress pages too, just add the code in the Step 2 to your Page Template (page.php)
If you experience any difficulty in adding the code or the code isn’t working for you, just leave a comment below.
I tried adding this, and it worked fine for one of my sites (thor2rumors.com), but in my main site (unleashthefanboy.com), it appeared in the actually post field, not off to the side. Any suggestions?
Are you sure you added it after the post's DIV tag was closed? If somehow you added it inside its div, it cannot get out of that frame.
I've double checked, but still no cigar. I have a heavily customized theme, though, with a bit of occasionally messy code, so that might be at fault. I'll continue to try to fix it, thanks for the support!
Yeh! You know your theme better..
You're the man. I spent two days browsing through shitty Sharebar plugins and they either messed up my site or didn't work at all. Your method worked like a charm. Thanks 🙂
Pretty cool, actually, you solved a css problem I was having. Thanks! Clicked on a few ads b/c they caught my attention, hopefully you'll get something back.
I'm grad that it helped you.
And, Thanks for taking out some of your precious time to leave this comment. It feels nice and encouraging when someone comes up and says, "It really helped me 🙂 "
Cool! I'm wondering if there is any way to add Digg and take off Stumble. Digg is more productive than Stumble. Thank you for sharing the code.
Sure, you can add/remove any service as you need. To remove stumble, just remove the 'stumbleupon-share share-widget' DIV and add the Digg code replacing it. You can easily find the code which you need to add at the Integrating Digg Button page.
Here's a screenshot of where to add code for making it easy for you.
You can place the Javascript earlier (head or beginning of body) to start downloading of Digg button earlier.