Small Icon List
If you do not have an UUID yet, you can register and get an uuid to begin tracking data. If you do not need analytics, you may leave the uuid parameter blank.
初级用户
最简单的定义显示在页面上的小图标的方法是使用bShare自定义工具生成嵌入代码。
例如,如果您想要显示人人、新浪微博、豆瓣,可以使用如下的代码:
<a class="bshareDiv" href="http://www.bshare.me/share">分享按钮</a>
<script language="javascript" type="text/javascript" src="http://static.bshare.me/b/buttonLite.js#uuid=<你的UUID>&style=2&textcolor=#000&bgcolor=none&
bp=renren,sinaminiblog,qqxiaoyou&ssc=false&sn=false&text=分享"></script>
这段代码会生成
只需要把您要的平台的代码加入到上面红色的部分,并用英文逗号“,”分隔就可以了!
如果您想要显示分享计数,将代码中的"ssc=false"改为"ssc=true"即可。
范例:
如果您想同时显示平台的名字,将代码中的"sn=false"改为"sn=true"即可。
范例:
高级用户
如果您了解一些基本HTML,您也可以很容易的创建自己的分享到链接。下面是一个范例:
<div class="bshare-custom">
<a title="分享到" href="http://www.bshare.me/share" id="bshare-shareto" class="bshare-more">分享到:</a>
<a title="分享到腾讯朋友" class="bshare-qqxiaoyou">腾讯朋友</a>
<a title="分享到新浪微博" class="bshare-sinaminiblog">新浪微博</a>
<a title="分享到人人网" class="bshare-renren">人人网</a>
<a title="分享到开心网" class="bshare-kaixin001">开心网</a>
<a title="分享到豆瓣" class="bshare-douban">豆瓣</a>
<!-- 在这里添加更多平台 -->
<a title="更多平台" id="bshare-more-icon" class="bshare-more">更多...</a>
</div>
<script language="javascript" type="text/javascript" src="http://static.bshare.me/b/buttonLite.js#uuid=<你的UUID>&style=-1"></script>
<script language="javascript" type="text/javascript" src="http://static.bshare.me/b/bshareC1.js"></script>
您可以任意的添加更多的平台,只需要新增一行代码并修改其title属性和显示文本,并用平台代码替换红色部分。
例如, 如果您想要添加一个分享到QQ空间 的小图标,只需要加入如下一行代码:
<a title="分享到QQ空间" class="bshare-qzone">QQ空间</a>
极客
如果您非常了解HTML、CSS和JavaScript,并且想要完全按照自己的想法去设计分享图标的显示方式,没问题!我们提供给您最大的自由发挥的空间,同时您又能很方便的使用bShare的分享功能。
平台分享小图标
用以下的代码创建一个平台分享小图标:
<a title="飞信" onclick="javascript:bShare.share(event,'feixin',0);return false;">
<img src="http://static.bshare.me/frame/images/logos/s3/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.me/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.me/frame/images/logos/s3/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.me/frame/images/logos/s3/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.me/frame/images/logos/s3/more.gif" style="height:16px; width:16px; vertical-align:middle;"/>
<span style="padding-left:2px; vertical-align:middle;">更多平台</span></a>
</div>
<script language="javascript" type="text/javascript" src="http://static.bshare.me/b/buttonLite.js#uuid=<你的UUID>&style=-1"></script>
最后,不要忘了在您的页面上必须要加载上bShare的嵌入JavaScript代码!
<script language="javascript" type="text/javascript" src="http://static.bshare.me/b/buttonLite.js#uuid=<你的UUID>&style=-1"></script>
注意如果您不需要显示bShare的默认按钮,您可以将style设置为-1并且设置您的UUID。当然,您也可以同时显示bShare的预定义式样的按钮。例如,你可以在文章头部放一个带分享计数的bShare分享按钮,同时在底部放上您自己设计的分享图标,这样会有更好的分享和传播效果哦。
现在,就去发挥您的想象力,试试看创建一个完全属于您的按钮式样吧!