实现单个页面,多个百度分享(动态修改百度分享链接)

在我编写文章列表页代码的时候,想实现每一条文章都有一个分享按钮,此处用到百度分享。百度分享官网:http://share.baidu.com/code/advance
官网给出的完整代码只适合分享单个页面,显然不符合我的需求。仔细阅读文档之后,发现在通用设置项的解析里有这么一项:
这里写图片描述
有了这项设置,我们可以很容易地改变window._bd_share_config 里的设置。
步骤:
1、设置a元素的属性(data-id,data-title)方便获取对应链接的值。
2、声明全局变量。
3、为每个.bdsharebuttonbox a绑定mouseover事件,利用该事件来配置id跟title。
4、配置window._bd_share_config的common属性,利用onBeforeClick来进行动态配置。
5、引入必须要的js。
具体代码:

//这里是一个for循环
{for ....}
<div class="fl ml10 bdsharebuttonbox" data-tag="share_1">
        <a class="bds_qzone" data-cmd="qzone" href="#" data-id="{$t[itemid]}" data-title="{$t[title]}"></a>
        <a class="bds_tsina" data-cmd="tsina" data-id="{$t[itemid]}" data-title="{$t[title]}"></a>
</div>
{/for}
<script>
        //声明全局变量
        var shareId = "",title='';
        //全局变量赋值,便于后边更改配置
        $(function () {
            $(".bdsharebuttonbox a").mouseover(function () {
                shareId = $(this).attr("data-id");
                title = $(this).attr("data-title");
            });
        });
          function SetConf(cmd, config) {            
            if (ShareId) {
                config.bdUrl = "https://www.xxx.com/news/" + shareId + '.html';
                config.bdText = title;
            }
            return config;
        }
    window._bd_share_config = {
        common : {onBeforeClick:SetConf},
        share : [{"bdSize" : 12}],
        slide : [{bdImg : 0,bdPos : "right",bdTop : 100}],//设置了这一项,页面右边会出现一个分享的浮窗,该浮窗只能分享当前设置的bdUrl
        image : [{viewType : 'list',viewPos : 'top',viewColor : 'black',viewSize : '12',viewList : ['qzone','tsina','huaban','tqq','renren']}],
        selectShare : [{
            "bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf']
        }]
    }
    //以下代码是必须
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

为了方便使用,写了一个简单的jquery插件:

(function ($) {
     $.fn.share = function (options) {
        var settings = {
            text: '',
            url:''
        };
        if (options) {
            $.extend(settings, options);
        }
     window._bd_share_config = {
        common : { bdText:settings.text, bdUrl:setting.url },
        share : [{ "bdSize" : 16 }],
    }
}
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
})(jQuery)

使用方法

<script type="text/javascript" src="share.js"></script>
<script type="text/javascript">$(".bdsharebuttonbox").share({title:'{$title}',url:'{$linkurl}'}); </script>

猜你喜欢

转载自blog.csdn.net/qq_29729735/article/details/80511611