Flati Social Share Plugin in jQuery

Flati is a social share plugin written with jQuery library. It is designed with flat UI. It is modern and trendy also.

Flati Social Share jQuery Plugin

Required Files

You need to include jQuery library and the flati minified js file inside of head tag like below :

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/flati-v1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/flati.css">

If you have these files in different path, make sure that you’ve put the path correctly.

Plugin Initialization

Plugin should be initialized with in the $(document).ready() function like below.

<script type="text/javascript">
//Initialization of the Plugin 
$(document).ready(function () {
 $("body").flati();
});
</script>

That’s it! you’ve successfully integrated the plugin with default values.

Now go to your browser and open the index.html file

You’ll see something like below.

Flati social share jQuery plugin

Customization

You can customize this flati social share jquery plugin by sending options to override the default options. Take a look at below :


$("body").flati({
		skin : "ocean",
		containerBg : "#1e8bc3",
		containerBorder : "#6bb9f0",
		iconBg : "#6bb9f0",
		iconHover : "#003380",
		triggerPosition: "right"
});

flati-positions

  • skin : name of the skin (see inside of the folder called “skins”).
  • 1) containerBg : Background color or image of the top container.
  • 2) containerBorder : Border color of the top container.
  • 3) iconBg : Color of the border around the social icons.
  • 4) iconHover : Color of icon border when hovering on it.
  • 5) hoverEffect : Effect when you hover the icons.
  • 6) triggerPosition : Left or Right

When you download the plugin, there will be three skins in the skins folder which are rasgulla, ocean and summer.

See the Skin_Change_Guide.txt file for the initialization reference.

Skins will be developed and updated in future, so you can download it and put it into skins folder and change the initialization according to the skin settings.

But you can specify your own colors.

This is it. Enjoy the plugin and make sure to subscribe with us to get notified about the future versions and skins.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

One comment on “Flati Social Share Plugin in jQuery”

Leave a Reply

Your email address will not be published. Required fields are marked *