效果
看了一眼,百度的喜欢使用的是location完整串做一个hash值来做ID(区别相同文章的方式);
所以变通一个,就可以一个文章可以使用二个及以上的按钮.虽然还不如自己实现简单.
但是对于没有这个能力的同学,这个变通方式还是有点用处的.
如果需要换掉图片,可以使用js处理一下,或是使用css偏移的方式盖住手,换成一个向下的手.
测试文章页面代码,修改本url即可发现计数清0,如增加查询串
<html>
<head>
<style>
body{background-color:orange;}
</style>
</head>
<body>
<span id="likeArea"></span>
<br />
<span id="hateArea"></span>
<script src="http://icon.chinahrd.net/js/bd.like/js.js"></script>
<script>baiduLikeInit({id:'likeArea', color:'blue'}, {id:'hateArea', color:'red'});</script>
</body>
</html>
js.js文件代码
function baiduLikeInit() {
var _ = function(id) {return document.getElementById(id);};
var create = function (id) {
var bdcf = '{ "type":"' +(id.type ? id.type : 'small')+ '", "color":"' +(id.color ? id.color : 'blue')+ '", "uid":"' +(id.uid ? id.uid : '201373')+ '", "likeText":"' +(id.likeText ? id.likeText : '投票')+ '", "likedText":"' +(id.likedText ? id.likedText : '已操作过')+ '" };';//百度配置
var ido = _(id.id);
ido.innerHTML = '<iframe id="' +id.id+ 'Win" allowTransparency="true" FRAMEBORDER="0" src="http://icon.chinahrd.net/js/bd.like/bd.like.htm?b=' +encodeURIComponent(bdcf)+ '&' +id.id+ '=' +encodeURIComponent(location)+ '" border="0" width="' +(id.width ? id.width : 60)+ '" height="25" ></iframe>';
};
var obj = arguments;
if (!obj || !obj.length) return;
for (var i = 0; i < obj.length; i++) {
create(obj[i]);
}
}
bd.like.htm代码
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=gbk">
<style>
body{padding:0;margin:0;overflow:hidden;width:100%;background-color:transparent;}
.bdlikebutton{width:100%!important;background-position: 100px 100px !important;}
.bdlikebutton-small .bdlikebutton-count{padding-left:0px!important;}
</style>
</head>
<body>
<div class="bdlikebutton"></div>
<script id="bdlike_shell"></script>
<script>
var bdShare_config = location.search.match(/\??b\=([^\=&]+)/);
if (bdShare_config) {
bdShare_config = bdShare_config[1];
eval('bdShare_config = ' + decodeURIComponent(bdShare_config));
document.getElementById('bdlike_shell').src = 'http://bdimg.share.baidu.com/static/js/like_shell.js?t='+ Math.ceil(new Date()/3600000);
}
</script>
</body>
</html>
业务部说需要改进一下,改变了一下,把背景去掉,这样可以自己在外围设置背景,见效果