目前有以下API可供调用:
bShare.addEntry(entry);
用于设置分享的内容,包括标题、摘要、图片等。用法可以参考自定义分享内容及图片,一个页面放置多个bShare按钮。
bShare.share(event, shortName[, entryNum]);
分享内容到指定的平台。
event | 对应的DOM事件,例如用户的点击事件对象。 |
shortName | 分享目标平台的代码,可以参考分享平台代码页面。 |
entryNum | 指定分享的内容,对应addEntry的调用,即如果是0则对应第1次addEntry的调用,如果是1则对应第2次addEntry的调用,以此类推。只有页面中有多个按钮时需要指定。 |
bShare.more(event[, entryNum]);
打开分享大弹窗,类似点击bShare上的“更多”按钮的效果。参数的意义和share方法中的相同。
bShare.init();
加载并初始化bShare分享服务。默认是会在页面内容加载完成后进行调用,也就是延迟加载。如果您想要提前加载bShare,也可以显式调用它;或者您是在页面加载完成后通过Ajax加载bShare的JS代码,则必须显式调用。
注意调用API的页面中必须包含bShare的JS嵌入代码,如果您不想显示bShare预定义的按钮,您可以将style参数设置为-1。
范例:
如果您非常了解HTML、CSS和JavaScript,并且想要完全按照自己的想法去设计分享图标的显示方式,没问题!我们提供给您最大的自由发挥的空间,同时您又能很方便的使用bShare的分享功能。
平台分享小图标
用以下的代码创建一个平台分享小图标:
<a title="飞信" onclick="javascript:bShare.share(event,'feixin',0);return false;">
<img src="http://static.bshare.cn/frame/images/logos/s4/feixin.gif" style="height:16px; width:16px;"/>
<span style="padding-left: 3px;">飞信</span></a>
您应该会注意到您可以设置自己的图标和文字,您也可以使用CSS定义图标的式样。实际上,您唯一需要保留的就是在用户进行分享行为时调用bShare.share(event,feixin,0)就可以了。当然,您也可以直接使用我们提供的图标和样式。
对我们所有的支持的平台,只要用我们的平台代码替换示例中的红色部分就可以了。
"更多..."按钮
要添加bShare的"更多..."按钮,您可以使用如下代码:
<a title="更多平台" onclick="javascript:bShare.more(event);return false;"/>
<img src="http://static.bshare.cn/frame/images/more.gif" style="height:16px; width:16px;"/>
<span style="padding-left: 3px;">更多平台</span></a>
同样的,您也可以使用您自己的图片并控制它的式样。您只需要在用户点击时调用bShare.more(event)就可以了。
范例
下面是一个会显示飞信、新浪微博和更多按钮的示例:
<div style="font-size:13px;">
<span style="font-weight:bold;vertical-align:middle;cursor:pointer;" onclick="javascript:bShare.more(event);return false;">分享到:</span>
<a title="分享到腾讯朋友" onclick="javascript:bShare.share(event,'qqxiaoyou',0);return false;" style="cursor:pointer;color:#2e3192;">
<img src="http://static.bshare.cn/frame/images/logos/s4/qqxiaoyou.gif" style="height:16px; width:16px; vertical-align:middle;"/>
<span style="padding-left:2px; vertical-align:middle;">腾讯朋友</span></a>
<a title="分享到新浪微博" onclick="javascript:bShare.share(event,'sinaminiblog',0);return false;" style="cursor:pointer;color:#2e3192;">
<img src="http://static.bshare.cn/frame/images/logos/s4/sinaminiblog.gif" style="height:16px; width:16px; vertical-align:middle;"/>
<span style="padding-left:2px; vertical-align:middle;">新浪微博</span></a>
<a title="更多平台" onclick="javascript:bShare.more(event);return false;" style="cursor:pointer;color:#000;"/>
<img src="http://static.bshare.cn/frame/images/logos/s4/more.gif" style="height:16px; width:16px; vertical-align:middle;"/>
<span style="padding-left:2px; vertical-align:middle;">更多平台</span></a>
</div>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#uuid=<你的UUID>&style=-1"></script>
最后,不要忘了在您的页面上必须要加载上bShare的嵌入JavaScript代码!
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#uuid=<你的UUID>&style=-1"></script>
注意如果您不需要显示bShare的默认按钮,您可以将style设置为-1并且设置您的UUID。当然,您也可以同时显示bShare的预定义式样的按钮。例如,你可以在文章头部放一个带分享计数的bShare分享按钮,同时在底部放上您自己设计的分享图标,这样会有更好的分享和传播效果哦。
现在,就去发挥您的想象力,试试看创建一个完全属于您的按钮式样吧!