一分钟教你实现web端三方分享

最新推荐文章于 2024-12-24 10:40:33 发布

演员赵诗绎

最新推荐文章于 2024-12-24 10:40:33 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html+js+jquery 文章标签：一分钟 web 实现三方分享

本文链接：https://blog.csdn.net/u013144287/article/details/81331894

html+js+jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种快速实现Web端百度分享的方法，通过选择百度分享的自由选择版及浮窗式布局，只需简单几步即可完成配置。文章详细展示了如何获取并加载百度分享的JS文件，使网站内容能够轻松被用户分享到各大社交平台。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一分钟教你实现web端三方分享

其实我觉得一分钟还真的不过分，因为确实实现web端三方分享还真的只需要一分钟，但是第一次操作肯定是超时的，我这里vue环境，不过都是一样的，不必担心，主要是要看找什么三方，今天的表演者是百度分享，每个人都要腰椎间盘，今天的百度分享还是有点突出了，链接如下http://share.baidu.com/?qq-pf-to=pcqq.c2c，访问即可看到如何使用。

1.获取js，通过选择百度分享会给你自动生成代码，我们这里选择自由选择版，然后第二步里面选择浮窗式。

2、然后一直点击下一步，默认即可，到最后一步点击直接复制代码，复制出来的代码即是百度分享生成的配置js,然后我们放入本地加载即可。

图片里面的js如下：

window._bd_share_config = {
	"common": {
		"bdSnsKey": {},
		"bdText": "",
		"bdMini": "2",
		"bdMiniList": false,
		"bdPic": "",
		"bdStyle": "0",
		"bdSize": "16"
	},
	"slide": {
		"type": "slide",
		"bdImg": "0",
		"bdPos": "right",
		"bdTop": "100"
	},
	"image": {
		"viewList": ["qzone", "tsina", "tqq", "renren", "weixin"],
		"viewText": "分享到：",
		"viewSize": "16"
	},
	"selectShare": {
		"bdContainerClass": null,
		"bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"]
	}
};
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 src="./static/js/plugin/bd-share.js"></script>

3、网页上复制文字，鼠标移动到图片上、或者网页右上角都会有效果，这里分享一下网页右上角的效果

自此恭喜你，分享ok了。