百度分享按钮代码下载与添加步骤教程

📍 216.73.216.193
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /tv/10922960.html
📄 百度分享按钮是什么?为什么要用? 百度分享按钮是一组可以嵌入网页的社交分享工具,它把微博、微信、QQ空间、百度贴吧等主流社交平台的分享入口集中到一个小工具栏里。当用户点击某个平台的图标时,网站内容就能自动生成一条带链接的短消息,方便用户一键分享。对网站运营者和独立博客作者来说,这个功能最直接的价值是降低读者分享的门槛,让优质内容更容易被传播出去。企业站、资讯站、技术文档站和个人博客都可以通过它来增加内容的曝光。不过有一点需要提前说明:加入分享按钮本身并不保证流量增长,它只是为读者提供了一个顺手的工具,真正吸引分享的还得看内容本身的价值。 获取百度分享按钮代码并嵌入页面 百度分享官方在2020年前后停止了更新,官网也已无法直接访问,但其已有的JavaScript库仍可正常加载和使用。目前最稳妥的做法是使用社区维护的托管版本或直接从存档仓库获取代码。 具体的添加步骤分为三步: 第一步,在页面中引入核心JS文件。把这个代码放到页面的body闭合标签之前。核心JS文件的引用地址使用协议无关的“//”开头,例如“//bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js”,这样能自动适配当前页面的HTTP或HTTPS协议。 第二步,在想要显示分享按钮的位置插入一个占位div,其中包含几个用于显示不同分享平台图标的class元素。占位div的class名必须与JS配置中的样式名称一致,否则按钮无法渲染。在div内部可以包含“分享”、“QQ空间”、“微博”、“微信”、“腾讯微博”、“QQ好友”等文字或对应的class标签。 第三步,确认页面加载时没有报错。打开浏览器的开发者工具,在Console面板查看是否有JavaScript错误。如果没有,按钮就应该正常显示了。 在复制代码时有两个细节容易出错:一是JS文件的src路径不要写成http开头;二是占位div中的class名必须和JS配置中的样式名称一致。 百度分享按钮高级配置:图标、位置、平台 百度分享的配置参数都写在window._bd_share_config这个对象里,修改几处关键参数就能实现个性化调整。 调整分享平台。上面代码中的bds_qzone、bds_tsina等class对应了不同的社交平台,你只需在div中保留需要的平台链接,删除不需要的即可。支持的平台包括:bds_qzone(QQ空间)、bds_tsina(新浪微博)、bds_weixin(微信)、bds_tqq(腾讯微博)、bds_sqq(QQ好友)、bds_douban(豆瓣)、bds_renren(人人网)等。建议只保留目标读者最常用的2到4个平台,避免按钮栏显得杂乱。 改变图标大小和样式。在window._bd_share_config中,bdSize控制图标尺寸,可选16、24、32,数值越大图标越大。bdStyle控制图标风格,0是默认圆角方形,1是纯图标无文字。如果你希望按钮只显示图标不显示文字,把bdStyle设为1,并在占位div中去掉“分享”这个词。 控制按钮显示位置。按钮默认出现在你放置占位div的位置。如果想固定在页面侧边或底部,需要额外用CSS定位。例如要实现右侧悬浮,可以给占位div加一个父容器,设置position: fixed; right: 20px; top: 50%;,再调整z-index避免被其他元素遮挡。固定定位在移动端体验不佳,建议只在桌面端使用。 常见问题与解决方案 问题一:百度分享按钮不显示怎么办? 先检查浏览器的控制台。常见原因有三个:一是页面启用了HTTPS但JS代码中的资源地址仍然使用http,此时修改为“//”协议开头即可;二是占位div的class名与JS配置不匹配,可以对照官方示例重新复制一次;三是与其他JavaScript库冲突,可以把百度分享的JS放在页面最底部加载,并确认没有重复引入jQuery等库导致的命名空间冲突。 问题二:百度分享按钮不支持https怎么办? 这个问题其实有简单的解决办法。把JS文件的src从http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js改为//bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js,浏览器会自动使用当前页面的协议。如果强制要求完整https,也可以直接写成https://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js,官方服务器仍然支持https请求。如果这样做之后按钮仍然不显示,可以检查页面是否启用了混合内容拦截策略。 问题三:百度分享已经停止更新,现在还能用吗?有没有更好的替代方案? 已有的代码仍然可以正常工作,官方并没有关闭服务器。但长期来看,建议评估替代方案。可以考虑以下几种:一是加网(jiathis),功能类似,持续更新;二是Share.js,轻量级开源项目,无外部依赖,支持自定义图标和主题;三是自己写一套简单的分享链接,利用各大平台的官方分享URL接口。对于流量不大、对样式要求不高的站点,继续使用百度分享仍然是成本最低的方案,但需要定期检查是否出现兼容问题。 总结 百度分享按钮是给网站快速增加社交分享能力的一个轻量方案,即使官方已经停更,现有代码仍能满足大多数情况下的使用需求。添加时重点注意HTTPS适配、占位class与JS配置一致、以及平台数量控制在合理范围。如果你当前的网站还没有任何分享功能,可以先按照本文的步骤部署一套基础版本,等后期发现兼容性问题或对分享功能有更高要求时,再平滑迁移到其他活跃维护的插件。同时,结合网站SEO优化技巧和网页添加社交分享功能的经验,能让你的内容传播和搜索表现都更进一步。最终决定是否长期使用百度分享,建议根据网站的技术环境和实际效果来做判断。
图1 图2

nginx