w3h5

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

百度新推出的熊掌号,对网站的SEO是有一定好处的,官方声称2018-2020年80%搜索流量分发给优质熊掌号。

给网站添加熊掌号粉丝关注按钮 经验总结 第1张

要添加熊掌号关注按钮,首先您要有熊掌号,可以在这个链接申请注册: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张

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>

官方有一个自动生成,您可根据自己的需求进行样式修改。

给网站添加熊掌号粉丝关注按钮 经验总结 第3张

博主添加了吸顶bar和吸底bar 效果如下图:

给网站添加熊掌号粉丝关注按钮 经验总结 第4张

为了页面的协调,可以只在移动设备上添加吸顶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端

赞 (4)
分享到: +More |

评论 沙发

换个身份