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

 2018-10-12 15:01:22  28 人阅读  0 条评论
 最佳答案:

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

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

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

如上图所示,熊掌号粉丝关注改造可以有两种途径,一个是 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张

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张

如果校验成功的话,将会得到校验成功的反馈,具体如下所示:

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

如果校验失败的话,将会得到校验失败的反馈,点击最右侧的“向下的箭头”图标按钮即可看到失败的原因,然后我们只需要根据错误提示进行修改即可。具体如下所示:

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

问题标签: ,  更多问题标签>>
编辑作者:懿古今(QQ号:2226524923,QQ群:415623933
免责声明:本文内容来源于互联网,仅供参考学习之用,如有侵权请联系本站修改删除!
问题分类:WordPress问题 ,  建站技术问题 ,  操作系统问题 ,  办公软件问题 ,  搜索热点问题 ,  综合其他问题

相关问题 热门问题近期问题随机标签

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情