在我编写文章列表页代码的时候,想实现每一条文章都有一个分享按钮,此处用到百度分享。百度分享官网: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>