How To Add A Floating Bookmarks Panel To Your Blog

In one of my weekly top blog posts round up, I raved about the stunning Smart Sharing plug-in by the folks @ WpBeginner. This plug-in made it possible to add a floating social media bookmark panel to the side of your wordpress blog’s theme making it easier for your readers to bookmark and share your posts.

I was in love with it, until, I casually navigated the mobile version of this site and discovered that the floating panel was now floating over my content thus making it impossible for mobile visitors to read my blog posts.

I uninstalled the plug-in @ once and started looking for ways to implement it’s function within the desktop theme of my blog ONLY! After reading How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 and Fixed Social Icons on the Side of Whole Site, I created my own floating bookmarks box and here’s how I managed it.

Log in to your wordpress admin area then go straight to theme editor. Copy and paste the css code below into your theme’s stylesheet (style.css)

#fixed_icons {
border:1px solid #E8E8E8;
position:fixed;
background:#fff;
width: 65px;
left: 0; margin: 0 0px 0 20px;
top: 80px; }
}

#fixed_icons a {
display: block;
text-indent: 4px;
height: 48px;
padding-bottom:3px;
padding-top:10px;
text-decoration: none;
}

#fixed_icons ul {
padding: 5px;
border-bottom: 1px solid #e8e8e8;
}

Once you’re done save it & then open your single.php and right between <?php get_sidebar(); ?> and <?php get_footer(); ?> add the following code:

<div id=”fixed_icons”>
<ul>
<script type=”text/javascript”>
tweetmeme_source = ‘your twitter id’;
tweetmeme_url = ‘<?php the_permalink(); ?>’;
</script>
<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script>
</ul>

<ul>
<a name=”fb_share” type=”box_count” href=”http://www.facebook.com/sharer.php”>Share</a><script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script>
</ul>

<ul>
<script src=”http://widgets.digg.com/buttons.js” type=”text/javascript”></script>
<a class=”DiggThisButton DiggMedium”></a>
</ul>

<ul>
<script src=”http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=<?php the_permalink(); ?>”></script>
</ul>

<ul>
<a title=”Post to Google Buzz” class=”google-buzz-button” href=”http://www.google.com/buzz/post” data-button-style=”normal-count”></a>
<script type=”text/javascript” src=”http://www.google.com/buzz/api/button.js”></script>
</ul>
</div>

Save your single.php template and your floating bookmarks panel should now appear right at the side of your theme on every single post.

If you’d like to change the distance of the floating panel from the top of the screen/monitor, simply edit top which is shown in red above. For left and right display of the panel and distance from the theme also edit left shown in red too.

As you all might have noticed, I’m no longer using it here because Amit Banerjee complained that it was blocking the contents of my blog. Apparently it works fine on monitors with larger resolutions than smaller ones.

NOTE: Only use the floating panel if you’re quite certain that the majority of your visitors have got high resolution monitors or wide screen monitors. I think there’s a way of tracking that via Google Analytics. I’m not so sure now. On the other hand, you could download and install ShareBar plugin which is what I’m presently using now

If you need assistance, feel free to leave a comment below and I’ll be glad to help you in any way I can .

1. How To Add Content After The More Tag In WordPress
2. How To Add NoFollow Attribute To Blog Roll Links
3. How To Add A Favicon To Your Blog & Website
4. Search Results
5. How To Integrate Tweetmeme Without A Plug-in