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

时间：2023-07-09 15:21:02
<!--引入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">分享按钮




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

















相关文章