基于bshare分享平台,在一个页面上实现多个不同内容的web分享

时间:2022-09-02 20:41:58
<!--引入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">分享按钮

所以,只能自行测试摸索了。