网站添加分享按钮(代码实现)
网上能找到很多提供分享按钮功能的控件或插件, 但是一般功能过于强大. 大部分插件将分享, 收藏, 订阅等功能全集合与一身, 涵盖海内外几乎所有的相关服务. 作为个人博客，小型站点的站长们，几乎用不上大多数的功能~而且因为功能多~对主机的资源消耗也是不可忽视的~今天我们就开尝试下自己写代码来实现分享按钮~
.png?psid=1 "Xushine研究院"){kind=small}
HTML
<div id="share"> Share on: <a rel="nofollow" id="facebook-share" title="Facebook">Facebook</a> <a rel="nofollow" id="twitter-share" title="Twitter">Twitter</a> <a rel="nofollow" id="delicious-share" title="Delicious">Delicious</a> <a rel="nofollow" id="kaixin001-share" title="开心网">开心网</a> <a rel="nofollow" id="renren-share" title="人人网">人人网</a> <a rel="nofollow" id="douban-share" title="豆瓣">豆瓣</a> <a rel="nofollow" id="sina-share" title="新浪微博">新浪微博</a> <a rel="nofollow" id="netease-share" title="网易微博">网易微博</a> <a rel="nofollow" id="tencent-share" title="腾讯微博">腾讯微博</a> </div>
CSS
#share,#share a{line-height:16px}
#share a{display:inline-block;width:16px;height:16px;text-indent:-999em;cursor:pointer;margin-left:5px;background:url(http://photo.tuhigh.com/pics/1044/1024/187252t1287897845550_o.png) no-repeat}
#share a#facebook-share{background-position:0 0}
#share a#twitter-share{background-position:0 -16px}
#share a#delicious-share{background-position:0 -32px}
#share a#kaixin001-share{background-position:0 -48px}
#share a#renren-share{background-position:0 -64px}
#share a#douban-share{background-position:0 -80px}
#share a#sina-share{background-position:0 -96px}
#share a#netease-share{background-position:0 -112px}
#share a#tencent-share{background-position:0 -128px}
JavaScript
function addListener(node, type, listener, obj) {
var param = obj || {};
if(node.addEventListener) {
node.addEventListener(type, function(ev){listener(ev, param);}, false);
return true;
} else if(node.attachEvent) {
node[\'e\' + type + listener] = listener;
node[type + listener] = function() {
node[\'e\' + type + listener](window.event, param);
};
node.attachEvent(\'on\' + type, node[type + listener]);
return true;
}
return false;
}
function getParamsOfShareWindow(width, height) {
return [\'toolbar=0,status=0,resizable=1,width=\' + width + \',height=\' + height + \',left=\',(screen.width-width)/2,\',top=\',(screen.height-height)/2].join(\'\');
}
function bindShareList() {
var link = encodeURIComponent(document.location); // 文章链接
var title = encodeURIComponent(document.title.substring(0,76)); // 文章标题
var source = encodeURIComponent(\'网站名称\'); // 网站名称
var windowName = \'share\'; // 子窗口别称
var site = \'http://www.example.com/\'; // 网站链接
addListener(document.getElementById(\'facebook-share\'), \'click\', function() {
var url = \'http://facebook.com/share.php?u=\' + link + \'&t=\' + title;
var params = getParamsOfShareWindow(626, 436);
window.open(url, windowName, params);
});
addListener(document.getElementById(\'twitter-share\'), \'click\', function() {
var url = \'http://twitter.com/share?url=\' + link + \'&text=\' + title;
var params = getParamsOfShareWindow(500, 375);
window.open(url, windowName, params);
});
addListener(document.getElementById(\'delicious-share\'), \'click\', function() {
var url = \'http://delicious.com/post?url=\' + link + \'&title=\' + title;
var params = getParamsOfShareWindow(550, 550);
window.open(url, windowName, params);
});
addListener(document.getElementById(\'kaixin001-share\'), \'click\', function() {
var url = \'http://www.kaixin001.com/repaste/share.php?rurl=\' + link + \'&rcontent=\' + link + \'&rtitle=\' + title;
var params = getParamsOfShareWindow(540, 342);
window.open(url, windowName, params);
});
addListener(document.getElementById(\'renren-share\'), \'click\', function() {
var url = \'http://share.renren.com/share/buttonshare?link=\' + link + \'&title=\' + title;
var params = getParamsOfShareWindow(626, 436);
window.open(url, windowName, params);
});
addListener(document.getElementById(\'douban-share\'), \'click\', function() {
var url = \'http://www.douban.com/recommend/?url=\' + link + \'&title=\' + title;
var params = getParamsOfShareWindow(450, 350);
window.open(url, windowName, params);
});
addListener(document.getElementById(\'sina-share\'), \'click\', function() {
var url = \'http://v.t.sina.com.cn/share/share.php?url=\' + link + \'&title=\' + title;
var params = getParamsOfShareWindow(607, 523);
window.open(url, windowName, params);
});
addListener(document.getElementById(\'netease-share\'), \'click\', function() {
var url = \'http://t.163.com/article/user/checkLogin.do?link=\' + link + \'source=\' + source + \'&info=\'+ title + \' \' + link;
var params = getParamsOfShareWindow(642, 468);
window.open(url, windowName, params);
});
addListener(document.getElementById(\'tencent-share\'), \'click\', function() {
var url = \'http://v.t.qq.com/share/share.php?title=\' + title + \'&url=\' + link + \'&site=\' + site;
var params = getParamsOfShareWindow(634, 668);
window.open(url, windowName, params);
});
}
bindShareList();
jQuery (JavaScript 和 jQuery 代码任选其一)
function getParamsOfShareWindow(width, height) {
return [\'toolbar=0,status=0,resizable=1,width=\' + width + \',height=\' + height + \',left=\',(screen.width-width)/2,\',top=\',(screen.height-height)/2].join(\'\');
}
function bindShareList() {
var link = encodeURIComponent(document.location); // 文章链接
var title = encodeURIComponent(document.title.substring(0,76)); // 文章标题
var source = encodeURIComponent(\'网站名称\'); // 网站名称
var windowName = \'share\'; // 子窗口别称
var site = \'http://www.example.com/\'; // 网站链接
jQuery(\'#facebook-share\').click(function() {
var url = \'http://facebook.com/share.php?u=\' + link + \'&t=\' + title;
var params = getParamsOfShareWindow(626, 436);
window.open(url, windowName, params);
});
jQuery(\'#twitter-share\').click(function() {
var url = \'http://twitter.com/share?url=\' + link + \'&text=\' + title;
var params = getParamsOfShareWindow(500, 375);
window.open(url, windowName, params);
});
jQuery(\'#delicious-share\').click(function() {
var url = \'http://delicious.com/post?url=\' + link + \'&title=\' + title;
var params = getParamsOfShareWindow(550, 550);
window.open(url, windowName, params);
});
jQuery(\'#kaixin001-share\').click(function() {
var url = \'http://www.kaixin001.com/repaste/share.php?rurl=\' + link + \'&rcontent=\' + link + \'&rtitle=\' + title;
var params = getParamsOfShareWindow(540, 342);
window.open(url, windowName, params);
});
jQuery(\'#renren-share\').click(function() {
var url = \'http://share.renren.com/share/buttonshare?link=\' + link + \'&title=\' + title;
var params = getParamsOfShareWindow(626, 436);
window.open(url, windowName, params);
});
jQuery(\'#douban-share\').click(function() {
var url = \'http://www.douban.com/recommend/?url=\' + link + \'&title=\' + title;
var params = getParamsOfShareWindow(450, 350);
window.open(url, windowName, params);
});
jQuery(\'#sina-share\').click(function() {
var url = \'http://v.t.sina.com.cn/share/share.php?url=\' + link + \'&title=\' + title;
var params = getParamsOfShareWindow(607, 523);
window.open(url, windowName, params);
});
jQuery(\'#netease-share\').click(function() {
var url = \'http://t.163.com/article/user/checkLogin.do?link=\' + link + \'source=\' + source + \'&info=\'+ title + \' \' + link;
var params = getParamsOfShareWindow(642, 468);
window.open(url, windowName, params);
});
jQuery(\'#tencent-share\').click(function() {
var url = \'http://v.t.qq.com/share/share.php?title=\' + title + \'&url=\' + link + \'&site=\' + site;
var params = getParamsOfShareWindow(634, 668);
window.open(url, windowName, params);
});
}
bindShareList();
这样就可以轻松实现自己添加分享按钮了 想怎么用就怎么样了~
评论被关闭。