FlatiShare: a simple social sharing plugin in javascript

About

A simple and lightweight social media sharing plugin written in vanilla javascript, that lets your users to share your page in famous social media sites.

Eventhough FlatiShare is lightweight, it lets you customize the appearance and behaviour of the plugin.

Dependencies

Since this plugin is entirely written in vanilla javascript, you don't need any additional dependencies

Setup

Include flatishare.min.css inside head tag and include flatishare.min.js inside your body tag, ideally just before the closing of body tag.

<!DOCTYPE html>
<html>
<head>
    <link href="dist/flatishare.min.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="dist/flatishare.min.js"></script>
</body>
</html>

Basic Usage

Once the css and js files have been included in your page properly, you can add an element with the class name FlatiShare

<div class="FlatiShare" ></div>

If you want render the social media icons directly instead of rendering sharing icon, which will show social icons once clicked, you can use the following code

<div class="FlatiShare" data-trigger="false"></div>

You can override the default sharing url which is current url in the browser window by adding the following markup

<div class="FlatiShare" data-trigger="false" data-url="https://example.com"></div>

You can use some classes to modify the plugins appearance and behaviour of the plugin

<div class="FlatiShare sunshine" data-trigger="false" data-url="https://example.com"></div>

You can add the following classes to override few options of the plugin.

Classes

Option
Value
Description
Theme
String
(default: default)
Changes the overall apperance. Available values are
default, sunshine, clouds, ocean, titan, voidTricks
Slide From
String
(default: left)
Changes the position where the icons appears. Available values are
left, right, top, bottom
Icon Style
String
(default: square)
Changes the look of the icons. Available values are square, rounded