简单的前端网页分享功能怎么做?

分享是现在的web开发,最常用的功能,对于前端网页,有很多现成的别人已经做好的东西,提供给我们使用。

 

第一类——常用分享方式

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--就下面这一块代码是重点-->
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":["tsina","weixin","mail","linkedin","copy","print"],"bdPic":"","bdStyle":"0","bdSize":"32"},"slide":{"type":"slide","bdImg":"3","bdPos":"left","bdTop":"100"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</body>
</html>

第二类——自定义

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
1、新浪微博
<a href="http://v.t.sina.com.cn/share/share.php?url=http://www.jb51.net&title='分享内容'" target="_blank">新浪微博</a> </p> <p>2、腾讯微博
    <a href="http://v.t.qq.com/share/share.php?url=http://www.jb51.net&title='分享内容'" target="_blank">腾讯微博</a> </p> <p>3、开心网
    <a href="javascript:window.open('http://www.kaixin001.com/repaste/share.php?rtitle='+encodeURIComponent(document.title)+'&rurl='+encodeURIComponent(document.location.href)+'&rcontent=');void(0)">开心网</a>
    或者用
    <a href="http://www.kaixin001.com/repaste/share.php?rurl=http://www.jb51.net&rcontent=http://www.baidu.com&rtitle=kaixin" target="_blank">开心网</a> </p> <p>4、豆瓣网
    <a href="javascript:window.open('http://www.douban.com/recommend/?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">豆瓣</a> </p> <p>或者用
    <a href="http://www.douban.com/recommend/?url=http://www.jb51.net&title=douban" target="_blank">豆瓣</a> </p> <p>5、人人网
    <a href="javascript:window.open('http://share.renren.com/share/buttonshare.do?link='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">人人网</a>
    或者用
    <a href="http://share.renren.com/share/buttonshare.do?link=http://www.jb51.net" target="_blank">人人网</a> </p> <p>6、百度贴吧
    <a href="http://tieba.baidu.com/f/commit/share/openShareApi?url=http://www.jb51.net&title=hello&desc=&pic=" target="_blank">百度贴吧</a> </p> <p>7、QQ好友
    <a href="http://connect.qq.com/widget/shareqq/index.html?title=qqhaoyou&url=http://www.jb51.net&desc=还不错哦&pics=&site=优酷" target="_blank">QQ好友</a> </p> <p>8、QQ空间
    <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://www.jb51.net" target="_blank">QQ空间</a> </p> <p>9、腾讯朋友
    <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url=http://www.jb51.net" target="_blank">腾讯朋友</a> </p> <p>
    10、百度收藏
    <a href="javascript:window.open('http://cang.baidu.com/do/add?it='+encodeURIComponent(document.title.substring(0,76))+'&iu='+encodeURIComponent(location.href)+'&fr=ien#nw=1','scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes'); void 0">百度搜藏</a> </p> <p>11、优酷空间
    <a href="http://i.youku.com/u/share/?url=http://www.jb51.net&content='分享内容'" target="_blank">优酷空间</a> </p> <p>12、搜狐微博
    <a href="http://t.sohu.com/third/post.jsp?content=utf-8&url=http://www.jb51.net&title=souhu" target="_blank">搜狐微博</a> </p> <p>13、MSN
    <a href="http://profile.live.com/badge/?url=http://www.jb51.net&Title=msn" target="_blank">MSN</a> </p> <p>14、猫扑
    <a href="http://tt.mop.com/share/shareV.jsp?title=moptietie&pageUrl=http://www.jb51.net" target="_blank">MOP贴贴</a> </p> <p>15、网易微博
    <a href="http://t.163.com/article/user/checkLogin.do?link=http://www.jb51.net" target="_blank">网易微博</a> </p> <p>16、QQ书签 </p> <p><a href="javascript:window.open('http://shuqian.qq.com/post?from=3&title='+encodeURIComponent(document.title)+'&uri='+encodeURIComponent(document.location.href)+'&jumpback=2&noui=1','favit','width=930,height=470,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes');void(0)">QQ书签</a> </p> <p>17、GOOGLE书签:
    <a href="javascript:window.open('http://www.google.com/bookmarks/mark?op=add&bkmk='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">Google</a> </p> <p>18、Twitter
    <a href="javascript:window.open('http://twitter.com/home?status='+encodeURIComponent(document.location.href)+' '+encodeURIComponent(document.title));void(0)">Twitter</a> </p> <p>19、Facebook
    <a class="fav_facebook" rel="nofollow" href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(document.location.href)+'&t='+encodeURIComponent(document.title));void(0)">Facebook</a> </p> <p>20、Delicious书签: </p> <p><a href="javascript:window.open('http://del.icio.us/post?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title)+'&notes=');void(0)">Delicious</a>

</body>
<script>

</script>
</html>

 

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值