在网页添加分享按钮

原创 2013年12月01日 23:29:05
首先这篇文章主要是http://www.neoease.com/add-share-buttons/comment-page-1/#comments来自这个网页,代码也是这位大神的,我将代码放在这就是以后用到了好找...

这个没有使用控件什么的,主要是html和js代码,效果不错。

我去掉了原作者的css代码,找了网上的两个图标,作为区分,只显示fb和twitter的。

HTML

<div id="share">
	Share on:
	<a rel="nofollow" id="facebook-share" title="Facebook"> <img src="f-acebook.ico"></a>
	<a rel="nofollow" id="twitter-share" title="Twitter"><img src="t-witter.ico"></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>

JS代码

JS代码和下面的JQeury代码二者选其一就可可以了。

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/'; // 网站链接
    //var link ='http://v.163.com/movie/2011/2/D/L/M77U1DAGR_M77U1L2DL.html';
	
	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();

JQeury代码

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();



因为像我一样的新手很多,有时候搞不明白代码怎么放,所以把完整的html代码放上来,js代码也在里面,只要将图标和这个html代码放在一个目录,运行就可以看到了。

最终代码是这样的:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>分享按钮测试</title> 


<body>

<div id="share">
	Share on:
	<a rel="nofollow" id="facebook-share" title="Facebook"> <img src="f-acebook.ico"></a>
	<a rel="nofollow" id="twitter-share" title="Twitter"><img src="t-witter.ico"></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>



<script>
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/'; // 网站链接
    //var link ='http://v.163.com/movie/2011/2/D/L/M77U1DAGR_M77U1L2DL.html';
	
	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();
</script>
</body> 
</html> 



效果图如下:


图标是在http://www.iconpng.com/search/series=%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE下载的,放在一个目录就行了。



简单制作网页分享按钮

话说这是一个人际互联的时候,SNS
  • zhangxin09
  • zhangxin09
  • 2014年07月18日 22:26
  • 3858

为 WordPress 添加分享到社交网站按钮(非插件)

相关代码和图片打包下载:shareto修改步骤如下:零 : 把下载好的images下面的图标文件上传到你的空间中。一 :把写好的 shareto.php 上传到你的主题目录,然后把其中的图片的地址改为...
  • sgdingye
  • sgdingye
  • 2016年07月14日 18:02
  • 2306

网页常用社会化分享代码大全(前端必备)

1、新浪微博  新浪微博 2、腾讯微博  腾讯微博 3、开心网  开心网  或者用  开心网 4、豆瓣网  豆瓣 ...
  • u013855736
  • u013855736
  • 2016年09月25日 19:03
  • 1025

网页一键分享按钮HTML代码

在网页中加入以下代码可以实现网页的一键分享: Insert title here window._bd_share_config={ "common":{ "b...
  • u013372487
  • u013372487
  • 2015年09月01日 17:27
  • 17408

微信禁用右上角的分享按钮,WeixinJSBridge API以及隐藏分享的子按钮等菜单项

之前写了一篇关于这个WeixinJSBridge API的文章,文章地址 ,于是有很多网友都在过来咨询这个API的使用,在这里有必要跟大家再说一下:这个API在以前公布的部分接口被官方和谐掉很久 了,...
  • yulei2008_
  • yulei2008_
  • 2016年12月20日 10:14
  • 1268

自定义新浪微博分享按钮

原文地址:http://liuyanzhao.com/2572.html博主这几天申请了一个新浪微博的应用,得到了一个App Key,申请地址点此于是准备给页面加一个新浪微博分享按钮,方便随时分享文章...
  • LIU_YANZHAO
  • LIU_YANZHAO
  • 2017年03月22日 18:01
  • 1028

在微信公众平台前端网页上添加分享按钮

微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢? 今天就给大家讲解下如何在微信公众平台前端网页上添加...
  • muziduoxi
  • muziduoxi
  • 2014年08月11日 15:48
  • 15786

网页增加返回按钮

如题。         最近在做微信移动端开发,微信移动端有个很恶心的东西就是上面左上角有一个返回按钮,一按就返回到微信公众平台点击进去的第一个页面。虽然微信内置浏览器有前进和返回的按钮,但是对于用户...
  • killzero
  • killzero
  • 2013年11月18日 20:57
  • 4513

Web 网站页面的社交分享 (Linkedin, Facebook, Twitter)

公司的web项目中,经常会有社交分享,这里简单说明下,方便后面开发人员理解。分享的原理社交分享(linkedin, facebook, twitter)的本质就是请求其一个公开的页面。通过参数告诉社交...
  • choelea
  • choelea
  • 2017年12月15日 11:35
  • 138

9款经典华丽的CSS3分享按钮

如果你经常活跃在一些社交网站上,那么你肯定会看到过很多形式各异的分享按钮,目前由于HTML5和CSS3的普及,很多分享按钮也都应用了CSS3样式,甚至会有很多带有动画的CSS3分享按钮。本文就向大家介...
  • yanghaonan7758
  • yanghaonan7758
  • 2017年05月02日 09:16
  • 209
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在网页添加分享按钮
举报原因:
原因补充:

(最多只允许输入30个字)