Usage

First specify a container in your html files like this(remember to refer necessary files):

<html>
    <head>
        <!-- something here -->
    </head>
    <body>
        <!-- something here -->
        <div id="container"></div>
        <!-- something here -->
    </body>
</html>

Then initialize the social sharing components in your JavaScript file like this:

$("#container").hshare();

You can also specify options for hshare like this:

$("#container").hshare({
    size: "large",
    copyLink: false,
    platforms: [{
        name: "wechat"
    }, {
        name: "qzone"
    }]
});

All configurable params is listed below:

name type meaning value defaultValue
size string size of the icon small/medium/large medium
copyLink boolean if a copyLink sharing entry is included true/false false
print boolean if a printing entry is included true/false false
bookmark boolean if a bookmark entry is included true/false false
more boolean if a "more" panel will be included true/false false
renderText boolean if text will be shown true/false false
platforms Array customized shown platforms --- undefined
extends Array customized platforms shown in the "more" panel --- undefined
stat Object if statistics port is enabled --- undefined

Explanation

  • copyLink: this param specifies an entry. Clicking it will enable user to copy the url of current page into clipboard.
  • print: this param specifies an entry. Clicking it will allow user to print current webpage.
  • bookmark: this param specifies an entry. Clicking it and an alert will be shown, telling user to use "Ctrl + D" to put the webpage into their browsers favorite list.'
  • more: since we support 40 platforms, show all platforms in a single line is likely to mess up the whole page. So we include a "more" entry, which is a "..." icon by default. When the cursor hovers above the entry, a panel including all the rest supported platforms will show up.
  • size: To make sure that the text will be shown properly, if renderText is set to true, then no matter what value that size param carries, the rendered icon size will always be "small"

More