基于bshare分享平台,在一个页面上实现多个不同内容的web分享
<!--引入bshare SDK-->
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#uuid=&style=-1"></script>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC2.js"></script>
<div class="myCouponFoot bgcw global_do_share">
{foreach from=$user_prize_goods key=k item=v}
<div class="c web_share" style="display:none;" id="web_share_{$k}">
<div class="bshare-custom ">
<a title="分享到腾讯朋友" class="bshare-qqxiaoyou"></a>
<a title="分享到QQ空间" class="bshare-qzone"></a>
<a title="分享到微信" class="bshare-weixin"></a>
<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
<a title="分享到手机Qzone" class="bshare-mqzone"></a>
<a title="分享到人人网" class="bshare-renren"></a>
<a title="分享到开心网" class="bshare-kaixin001"></a>
<a title="分享到豆瓣" class="bshare-douban"></a>
<!-- 在这里添加更多平台 -->
</div>
<div class="modal-backdrop in"></div>
<script>
bShare.addEntry({
title:'{$v.goods_info.goods_name}',
url:url,
pic:'{$v.goods_info.goods_thumb}'
});
</script>
</div>
{/foreach}
</div>
官方文档说明如下:
如果您想为每个按钮指定不同分享内容,可以使用bShare.addEntry()方法(可参考自定义分享内容及图片)。 addEntry()的调用和bShare按钮是一一对应的,就是说页面中第N个按钮分享的就是第N个addEntry()调用指定的内容。如果按钮没有对应的 addEntry()调用,则分享的就是当前页面的相关内容。
官网帮助文档地址:http://www.bshare.cn/help/customMultipleButtons
但是官网没有明确说明,“addEntry()的调用和bShare按钮是一一对应的”这句话中,“bShare按钮”这个是怎么定义的。
经过测试,上文代码中,
<div class="bshare-custom ">
<a title="分享到腾讯朋友" class="bshare-qqxiaoyou"></a>
<a title="分享到QQ空间" class="bshare-qzone"></a>
<a title="分享到微信" class="bshare-weixin"></a>
<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
<a title="分享到手机Qzone" class="bshare-mqzone"></a>
<a title="分享到人人网" class="bshare-renren"></a>
<a title="分享到开心网" class="bshare-kaixin001"></a>
<a title="分享到豆瓣" class="bshare-douban"></a>
<!-- 在这里添加更多平台 -->
</div>
这段div识别为一个“bShare按钮”。
而官网是这样案例的:
要在一个页面放置多个按钮其实很简单,您可以在每个想要分享按钮出现的地方放置一个占位元素。如下:
<a class="bshareDiv" href="http://www.bshare.cn/share">分享按钮
所以,只能自行测试摸索了。