iShare

Below you will find the documentation of everything you need to know about how to add it to any page and how to customize it according to your needs.

Step 1 - Include necessary files

Firstly include/link to jQuery and ishare script in your HTML. You can either add this in the head section or before the closing tag of body.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
 <script type="text/javascript" src="http://example.com/js/ishare/jquery.ishare.js"></script>

Also include the stylesheet in the head section.

 <link rel="stylesheet" href="http://example.com/js/ishare/ishare.css">

Step 2 - Configure

Add the ishare configuration code after/below where you have included the ishare script.

<script>
    $('.ishare').ishare();
</script>

The .ishare is the class which can be used to activate ishare. Example:

<a href="javascript:void(0);" class="ishare">Share this page</a>

This will open ishare when the link is hovered.

Step 3 - You're Done!

You're done! Because you have not added any extra configuration to script, all the default settings will apply.

Its so easy and highly customizable. Or you can just use the default settings. The styles are set in css for easy editing.

There are many social share website links pre-defined in the script but if you find one that is not there, you can just add it by adding a simple code.

And we have added a comment for almost every function in the script to make it easy for editing.

Basic Customization

$('.ishare').ishare({
    displayTitle: true,
    title: 'Sharing is caring!', // the title of ishare

    icons: 'digg,linkedin,technorati,delicious,yahoo,google,newsvine,reddit,live,facebook,twitter,stumbleupon,bebo,mixx,myspace,netvibes,tumblr,squidoo',
    targetBlank: false, // open link in new tab? true or false

    sharetitle: "Check out this jQuery plugin called ishare",
    shareurl: "http://codecanyon.net/users/DanielPaul?ref=DanielPaul",

    fbLikebox: true,
    fbAction: "recommend", // like or recommend
    fbcolorscheme: "dark", // light or dark

    tweets: true,
    tweetText: "Check out this awesome ishare URL",
    tweetVia: "DanielPaul94", // via twitter account
    twitterRelated: "DanielPaul94" // related twitter account
});

Directions

Set the location of ishare when a link is hovered. Left, Right, Top or Bottom?

$('.ishare').ishare({
      position: 'left' // top, left, right or bottom
});

Activation Methods

Hover or Click?

$(.ishare').ishare({
    activation: 'click' // click or hover
});

Custom height and width

$('.ishare').ishare({
    width: '500px',
    height: '80px'
});

Custom timings

$('.ishare').ishare({
    fadeIn: 10, // fadeIn speed
    fadeOut: 600, // fadeOut speed
    fadeOut_delay: 1000, // how long till fadeOut
});

Advanced functions before and after ishare

$('.ishare-advanced').ishare({
    enter: function(){
        alert('ishare entering');
    },
    exit: function(){
        alert('ishare out!');
    },
    iconsDir: '../ishare/icons/'
});