前端网页的分享功能

最新推荐文章于 2024-04-22 15:36:45 发布
最新推荐文章于 2024-04-22 15:36:45 发布
阅读量1.8w 收藏 42
点赞数 6
文章标签： 前端 分享 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mapbar_front/article/details/80455022
版权

分享是现在的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>
mapbar_front
关注
  • 6
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
网页设计作业前端.zip
12-31
学期期末网页设计作业合集分享 内容概览： 这个分享包涵了我在本学期期末完成的网页设计作业，其中包含多个关键部分，以帮助你全面了解和学习网页设计的整个流程。 HTML、CSS、JS、Vue代码：我提供了完整的网页源代码，详细简单有效 项目文件：除了代码，我还分享了整个项目的文件，包括设计稿、图标、图片等资源。这些资源对于理解项目背景和设计思路至关重要。 MD文档与操作手册：为了方便他人理解和使用我的作品，我编写了详细的操作手册和使用说明，同时提供了一份Markdown格式的文档，概述了项目的主要功能和特点。 学习笔记：在项目开发过程中，我记录了大量的学习笔记和心得体会。这些笔记不仅有助于理解项目的开发过程，还能为学习前端技术提供宝贵的参考资料。 适用人群： 这份作业合集适用于所有对网页设计、前端开发感兴趣的人，无论你是学生、初学者还是有一定经验的开发者。无论你是想学习新的技术，还是想了解一个完整的项目开发流程，这份资料都将为你提供极大的帮助。 使用建议： 按部就班地学习：建议从基础的HTML、CSS开始，逐步深入到JavaScript和Vue的学习。通过实践，逐步掌握前端开发的各项技能。 参考项目文件和笔记：项目文件和笔记提供了丰富的背景信息和开发经验。在学习的过程中，不妨参考这些资料，以帮助你更好地理解和学习。 动手实践：网页设计是一门实践性很强的技能。通过实际操作，你可以更好地掌握前端开发的各项技能，并提高自己的实践能力。
单独的html怎么实现微信分享,html静态页面实现微信分享思路
weixin_29054399的博客
06-04 2274
微信分享网页的时候，希望分享出来的链接是标题+描述+缩略图，微信开发代码示例里已提供了方法，但只适用于动态页面。由于dedecms是生成了静态文件，其实我想使用ajax获取jssdk参数也能也能实现微信分享功能了，在这里分享给大家。jssdk的步骤业务流程是这样滴：1：在微信公众号后台配置js 安全域名，即需要引入jssdk的页面域名。 需要在域名根目录下放置微信的检测文件。3：后台开发人员生成签...
如何给我的网页设置分享功能
m0_57236802的博客
10-07 655
如果你更喜欢自定义分享按钮的样式和行为，你也可以自己创建按钮并使用社交媒体平台的 API。const url = "https://你的网站URL";u=${const url = "https://你的网站URL";HTML：< button onclick = " shareToFacebook() " > 分享到 Facebook onclick。
web 实现微信分享功能
J_1999_0524的博客
03-04 379
生成二维码可以用谷歌的二维码api生成（应该也可以用其他的方式，但是找了一会没有找到哈哈哈哈，等有时间找到了再来补充！思路就是点击分享按钮弹出二维码，提醒用户微信扫，扫描后自动就会在微信里打开了，然后用户就可以使用微信内部的分享功能了！查了很多资料，发现微信的网页分享，只能在微信浏览器中打开的网页才能调用这个功能（微信js-sdk）。但是我们是pc端打开的web，网页怎么可以实现分享呢？看到了今日头条的微信分享，就参考着做了一个类似的。通过这样的链接可以生成一个二维码。
简单的前端网页分享功能怎么做？
weixin_43845102的博客
11-30 5105
分享是现在的web开发，最常用的功能，对于前端网页，有很多现成的别人已经做好的东西，提供给我们使用。   第一类——常用分享方式   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&quot
java完整网页分享后端代码，功能已全部实现，直接放进去就可以使用
07-27
java完整网页分享后端代码，功能已全部实现，直接放进去就可以使用，只需要把公众号的APPID和app_secret更换成自己的就可以使用，返回的数据直接就是对象，前端接收后可以直接使用
前端js分享插件运用（空间，QQ，微信，微博，豆瓣）
baozisss的博客
07-19 2987
直接上代码 &lt;div class="share"&gt; &lt;div id="share-2"&gt;&lt;/div&gt; &lt;/div&gt; &lt;script&gt; // 分享可用的配置有： // url : '', // 网址，默认使用 window.location.href
前端如何实现活动分享功能
weixin_47164846的博客
03-12 1927
前言 最近遇到了将我们做的活动链接以二维码的形式分享到微信，qq等第三方平台上，通过扫码的形式打开我们的活动的需求。 难点 1.如何将链接转换成二维码 2.有二维码也不行，太单调了，分享出去的不能只是一个二维码，应该还需要有体现当前活动的元素，所以需要生成一个截图，在截图中需要二维码，活动元素等 如何将链接转换成二维码，使用vue-qr 首先在代码中下载vue-qr这个库 <vue-qr :text="browserUrl" :margin="0"
探索 Share-This：一款强大的网页分享工具库
gitblog_00032的博客
04-12 278
探索 Share-This：一款强大的网页分享工具库 项目地址:https://gitcode.com/MaxArt2501/share-this Share-This 是一个开源项目，由 MaxArt2501 创造，它提供了一套简单的 JavaScript API 和 HTML 元素，让你能够轻松地在你的网站上添加社交分享功能。无论你是 Web 开发者、设计师还是网站管理员，这款工具都能帮助你的...
实现h5网页微信分享、朋友圈分享功能（微信右上角分享）
Tra_velers的博客
09-25 4362
要实现微信分享功能，需要使用微信JS-SDK。以下是实现微信分享的步骤： 1.在微信公众平台中注册开发者账号，并创建一个网页应用。 2.在网页中引入微信JS-SDK的JS文件，并在页面加载完成时调用微信JS-SDK的初始化方法。
html实现简单分享功能
冰凌的博客
02-21 5817
背景 平时自己作网页小游戏的时候，有小伙伴需要把该游戏链接分享给别的朋友，但是每次都从浏览器那复制太麻烦了。 方案 我们在页面中提供一个“分享”按钮，当用户点击它时，我们有js实现把链接存到用户的剪切板中。 实现 例如，我们要分享的链接是百度一下[http://www.baidu.com] 1.新加一个输入控件 var input=document.createElement("input"); input.type="text"; 2.把链接加入输入控件中 input.value="
jquery实现网页查找功能示例分享
10-26
当需要在页面中查找某个关键字时，一是可以通过浏览器的查找功能实现，二是可以通过前端脚本准确查找定位，本文介绍通过jQuery实现的页面内容查找定位的功能，并可扩展显示查找后的相关信息
前端实现分享
01-30
使用纯js实现第三方分享。包括QQ分享，QQ空间分享、朋友圈分享、微博分享、人人网分享等，不支持微信分享。微信不对外其他分享接口，只能在微信内部实现分享
期末大作业 前端开发 网页设计.zip
12-31
学期期末网页设计作业合集分享 内容概览： 这个分享包涵了我在本学期期末完成的网页设计作业，其中包含多个关键部分，以帮助你全面了解和学习网页设计的整个流程。 HTML、CSS、JS、Vue代码：我提供了完整的网页源...
JS中静态页面实现微信分享功能
10-20
小编使用ajax实现静态页面也能实现微信分享功能，今天小编给大家分享实现代码，对js静态页面微信分享功能感兴趣的朋友参考下本
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 947
​​​​​​​。
【前端】数组的常用处理函数
最新发布
lcukyNwa的博客
04-22 111
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 347
官网代码（在取消选中状态的时候不生效）
【1524】java投票管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
qq_251836457的博客
04-18 658
2、开发环境为TOMCAT7.0,Myeclipse8.5开发，数据库为Mysql5.0，使用java语言开发。(5)投票选项管理：对投票选项信息进行添加、删除、修改和查看。(6)投票记录管理：对投票记录信息进行添加、删除、修改和查看。(1)管理员管理：对管理员信息进行添加、删除、修改和查看。(2)用户管理：对用户信息进行添加、删除、修改和查看。(3)公告管理：对公告信息进行添加、删除、修改和查看。(4)投票管理：对投票信息进行添加、删除、修改和查看。4）投票浏览查看、查看投票、投票记录。
写一个关于生日快乐的 前端网页
03-31
对不起，我是一名AI语言模型，无法编写前端网页。但是，我可以提供以下建议作为您编写生日快乐网页的参考： 1. 确定主题：生日快乐的网页可以有多种主题，如彩色气球、蛋糕和烛光、礼物盒等。选择一个主题，并将其贯穿整个网页。 2. 使用动画效果：生日快乐的网页应该充满活力和欢快的气氛。使用动画效果可以增加网页的趣味性和吸引力。 3. 添加音乐：网页上添加生日快乐歌曲可以让收到网页的人感到更加特别和受欢迎。 4. 发送祝福：在网页上添加一段祝福语可以让收到网页的人感到更加温暖和感动。 5. 分享功能：网页上添加分享功能可以让收到网页的人将其分享给更多的人，从而增加祝福的传递和分享的乐趣。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值