Socializer.js – Documentation

Usage #

Socializer.js generates HTML for with respect to socializer.css features.

Example #

<script src="https://cdn.rawgit.com/vaakash/socializer/master/js/socializer.js"></script>
<script>
    socializer( '.my-element' );
</script>

Syntax #

<script>
    socializer( 'element to be selected', properties_object );
</script>

Options #

We can set options in two ways.

• Inline using data-*
• External options via JS object

Inline options #

Inline options should be set on the target element which gets converted into a sharebar.

Note: All examples below assumes socializer.js is included

Example

<div class="my-buttons"
data-features="32px,circle,vertical,icon-white,pad"
data-sites="facebook,googleplus,instagram,print,email,rss,more"
data-text="in"
data-meta-link="http://www.aakashweb.com/"
data-meta-title="Aakash Web"

data-meta-instagram="https://instagram.com/vaakash8"
data-more="pocket,digg,flickr" ></div>

<script>
    socializer( '.my-buttons' );
</script>

data-features

This attribute holds all the CSS classes separated by comma and defines the appearance of the social buttons. List of all CSS classes can be referred in this page.

data-sites

This attribute holds the list of social media buttons to be generated. List of all supported social media sites can be seen in this page.

data-text

The attribute holds the text style for the buttons. If it is empty no texts will be shown. List of all CSS classes can be referred in this page (optional)

data-meta-link

The URL to be shared is provided here (optional: When this is empty, the current page URL is used automatically)

data-meta-title

The title of the page to be shared is provided here (optional: When this is empty, the current page title is used automatically). Similarly there are other properties like data-meta-twitterusername, data-meta-image, data-meta-rss which can be used to change the respective properties.

data-meta-{social_site_id}

Attributes of this kind can be used to give custom URL to the specific social button. If placeholders like {url}, {title} are present in the URL, they will be replaced with the page’s URL and title respectively. List of all supported social media site ID can be referred in this page.(optional)

data-meta-more

Social media site IDs mentioned in this page are moved to a more menu. Make sure that the data-sites has a more ID present in the list. (optional: When this is empty, the current page title is used automatically)

External options #

External options are the ones set via the properties while initializing. These properties are similar to the inline options and are self explanatory.

Example

<div class="my-buttons"></div>

<script>
    socializer( '.my-buttons', {
        sites: [ 'facebook', 'twitter', 'googleplus', 'print', 'email', 'rss' ],
        features: '32px,circle,vertical,icon-white,pad',
        more: 'pocket,digg,flickr',
        meta: {
            link: 'https://www.aakashweb.com/',
            title: 'Aakash Web',
            description: '',
            image: '',
            rss: '',
            twitterusername: '',
            instagram: 'https://instagram.com/vaakash8'
        },
        text: 'in'
    });
</script>