菜鸟科技网

百度分享代码如何添加?

百度分享代码的添加主要分为获取代码、配置选项、安装部署三个步骤,具体操作需根据网站类型(如WordPress、HTML静态站等)调整,以下以通用HTML网站和WordPress为例,详细说明操作流程。

百度分享代码如何添加?-图1
(图片来源网络,侵删)

登录百度分享官方平台(https://share.baidu.com/),进入“代码获取”页面,选择分享样式(如按钮式、浮动式、图标式等),配置分享渠道(如微信、微博、QQ空间等),并设置是否显示分享数、是否自定义图标等选项,配置完成后,点击“获取代码”,系统会生成包含JavaScript和HTML的代码片段。

对于HTML静态网站,获取代码后需将两部分分别添加到对应位置,JavaScript部分通常放在<head>标签内或页面底部,确保在</body>前加载,避免影响页面渲染。

<script type="text/javascript" id="bdshare_js" data="type=slide&mini=1&img=6&pos=right" ></script>  
<script type="text/javascript" id="bdshare_js_c" src="https://bdimg.share.baidu.com/static/js/share_core.js?t=20240101" type="text/javascript"></script>  

HTML部分则需添加到希望显示分享按钮的位置,如文章内容末尾或侧边栏。

<div class="bdsharebuttonbox">  
    <a href="#" class="bds_more" data-cmd="more"></a>  
    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>  
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>  
</div>  

若使用WordPress,可通过插件简化操作,推荐使用“百度分享官方插件”或“WP Social Sharing”等插件,安装并激活插件后,在设置页面选择分享样式和渠道,插件会自动将代码添加到主题的适当位置(如文章页、首页),若需手动修改,可在主题的single.php(文章页)或header.php(头部)文件中插入上述代码,注意备份原文件以防出错。

百度分享代码如何添加?-图2
(图片来源网络,侵删)

对于动态网站(如PHP、Java),可将JavaScript代码放在公共头部或底部文件,HTML部分通过后端变量动态插入,例如在文章详情页循环中添加分享按钮代码。

以下是不同分享样式的配置对比:

样式类型 特点 适用场景
按钮式 简洁直观,支持自定义图标 文章列表、侧边栏
浮动式 固定在页面一侧,始终可见 长文章、资讯类网站
图标式 小图标组合,节省空间 移动端、简洁风格网站

安装完成后,需测试分享功能是否正常,点击各分享渠道,确认能否正确跳转并生成分享链接,若分享数不显示,检查是否已登录百度分享账号且开启“显示分享数”选项,或等待10-15分钟(数据同步延迟)。

相关问答FAQs

百度分享代码如何添加?-图3
(图片来源网络,侵删)
  1. 问:百度分享代码添加后,部分渠道无法分享怎么办?
    答:首先检查代码中是否包含对应渠道的配置(如data-cmd="weixin"),确保在百度分享后台已启用该渠道,清除浏览器缓存或尝试无痕模式访问,排除缓存干扰,若仍无效,可能是网络问题导致JS文件加载失败,可检查控制台是否有报错,或更换CDN节点。

  2. 问:如何自定义百度分享的按钮样式?
    答:可通过CSS修改按钮样式,在主题的样式表中添加以下代码:

    .bdsharebuttonbox a {  
        background-color: #007bff;  
        color: white;  
        padding: 5px 10px;  
        border-radius: 3px;  
    }  

    百度分享还支持使用自定义图标,需将图标上传至服务器,并在代码中通过data-bd-imgsid参数指定图标路径,或使用CSS的background-image属性替换默认图标。

分享:
扫描分享到社交APP
上一篇
下一篇