建站教学网,让你建站更便捷和轻松!
您当前的位置:首页 > 网页制作 > Javascript/Ajax

给网站添加分享按钮代码

来源:建站教学网  时间:2011-03-01 20:31:10

如果你的网站上有网友喜欢的内容他们想分享怎么办,我们可以添加分享按钮,分享到微博,空间等。本文教您给您的网站添加分享按钮!
网上能找到很多提供分享按钮功能的控件和插件, 但是往往功能过于强大. 大部分插件将分享, 收藏, 订阅等功能全集合与一身, 涵盖海内外几乎所有的相关服务. 其中一些提供了个性化设置, 可以筛选服务, 但是同样耗费了大量资源 (图片和代码); 还有一些插件隐藏了部分分享按钮, 以减少对页面空间的需求, 但同时交互形式却变得复杂. 所以我我们这里推荐一段代码来实现这个功能, 现在分享一下.

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();
这些分享按钮包括了社区转贴和微博推广两种类型, 因为某些服务的用户群体跟我们的分享文章不匹配, 没有加进来, 要加入其他分享按钮的朋友请自行研究和添加.
 

责任编辑:风中的自由

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2009, JZREAD.COM, Inc. All Rights Reserved
皖ICP备09015033号