简单的前端网页分享功能怎么做?
2018-11-30 16:20
92 查看
分享是现在的web开发,最常用的功能,对于前端网页,有很多现成的别人已经做好的东西,提供给我们使用。
第一类——常用分享方式
[code]<!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>
第二类——自定义
[code]<!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 4000 .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)+'¬es=');void(0)">Delicious</a> </body> <script> </script> </html>
相关文章推荐
- 基于java实现的简单网页日历功能,有兴趣得可以把它转换到前端实现
- 【最简单】Electron 怎么将网页打包成桌面应用(web前端页面怎么生成exe可执行文件)
- 【最简单】Electron 怎么将网页打包成桌面应用(web前端页面怎么生成exe可执行文件) 标签: 跨平台node.js桌面应用electronelectron-packager 2017-04-
- 分享下载 23 款简单常用的web前端jquery网页特效
- nodeJS实现简单网页爬虫功能的实例(分享)
- 使用JSP制作一个超简单的网页计算器的实例分享
- 最简单的网页分享代码
- 前端简单实现校招笔试'作弊监听'功能
- 如何基于nand flash启动Linux内核(分享一段实用、简单、类似bootloader功能的代码)
- 分享一个iOS下实现基本绘画板功能的简单方法
- 网页分享功能的实现代码
- javascript判断是手机还是电脑访问网页的简单实例分享
- 最简单的 qq、微信分享功能 bshare 引入
- 关于Android实现简单的微信朋友圈分享功能
- java微信网页授权获取用户信息以及JSSDK自定义分享等功能<四>
- html简单的分享功能
- easyui简单易用功能强大的轻量级WEB前端JavaScript框架
- 在Android中使App快速、简单地支持新浪微博、微信、QQ、facebook等十几个主流社交平台的分享功能
- 【分享】怎么设置使MyEclipse的代码提示功能一样能像Microsoft Visual Studio的代码提示功能
- rails网站分享到朋友圈功能是怎么实现的