jQuery Share Plugin Demo

Initial Setup

Add this in html page

<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript" src="jquery.share.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.share.css"/>

Add the share image below your content.

<a href="javascript:void(0)" class="share" title="Share This">
<img src="IMAGES⁄iconShareGreenSmall.png" title="Share This"⁄>
</a>
                                    

Also see to it that you set the path of "social-sprites-two.png" properly in jquery.share.css w.r.t where you include the IMAGES folder.

Add a container "div" for the share icons and give id attribute to it. Note that the container "div" should have no parent element. It should be directly under the "body" tag.

<div  id="boxa"> </div>

Prior to using the Share plugin, it is required to
Register a new Mashery ID to access developer.sharethis.com by Visiting
http://developer.sharethis.com/member/register

Just SignUp and you will recieve a Web API Key for your new registered application.

Using the Share Plugin

Call the plugin function "share" on the class of "a" tag, with the required options. for example:-

<script type="text/javascript">
        $(document).ready(function(){
            $('.share').share({
                socialIcons : {
                    facebook : {
                        show : false
                    }‚
                    pinterest : {
                        show : true‚
                        media : "http://goo.gl/OCMfWB"‚
                        description : "Harshen Amarnath Pandey"
                    }
                }‚
                mandatory : {
                    containerId : "boxa"‚
                    APIkey : "bgrswprtt3nzgudfxr5zkjur"‚
                    URL : "http://www.nature.org/"
                }‚
                display : {
                    background : "#321243"
                }
            });
        });
</script>

For more information on how to use different options see Options.

Now just hover over the share icon.

Leaf

---

Providing just the mandatory options

By providing just the mandatory options as below:-

<script type="text/javascript">
        $(document).ready(function(){
            $('.share_butterfly').share({
                mandatory : {
                    containerId : "boxb"‚
                    APIkey : "bgrswprtt3nzgudfxr5zkjur"‚
                    URL : "http://www.wwf.org/"‚
                }
            });
        });
</script>

You get this (Hover over the share icon)

Butterfly

---

Options

Following are the different options provided for call to the "share" method with their default values.

socialIcons : {
    facebook : {
        show : true
    }‚
    twitter : {
        show : true
    }‚
    linkedin : {
        show : true
    }‚
    pinterest : {
        show : false‚
        media : ""‚
        description : ""
    }‚
    tumblr : {
        show : true
    }
}‚
mandatory : {
    containerId : ""‚
    APIkey : ""‚
    URL : ""
}‚
display : {
    background : "#eee"
}
                                    

All available options for customizing the plugin are explained below:-