jQuery social sidebar slider – Social Sidebars plugin

DirectCode | March 3, 2016 | Awesome, HTML5, jQuery, Plugins, Slider, Social Media | No Comments

Socialize your web project in a nice way using jQuery social sidebar slider plugin.

A nice jQuery social sidebar slider plugin

Add sticky share bar in sidebar, and slide out a social share button when mouse hovers over!

jQuery Social Sidebars is an animated social sidebars plugin. Please note, that jQuery UI library is required for easing effects. It’s easy to use, stable solution.

Social Sidebars plugin - jQuery social sidebar slider solution — Social Sidebars plugin – jQuery social sidebar slider solution

Usage

Create div for the share buttons bar:

<div id="socialside"></div>

Add resources:

<link rel="stylesheet" type="text/css" href="css/social.css" />

<!-- Important! Include files in this sequence! -->
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/socialbars.js" type="text/javascript"></script>

Now you can simply edit socialbars.js. After “var social=…” line every brackets represents one social bar. Just fill the brackets with some data and enjoy the results!

And example of filling brackets:

["Bar label", "your link", "bar background color", "bar logo"]

The optimal size of bar logo is 30px x 30px.

Note: if you want the social bars scrolling with your page, set position under “#socialside” to absolute. And if you want them on a fix position, leave it on fixed. You can adjust vertical position by changing the value of top.

Demo:

http://marta-daniel.hu/gitdemos/socialbars/demo.html

Find jQuery social sidebar slider on GitHub:

https://github.com/martadaniel/jquery_social_bars

jQuery social share with Hideshare plugin

Go social!