Socializer.css

Socializer is a CSS library to create customizable social media share buttons/icons and floating sharebar easily with handful of predefined classes and styles.

Social buttons/icons generator

Features

• 35 icon color schemes including all famous social media sites
• 6 button shapes, 9 hover styles, 5 text styles, 3 layout types, 17 border, background and shadow styles in total = 13770 different customizations. See below for the class names.
• Support for vertical icons
• Support for floating sharebar, both vertical and horizontal.
• Support for more menu
• Supports custom icon fonts or images.

Usage

Socializer css library requires the following resources to be included and the HTML for the social button can be created either with or without socializer.js

• The socializer css library itself
• Fontawesome icon font or any other icon font or custom image icons
• Socializer.js to automatically generate HTML on the fly, similar to a social button widget is required.

There is a web app to generate social buttons code for socializer CSS library.

Includes

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/vaakash/socializer@master/css/socializer.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.2/css/all.css">

With socializer.js

<!-- Turns into social sharebar -->
<div class="socializer" data-features="32px,circle,icon-white,pad" data-sites="facebook,twitter,pinterest,print,email,rss"></div>

<script src="https://cdn.jsdelivr.net/gh/vaakash/socializer@master/js/socializer.js"></script>
<script>
(function(){
    socializer( '.socializer' );
}());
</script>

Without socializer.js

<ul class="socializer sr-32px sr-icon-white"> <!-- Customization class names go here -->
    <li class="sr-facebook">
        <a href="#"><i class="fab fa-facebook"></i></a>
    </li>
    <li class="sr-linkedin">
        <a href="#"><i class="fab fa-linkedin-in"></i></a>
    </li>
    <li class="sr-whatsapp">
        <a href="#"><i class="fab fa-whatsapp"></i></a>
    </li>
</ul>

Available CSS classes

Social bar is identified with the class socializer. All classes below should be prefixed with sr-

Floating Sharebar

Socializer.css has support for floating sharebars too. The main sharebar should be wrapped in a tag which holds the floating sharebar related classes.

<div class="sr-sharebar sr-sb-hl sr-sb-top">
    <!-- Socializer sharebar HTML -->
</div>

Available floating sharebar CSS classes

Sharebar is identified with the sr-sharebar class assigned to the parent of the social bar. All classes below should be prefixed with sr-sb-.

Documentation

Click here to see the docs of this library.

WordPress plugin

WP Socializer is a wordpress plugin for social media buttons and it uses socializer.css for sharebar. Check it out

License

Copyright (c) 2023 Aakash Chakravarthy, released under the MIT License.