Social Media ShareBar with Fisheye Effect

Introduction

Either you likely provide already sharing buttons to you blog posts or not, you may be interested in this light-weight solution. Why? Because it's fancy, it takes very little space on your page and it is so easy to attach.

Demo

Posted by Dmitry Sheiko

on November 25th, 2011

Usage and API

Well, just download the Sharebar source code and extract the archive into a folder in you project. Well, just download the Sharebar source code and extract the archive into a folder in you project. I assume you use jQuery, so just add to the code of your blog pages:

<link rel="stylesheet" type="text/css" href="./assets/sharebar.css" />
<script type="text/javascript" src="./js/sharebar.js"></script>

Now you have to only mark with classes outer boxes for your articles, article title nodes and put placeholder for share bar. For example, when you want share bars next to blog posts in the list:

 <li class="shareArticle">
    <a class="shareLink" href="http://article-link.com">A title</a>
    <span class="shareBar"><!-- Sharebar placeholder--></span>
    <p>Article overview</p>
</li>
<li class="shareArticle">
    <a class="shareLink" href="http://article-link.com">A title</a>
    <span class="shareBar"><!-- Sharebar placeholder--></span>
    <p>Article overview</p>
</li>

When you want the bar on the post details page:

<div class="shareArticle">
    <h2 class="shareLink" data-href="http://article-link.com">A title</h2>
    <span class="shareBar"><!-- Sharebar placeholder--></span>
    <p>text</p>
</div>

Link info node can keep the shared article link either in href attribute or in data container data-href.