How To Install Mashable Floating Social Networking Buttons To WordPress Blog

You will likely familiar with Mashable.Com’s floating Social Network button which appear on the left side of your screen. And likely you want to have that on your WordPress blog, beside to make your visitors/readers click the social media buttons, it’s going to make your blog cooler!

If you want to have Mashable floating Social Networking button, Erik has been nice to share the tutorial on this matter. And here are the steps:

Firstly download and install the following plugins:

• WP Google-buzz – plugin
• Tweetmeme Plugin
• Facebook Share (New) Button

And then do these steps:

1. Open your header.php, and find this <?php wp_head(); ?>, note: if your header.php document does not have that tag, just add it and put it above this tag </head>.

2. And put this code above <?php wp_head(); ?>:

<script type="text/javascript">
jQuery(function () {
var msie6 = jQuery.browser == 'msie' && jQuery.browser.version < 7;
if (!msie6) {
var top = jQuery('#share_buttons_single_page').offset().top - parseFloat(jQuery('#share_buttons_single_page').css('margin-top').replace(/auto/, 0));

var y = jQuery(this).scrollTop();
// whether that's below the form
if (y >= top-20) {
// if so, ad the fixed class
jQuery('#share_buttons_single_page').addClass('fixed');
} else {
// otherwise remove it
jQuery('#share_buttons_single_page').removeClass('fixed');
}
});
}
});
</script>

3. And now open your single.php and put this anywhere you think fit:

<div id="share_buttons_wrapper">
<div id="share_buttons_single_page">
<div class="wdt_button">
<?php if (function_exists('add_wp_google_buzz')) echo add_wp_google_buzz(); ?>
</div>
<div class="wdt_button">
<?php if (function_exists('tweetmeme')) echo tweetmeme(); ?>
</div>
<div class="wdt_button">
<?php if (function_exists('fbshare_manual')) echo fbshare_manual(); ?>
</div>
</div>
</div>

It’s better to put the code above your <?php the_content; ?>

4. And the now open your css file (stylesheet) and add the following within it:

#share_buttons_single_page img{
background: none;
border: none;
padding: 0;
margin: 0;
}
#share_buttons_wrapper {
left:-120px;
position: absolute;
margin-left: 35px;
width: 280px;
}
#share_buttons_single_page{
position:absolute;
text-align: left;
margin: 0 0 10px 15px;
}
#share_buttons_single_page.fixed {
position: fixed;
top:20px;
}
#share_buttons_single_page .wdt_button{
float:left;
clear:left;
margin-bottom: 10px;
}

5. It’s done, now your WordPress blog has floating social networking buttons like Mashable.Com

And see you in my next posts!