Socializer.css – Doc

Getting started

1. Including the resources

Include socializer.css and font-awesome font icon into the page.

Note: Any font-icon or images can be as icon, font-awesome font icon has the most number of social media icons and color schemes are defined as per its list.

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/vaakash/socializer/master/socializer.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

2. The HTML

Socializer.css depends on the following HTML structure. This HTML structure can be used directly or socializer.js can be used to generate it dynamically on the fly.

Note: Socializer.js generates HTML with font-awesome icon classes. So if it is the preferred way, make sure that font-awesome is included in the page.

With socializer.js

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

<script src="https://cdn.rawgit.com/vaakash/socializer/master/js/socializer.js"></script>
<script>
(function(){
    socializer( '.socializer' );
}());
</script>

Without socializer.js

<ul class="socializer sr-32px sr-icon-white"><!-- Wrapper with "socializer" class followed by customization class names prefixed with sr- -->
    <li class="sr-twitter">
        <a href="#"><i class="fa fa-twitter"></i></a>
    </li>
    <li class="sr-facebook">
        <a href="#"><i class="fa fa-facebook"></i></a>
    </li>
    <li class="sr-{social_media_site_name}">
        <a href="#">{social_media_icon}</a>
    </li>
</ul>

Refer the below section for the list of social media button classes supported by socializer.css

CSS classes

Following CSS classes are supported by socializer.css. These names should be prefixed with sr- while using as CSS classes.

Example

To create a social media button with 48px icon size, circle shape, color icons, white background, small dark border and with shrink effect on hover, below is an example of how CSS classes are selected.

Plain HTML

<ul class="socializer sr-48px sr-circle sr-bg-white sr-bdr-dark sr-bdr-sms sr-shrink">
    <li class="sr-twitter">
        <a href="#"><i class="fa fa-twitter"></i></a>
    </li>
    <li class="sr-facebook">
        <a href="#"><i class="fa fa-facebook"></i></a>
    </li>
    <li class="sr-googleplus">
        <a href="#"><i class="fa fa-google-plus"></i></a>
    </li>
</ul>

With socializer.js

<div class="socializer" data-features="32px,circle,bdr-sm,bdr-dark,bg-white,pad" data-sites="twitter,facebook,googleplus"></div>
<!-- Include and initialize socializer.js once -->

Special classes

pad

This class adds right padding to the buttons, separting them from each other.

multiline

This class adds bottom padding to the buttons. This class can be added if the buttons goes to multiple lines.

Texts

When texts are included in the icon, the text CSS classes should be added to the parent of the icon instead of the main wrapper. Also the text should be wrapped with a tag with text class.

Example

Below example has text next to icon. Below example uses text-in for this case. Other text based classes can be referred in the above table.

<ul class="socializer sr-48px sr-circle sr-bg-white sr-bdr-dark sr-bdr-sms sr-shrink">
    <li class="sr-twitter sr-text-in">
        <a href="#"><i class="fa fa-twitter"></i> <span class="text">Twitter</span></a>
    </li>
    <li class="sr-facebook sr-text-in">
        <a href="#"><i class="fa fa-facebook"></i> <span class="text">Facebook</span></a>
    </li>
    <li class="sr-googleplus">
        <a href="#"><i class="fa fa-google-plus"></i></a>
    </li>
</ul>

Available social buttons with color schemes

Floating sharebar

Floating sharebar can be created by wrapping the main sharebar with floating bar related classes.

Example

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

CSS Classes

Below matrix lists all floating bar related CSS classes.