How To Add A Scrolling Social Bar Without A Plugin

by Tory McBroom · 13 comments

Scrolling Social BarMost of you may have noticed the little scrolling social bar off to the left of the content.  This makes it easy for readers to share the post no matter where they are on the page.

It’s a neat little feature that can easily be added to a WordPress site by using the Sharebar plugin.  However, if you’ve been following my blog at all then you know that I like to keep things simple and use a minimal amount of plugins.

Luckily, adding a scrolling social bar to your site is extremely easy.  Simply follow these two steps:

1. Add this to your CSS file


.buttonsWrap {
display:block;
float:left;
margin:40px 0 0 -90px;
position:fixed;
background:#F5F5F5;
width:50px;
padding:10px
}
.tweetmemeBtn, .facebookBtn, .stumbleUponBtn .googleplusBtn {
display:block;
float:left;
}
.facebookBtn {
margin:15px 0 10px 2px
}
.googleplusBtn {
margin:13px 0 0 0
}

2. Add this code to your single.php


<!-- Main wrapper -->
<div class="buttonsWrap">
<!-- Tweetmeme button -->
<div class="tweetmemeBtn">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<!-- Facebook button -->
<div class="facebookBtn"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink()?>&layout=box_count&show_faces=true&width=450&action=like&font&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:65px;" allowTransparency="true"></iframe>
</div>
<!-- StumbleUpon button -->
<div class="stumbleUponBtn">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=<?php the_permalink()?>"></script>
</div>
<!-- Google Plus button -->
<div class="googleplusBtn">
<g:plusone size="tall"></g:plusone>
</div>
</div>

Now make sure to paste the above code here in your single.php:


<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-12">
<!-- Place codes here -->

That’s it! Feel free to edit the CSS to style your new social bar.  You can also add or swap out sharing buttons.

Oh, and if you use the Thesis theme like I do and you’re not sure how to properly add this code to your custom functions file I’ve got you covered.  Simply copy and paste the code below:


function scroll_bar_before() {
if (!is_front_page()) { ?>
<!-- Main wrapper -->
<div class="buttonsWrap">
<!-- Tweetmeme button -->
<div class="tweetmemeBtn">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<!-- Facebook button -->
<div class="facebookBtn"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink()?>&layout=box_count&show_faces=true&width=450&action=like&font&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:65px;" allowTransparency="true"></iframe>
</div>
<!-- StumbleUpon button -->
<div class="stumbleUponBtn">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=<?php the_permalink()?>"></script>
</div>
<!-- Google Plus button -->
<div class="googleplusBtn">
<g:plusone size="tall"></g:plusone>
</div>
</div>
<?php }
}
add_action('thesis_hook_before_post_box', 'scroll_bar_before');

Enjoy!