如何对站点进行熊掌号粉丝关注代码改造?

现在很多站点的文章页中都看到有百度熊掌号粉丝查看/关注按钮，其实这个就是添加了熊掌号粉丝关注功能。添加的方法也很简单，首先必须拥有熊掌号，然后登录进去才能获得熊掌号粉丝关注代码，之后才能添加到站点文章页中。下面我们来详细说一下熊掌号粉丝关注代码改造：

1、登录搜索资源平台（https://ziyuan.baidu.com/）- 点击顶端的“熊掌号”- 点击左侧的“我的功能”中的“粉丝关注”即可看到熊掌号粉丝关注改造的相关说明，包括改造教程及代码等。具体如下图所示：

如何对站点进行熊掌号粉丝关注代码改造?-第1张-boke112百科(boke112.com)

如上图所示，熊掌号粉丝关注改造可以有两种途径，一个是 H5 页面，另一个是 MIP 页面，所以在改造之前首先要确认你想要添加的文章页是属于 H5 页面还是 MIP 页面？据了解，目前大多数都是 H5 页面，所以我们重点介绍 H5 页面改造的方法。

2、将以下熊掌号 ID 声明 JS 代码直接添加到我们站点 header.php 文件中的</head>标签前（PS：如果没有 header.php 文件就自行查找其他文件寻找</head>标签）。

<script src="https://xiongzhang.baidu.com/sdk/c.js?appid=熊掌号 ID88888"></script>

注意：appid 为熊掌号唯一 ID，请勿做任何修改，否则无法正常展现。记得修改以上代码中的“熊掌号 ID88888”为自己的 ID，或者直接在第一步中的粉丝关注改造页面中复制。

3、将粉丝关注功能代码添加到站点文章页中，目前 H5 页面的粉丝关注有三种款式，分别是吸顶 bar、文章段落间 bar、底部 bar，具体效果图如下：

如何对站点进行熊掌号粉丝关注代码改造?-第2张-boke112百科(boke112.com)

3.1 吸顶 bar，只需要将一下代码添加到页面<body>标签后面即可。

<script>cambrian.render('head')</script>

3.2 文章段落间 bar，只需要将一下代码添加在页面段落之间即可，这个一般需要借助其他方法实现，比如『如何在 WordPress 文章第一段文字后插入广告代码』。

<script>cambrian.render('body')</script>

3.3 底部 bar，只需要将一下代码添加在页面文章结束位置添加代码即可。比如 WordPress 站点，可以添加到文章页的内容代码最后，如 Nana 主题，只需要添加到 single.php 文件的<?php the_content(); ?>后面即可。

<script>cambrian.render('tail')</script>

注意：上述三种 bar 在样式上没有预留左右边距，若页面自身没有设置边距，建议按照如下方法使用。其中 padding-left、padding-right 为边距属性，可按需修改。

<div style="padding-left: 17px; padding-right: 17px;">
<script>cambrian.render('head')</script>
</div>

MIP 页面添加关注功能也比较简单，具体根据官方给出的教程添加即可。不过 MIP 页面添加关注代码后，无法即时看到效果，当搜索结果页出现闪电标识时，才能查看关注组件效果。

4、将改造后的页面进行校验是否正确。我们可以通过点击粉丝关注改造旁边的“在线校验工具”来进行检测，在“请填写需要校验的 URL”下方输入文章 URL 地址；选择是否为 MIP 页，如本文是进行 H5 页面改造，那么就选择“不是”；然后将对应 URL 地址的文章页源代码（PS：一般对着文章页右键 – 查看源代码即可看到）复制粘贴到“请填写对应 URL 的页面代码”下方，然后点击【校验】按钮即可看到结果。

如何对站点进行熊掌号粉丝关注代码改造?-第3张-boke112百科(boke112.com)