如果您很熟悉JavaScript、HTML及CSS,想要完全按照自己的设计实现分享按钮,但同时又希望利用bShare已有的分享及统计功能,我们也提供了JavaScript的客户端API来帮助您实现。

目前有以下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分享按钮,同时在底部放上您自己设计的分享图标,这样会有更好的分享和传播效果哦。

现在,就去发挥您的想象力,试试看创建一个完全属于您的按钮式样吧!

注册
安装bShare
分享按钮自定义
站长设置
bShare API
分享平台代码参考
分享优化功能设置
常见问题
京ICP备13006473号-8
© 2009-2017 爱点击互动(北京)广告有限公司。版权所有。
a buzzinate company