百度新推出的熊掌号，对网站的SEO是有一定好处的，官方声称2018-2020年80%搜索流量分发给优质熊掌号。
要添加熊掌号关注按钮，首先您要有熊掌号，可以在这个链接申请注册：https://ziyuan.baidu.com/xzh/home/index
申请成功后，可以根据官方提供的API添加资源提交接口。
博主今天只讲如何添加熊掌号的关注按钮。
首先找到“粉丝关注”
1、添加熊掌号ID声明，复制官方给出的代码，放到网站的 head 标签内。
<head> ...... <script src="//msite.baidu.com/sdk/c.js?appid=158********1795"></script> </head>
2、添加关注功能代码 官方给出三个位置的按钮，将其放在 body 标签内即可。
注意：添加需要展现的bar(只允许添加2个，后期会审核)
吸顶bar （在页面<body> 标签后 添加代码）<script>cambrian.render('head')</script>
<body>
<script>cambrian.render('head')</script>
<nav>
...
</nav>
......
</body>
文章段落间bar （在页面 段落之间 添加代码）<script>cambrian.render('body')</script>
<p>...</p>
<script>cambrian.render('body')</script>
<p>...</p>
...
底部bar （在页面 文章结束位置 添加代码）<script>cambrian.render('tail')</script>
<section>
...
</p>
<script>cambrian.render('tail')</script>
</section>
3、上述三种bar在样式上没有 预留左右边距，若页面自身没有设置边距，建议按照如下方法使用。 其中padding-left、padding-right为边距属性，可按需修改。例如：
<div style="padding-left: 17px; padding-right: 17px;">
<script>cambrian.render('head')</script>
</div>
官方有一个自动生成，您可根据自己的需求进行样式修改。
博主添加了吸顶bar和吸底bar 效果如下图：
为了页面的协调，可以只在移动设备上添加吸顶bar，加一个js代码判断一下移动设备即可，代码如下：
<div style="padding: 0 20px;background: #FFF">
<script>
// 判断手机
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
cambrian.render('head')
}
</script>
</div>
下一篇文章，我会整理一下：如何判断移动设备和PC端
原创文章，作者：kepupublish，如若转载，请注明出处：https://blog.ytso.com/150198.html