void Tricks Logo void Tricks Logo
menu
search

Flati Social Share - jQuery Plugin

Simple yet customizable jQuery plugin that solves your need for an easy to setup social media sharing functionality for your web pages.

Flati Social Share - jQuery Plugin

Plugin Features

Flati is a very basic social media page sharing plugin. Its main highlight is its simplicity.

Since it is light weight, the setup process would be pretty easy

It can be customized according to your needs.

Documentation

Download the plugin and extract it and copy the flati folder to wherever you want in your project.

Include flati.min.css inside your head tag

<head>
    <meta charset="UTF-8">
    <title>Flati Social Share - jQuery Plugin</title>
    <link rel="stylesheet" href="/path_to_flati_folder/css/flati.min.css">
</head>

Include jQuery library and flati.min.js before the ending of </body> tag.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/path_to_flati_folder/js/flati.min.js"></script>
</body>

Initialize the plugin inside your document.ready function.

<script>
    $(document).ready(function(){
        $("body").flati();
    });
</script>

You can pass optional parameters to the instance to customize the plugin. See the number of available parameters below.

<script>
    $(document).ready(function(){
        $("body").flati({
            theme: 'space'
        });
    });
</script>

Optional Parameters

theme

Changes the main color shceme of the plugin.

Allowed values (earth, space, moon, mars, titan, neptune, nobg)

By default it will be earth :D

backgroundColor

Sets the given color to the dock's background ( e.g: #ffffff, rgb(255, 200, 0), red )

triggerPosition

Sets the position of the trigger icon.

Allowed values (left, right)

By default it will be right

dockPosition

Sets the position of the dock.

Allowed values (top, right)

By default it will be top

icons

Lets you choose the social media icons from available list and reorder.

It should be a valid javascript array (e.g: ['facebook', 'twitter'] )

Allowed values (facebook, google-plus, twitter. reddit, linked-in, pinterest, vk, whatsapp)

Only limited number of sites supported for now and more sites will be added in future based on the demand. So comment below if you want any particular site to be added.


Icons designed using Freepik's SVGs
iconShape

Changes the shape of the social media icon.

Allowed values (square, round)

By default it will be round

triggerTest

Puts the given text right next to the sharing icon.

close