How to Add Floating Social Media Buttons to WordPress Blog without any Plugin

One of the best ways to get more exposure and more traffic to your blog posts is via Social Networking Websites. Social Networking Websites can easily boost your traffic. Users will easily share your posts on Social sites like Facebook, Digg, Twitter and StumbleUpon if you add social media buttons to your blog posts.

These days most of the bloggers are adding floating social media buttons to their blog posts. Floating buttons stay on a fixed position even if you scroll down or up the page which gives your blog readers the more flexibility to easily share your posts.

In this tutorial you will learn How to add these floating icons to your WordPress blog.

Have a look at the screenshot below:

How to add Floating Social Media Buttons to WordPress blog:

1. Sign in to your Dashboard and go to Appearance -> Editor.
   
2. Copy and paste the following code in style.css file.

   #sharebox {
   background-color:#fff;
   border:1px solid #ccc;
   bottom:50px;
   left:30px;
   position:fixed;
   }
   
   #sharebox .float {
   padding:5px;
   }

3. Now open single.php file and search for something like <div class=”entry”> and paste the following code after it.

   <div id="sharebox">
   
   <div class="float">
   <script type="text/javascript">
   tweetmeme_source = 'tricksdaddy';
   </script>
   <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
   </div>
   
   <div class="float">
   <script>var fbShare = {
   url: <?php the_permalink() ?>,
   size: 'large',
   badge_text: 'fff',
   badge_color: '3b5998',
   google_analytics: 'true'
   }</script>
   <script src="http://widgets.fbshare.me/files/fbshare.js"></script>
   </div>
   
   <div class="float">
   <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
   </div>
   
   <div class="float">
   <script type="text/javascript">
   (function() {
   var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
   s.type = 'text/javascript';
   s.async = true;
   s.src = 'http://widgets.digg.com/buttons.js';
   s1.parentNode.insertBefore(s, s1);
   })();
   </script>
   <a class="DiggThisButton DiggMedium"></a>
   </div>
   
   </div>

4. Save the file.
5. Now open any of your blog post and see the new floating social media buttons.

If you face any problem in adding these buttons to your blog, just leave your comment here and I’ll be available to help you out.

You might also be interested in:

• How To Add Facebook Like Button To WordPress Blog
  
• Add Google Buzz Button To WordPress Blog
  
• How To Add Orkut Share Button To WordPress Blog
  

Tagged as: Digg, Facebook, floating facebook button, floating social media buttons, Social Media Buttons, StumbleUpon, Twitter, WordPress