给网站添加熊掌号粉丝关注按钮

德顺

发布于 2023-08-24 13:50:15

25700

代码可运行

文章被收录于专栏：前端资源前端资源

运行总次数：0

代码可运行

百度新推出的熊掌号，对网站的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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-04-01)，如有侵权请联系 cloudcommunity@tencent.com 删除

网站