The simplest way to configure your platforms is to specify merely the name of a supported platform like this:
$("#container").hshare({
platforms: [{
name: "kaixin"
}, {
name: "pengyou"
}, {
name: "qzone"
}, {
name: "tieba"
}, {
name: "douban"
}, {
name: "qq"
}, {
name: "renren"
}, {
name: "sinaweibo"
}]
});
hshare embeds the corresponding configuration for these platforms and will use them during rendering.
Remember: If you don't specify platforms(platforms param's value is undefined) then the following platform will be used by default.
name | platform |
---|---|
qzone | QQ空间 |
微信 | |
sinaweibo | 新浪微博 |
douban | 豆瓣 |
Furthermore, in hshare, a platform can be customized as you wish. After analysing API of a great many platforms, we have concluded that a platform can be configured with the following components: An HTML template. Some params that should be specified dynamically into the template. * An click event handler that is called when the HTML DOM is clicked.
For example, here is the configuration data for the Qzone platform that we specified by default:
{
name: "qzone",
template: "<a class='#{css}' href='#{apiLink}?url=#{url}&title=#{title}' target='_blank' title='#{hint}'><img align='top' src='#{icon}' alt='#{hint}' />#{text}</a>",
params: {
apiLink: "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey",
icon: "https://heavenduke.github.io/hshare/icons/qzone.png",
text: "QQ空间",
hint: "分享到QQ空间",
size: "medium",
title: "HShare+Demo",
url: "https%3a%2f%2fheavenduke.github.io%2fhshare%2ftest.html",
css: "hshare hshare-medium hshare-text"
}
}
defailed explanation is shown below:
name | type | meaning |
---|---|---|
name | String | the name of the platform |
template | String(HTML) | the HTML template that the platform's entry use |
params | Object(Pair of strings) | data that will be filled into template |
callback | Function | event handler when the entry is clicked |
in the above example, params consists of key-value pairs. In the HTML template, you can specify a dynamic data use syntax #{key}
, and the corresponding value will be filled into the specified location. For the above example, the eventually HTML is like below:
<a class='hshare hshare-medium hshare-text' href='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https%3a%2f%2fheavenduke.github.io%2fhshare%2ftest.html&title=HShare+Demo' target='_blank' title='分享到QQ空间'>
<img align='top' src='https://heavenduke.github.io/hshare/icons/qzone.png' alt='分享到QQ空间' />
QQ空间
</a>
Notice 1
All params can be overritten. If you specify a customized template, you can specify any params as you like.
But if you use the default template of our supported platforms, remember that the default template is as followed:
<a class='#{css}' href='#{apiLink}?url=#{url}&title=#{title}' target='_blank' title='#{hint}'>
<img align='top' src='#{icon}' alt='#{hint}' />
#{text}
</a>
Correspondingly, the following reserved param key will be used:
name | type | meaning |
---|---|---|
css | String | css class that the entry use(defined in hshare.min.css) |
title | String(urlencoded) | the title/name that you want to show in the social platform |
url | String(urlencoded) | the url that you want to share |
apiLink | String(url) | the url that the social platform use for sharing |
size | String | the entry's size |
text | String | the entry's shown text if renderText's value is true |
hint | String | tooltip that will be shown when the cursor hovers above the entry |
icon | String(url) | icon that the entry use |
Notice 2
since the callback param is a function used as event handler, its format should be like:
function (event) {
// some action....
// you can use $(this) to get the clicked entry.
}