最简单的配置平台的方式是仅仅指定平台的名称(需要是HShare所支持的平台):

$("#container").hshare({
    platforms: [{
        name: "kaixin"
    }, {
        name: "pengyou"
    }, {
        name: "qzone"
    }, {
        name: "tieba"
    }, {
        name: "douban"
    }, {
        name: "qq"
    }, {
        name: "renren"
    }, {
        name: "sinaweibo"
    }]
});

对于所支持的平台,HShare内置了对应的配置项,这些配置项将被用于渲染阶段。

注意: 如果你不设置platform字段(platforms设置为undefined),那么HShare将使用下列平台作为默认。

name platform
qzone QQ空间
qq QQ
wechat 微信
sinaweibo 新浪微博
douban 豆瓣

此外,在HShare中,用户可以随意调整对平台的设置。我们将一个分享平台抽象为以下部分:

  • 一段用作分享按钮以便用户点击的HTML模板。
  • 一些在渲染时动态载入到HTML模板中的数值。
  • 一个点击事件的handler,在用户点击分享按钮时用于触发分享行为。

下面是我们内置的一项平台(QQ空间)的相关配置项:

{
    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"
    }
}

更具体的参数说明如下:

name type meaning
name String 平台的名称
template String(HTML) 平台的分享按钮所使用的HTML模板
params Object(Pair of strings) 用于填充至模板中的参数
callback Function 响应点击事件的handler

在上述例子中,params部分包含了一组键值对,而HTML模板中提供了#{key}这样的语法。在渲染时,渲染器会通过这样的语法,去根据key寻找对应的value,并用value替换模板中对应位置的内容。对于上面的例子而言,最终得到的HTML如下:

<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>

注意事项 1

所有上述参数都是可以覆写的。如果你希望自定义一个平台,那么你可以根据需求随意设置任何params字段的键值对。

但是如果你使用了我们所支持平台提供的模板,需要注意的是我们的模板如下:

<a class='#{css}' href='#{apiLink}?url=#{url}&title=#{title}' target='_blank'  title='#{hint}'>
    <img align='top' src='#{icon}' alt='#{hint}' />
    #{text}
</a>

相对应地,在params字段中,我们需要使用下列键值:

name type meaning
css String 所使用的css类名(在hshare.min.css中定义)
title String(urlencoded) 将会在社交平台上使用的分享条目的标题/名称
url String(urlencoded) 希望分享的链接
apiLink String(url) 分享平台所提供的接口地址
size String 分享按钮的尺寸
text String 分享按钮对应的文字
hint String 当鼠标划过分享按钮时所弹出的tooltip中显示的文字
icon String(url) 分享按钮所使用的图标

覆写上述参数时请格外注意。

注意事项 2

callback选项是一个event handker,因此其结构应当如下所示:

function (event) {
    // some action....
    // you can use $(this) to get the clicked entry.
}