How to add a floating share box to WordPress without Plugin

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.

,

9 Responses to How to add a floating share box to WordPress without Plugin

  1. Stephen Peters January 27, 2012 at 10:13 am #

    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.

    • admin January 27, 2012 at 6:04 pm #

      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.

  2. Good May 9, 2012 at 5:14 am #

    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.

    • Admin May 13, 2012 at 9:30 pm #

      I'm grad that it helped you.

      About the ads, I'd only say that only click it if you're really interested in it. Don't ever click ads to help anyone. I'm an Adwords Advertiser too, and I know how it feels when you get too many clicks and just a few conversions. So, before helping anyone with ads, please think about the Advertiser too, who spends plenty of money on these ads.

      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 🙂 "

  3. Andy May 14, 2012 at 3:15 am #

    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 🙂

  4. fanboyunleashed September 3, 2012 at 4:30 pm #

    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?

    • Admin September 3, 2012 at 8:32 pm #

      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.

      • Stephen Lemlek September 4, 2012 at 3:43 pm #

        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!

        • Admin September 6, 2012 at 12:55 pm #

          Yeh! You know your theme better..

Leave a Reply