添加一个位置固定的百度分享按钮

知更鸟

1876
文章

7014
评论

2013年9月22日 15:45:40WordPress486.2K阅读模式

百度分享

HotNews Pro 2.72集成的固定在页面左侧的百度分享按钮，可方便读者分享自己喜欢的文章，本文教你把这个固定的分享按钮添加到其它主题中。

第一步，在你所用主题目录新建一个名称为：share.php的模板文件，将下面的代码复制到进去并保存：文章源自知更鸟-https://zmingcx.com/fixed-baidu-share-button.html

<div id="share">
<div class="share">
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
<a class="bds_tsina"></a>
<a class="bds_tqq"></a>
<a class="bds_qzone"></a>
<a class="bds_renren"></a>
<span class="bds_more"></span>
</div>
<div style="clear:both;"></div>
</div>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
<style type="text/css">
#share {
display:block;
width:35px;
margin-left:-546px;/* 修改左右位置 */
position:fixed;
left:50%;
top:420px;/* 修改上下位置 */
_margin-left:-546px;/* IE6修改左右位置 */
_position:absolute;
_margin-top:420px;/* IE6修改上下位置 */
_top:expression(eval(document.documentElement.scrollTop));
}
.share {
background:#fff;
width:24px;
border: 1px solid #ccc;
border-radius:5px 0 0 5px;
}
#bdshare_l {
border-radius: 5px;
}
div #bdshare_l_c {
border: 1px solid #ccc;
border-radius: 5px;
}
#bdshare h6, #bdshare_s h6,#bdshare p, #bdshare_s p {
display:none;
}
</style>

第二步，将调用代码：文章源自知更鸟-https://zmingcx.com/fixed-baidu-share-button.html

<?php include('share.php'); ?>

添加到主题页脚模板footer.php这句上面：文章源自知更鸟-https://zmingcx.com/fixed-baidu-share-button.html

<?php wp_footer(); ?>

以上代码在WP默认主题Twenty Twelve中测试通过，针对不同主题的页面宽度，可适当调整固定按钮的位置，代码中有注释。文章源自知更鸟-https://zmingcx.com/fixed-baidu-share-button.html 添加更多的百度分享网站按钮点此查看方法文章源自知更鸟-https://zmingcx.com/fixed-baidu-share-button.html

文章源自知更鸟-https://zmingcx.com/fixed-baidu-share-button.html 文章源自知更鸟-https://zmingcx.com/fixed-baidu-share-button.html

本站原创文章转载请注明文章出处及链接，谢谢合作！

获取本主题

598845006

咨询主题请加Q：598845006

多功能主题 Begin

WordPress

获取本主题

598845006

咨询主题请加Q：598845006

多功能主题 Begin

评论 48 访客 38 作者 5 引用 5

Louis Han 6
2013年9月22日 19点57分山东省济南市 1F
回复
这个位置很不错啊
- johnny 0
  2013年9月23日 13点27分上海市 B1
  回复
  @ Louis Han ie不是太好使
- 我爱动感单车网 7
  2016年2月29日 11点25分广西桂林市雁山区 B1
  回复
  @ Louis Han 虽然我所使用的主题已经将百度分享集成到了文章页面里，但是一直来很是希望还能够在首页、分类等页面也出现，按照鸟哥介绍的方法已经添加好来了。效果如何感兴趣的朋友可以去我博客看看，欢迎与雪儿交流WordPress的各种使用心得哦。
度娘 1
2013年9月22日 22点36分湖南省怀化市 2F
回复
感谢鸟哥分享，非常适用~~~
wk 1
2013年9月23日 16点55分浙江省温州市乐清市 3F
回复
你好博主，能否在你博客上投放淘宝广告呢，希望得到你的回复。
香水控 3
2013年9月23日 23点47分河南省南阳市 4F
回复
鸟哥，在手机上看两个地方错位，1：我又加了一个关注按钮，有些错位了，2：左侧分享按钮跑左右角了。
能加个判断，如果在手机上显示，分享代码在最下面居中显示吗？
- 知更鸟
  2013年9月24日 11点01分中国 B1
  回复
  @ 香水控主题不适合手机浏览器，请安装移动版主题
  - 香水控 3
    2013年9月24日 11点58分河南省南阳市 B2
    回复
    @ 知更鸟好的，
    鸟哥，还有个问题，
    由于我们这备案不允许有留言功能，在哪个地方可以把留言板隐藏掉？
    - 知更鸟
      2013年9月24日 12点15分中国 B3
      回复
      @ 香水控打开主题comments.php模板文件清空里面的内容，保存并替换原文件
      - 香水控 3
        2013年9月28日 10点59分河南省南阳市 B4
        回复
        @ 知更鸟已解决，谢谢鸟哥
永恒之塔 2
2013年9月24日 15点45分四川省成都市 5F
回复
感谢鸟哥，这东西还真不错。
围挡 4
2013年9月26日 00点18分广东省广州市天河区 6F
回复
这样会不会出现很多代码？
csbaike 1
2013年9月26日 16点05分河南省漯河市 7F
回复
请问Opera浏览器（电脑版）上分享按钮错位到页面底部了是什么原因？
工业制冷 2
2013年9月26日 16点35分北京市 8F
回复
谢谢分享，不错。
kodango 0
2013年9月27日 13点27分浙江省杭州市 9F
回复
这个方法很好，用上了，感谢楼主
天下足球网 0
2013年9月29日 10点36分上海市 10F
回复
这个方法很好，用上了
我爱上QQ 6
2013年9月29日 20点42分江西省吉安市 11F
回复
我安装了最新版的知更鸟主题没有左侧固定分享按钮…
- 知更鸟
  2013年9月29日 22点30分中国 B1
  回复
  @ 我爱上QQ 主题已多次更新
  - Era 2
    2013年12月6日 22点24分河南省洛阳市 B2
    回复
    @ 知更鸟百度分享连css都搞定了，很给力。
枫先生 2
2013年9月30日 22点13分浙江省台州市 12F
回复
很好用~~谢谢了
天下足球网 0
2013年10月3日 10点42分上海市鹏博士BGP 13F
回复
主题不适合手机浏览器，请安装移动版主题
路人呵呵 0
2013年10月3日 23点38分北京市 14F
回复
楼主你的文章里高亮代码用的是什么插件或者其它的什么的
灰常感谢
老虎 6
2013年10月6日 15点30分江苏省无锡市 15F
回复
鸟哥什么时候出一款宽屏版（或自适应屏幕）的hotnewspro？毕竟现在的主题在Mac上看着已经不爽了……
如果没有此计划，那有没有相关的设置可以自己修改？
iKan88 1
2013年10月6日 20点04分陕西省汉中市 16F
回复
鸟哥，您好。请问，是否可以用相同方法添加“百度喜欢”按钮？新人小白，不懂勿笑。
永恒之塔基地 2
2013年10月6日 21点06分四川省成都市 17F
回复
添加了，可是为什么要提示代码错误呢？
逆袭者 1
2013年10月6日 23点30分甘肃省定西市 18F
回复
测试一下看成不成
枫丹白露业主 1
2013年10月8日 16点19分河北省邯郸市 19F
回复
还是滑动的好，不用考虑固定的样式了
灰狼 0
2013年10月10日 23点16分广东省广州市 20F
回复
代码借用了~~~
xinghaixu 3
2013年10月12日 15点38分广东省深圳市 21F
回复
这个分享按钮在我的笔记本14寸屏幕上显示有问题，只能显示出小小的一个框，里面没有任何东西。
- 知更鸟
  2013年10月13日 10点28分中国 B1
  回复
  @ xinghaixu 分享按钮在我的笔记本13.3寸屏幕上显示一切正常
  - 倚天雪 4
    2014年6月11日 01点03分北京市丰台区 B2
    回复
    @ 知更鸟我大概知道是什么原因了。开启广告过滤之后，里面没有内容，只有一个框。我也是今晚才发现的。
- 倚天雪 4
  2014年6月11日 01点03分北京市丰台区 B1
  回复
  @ xinghaixu 我大概知道是什么原因了。开启广告过滤之后，里面没有内容，只有一个框。我也是今晚才发现的。与你分享。
yumanutong 6
2013年10月13日 15点19分广东省佛山市 22F
回复
哇哦，不错，我之前还想问这个怎么实现的，找到了
cynic 0
2013年10月13日 16点49分四川省成都市 23F
回复
鸟哥，那个“将HotNews主题视频模版应用到首页”里面的独立视频模版在哪里啊？我在网站找了半天都没看见
80后脱口秀 0
2013年10月21日 20点40分安徽省池州市 24F
回复
不错非常实用
番茄 2
2013年11月5日 21点05分湖北省十堰市 25F
回复
我的博客也搞定这个固定分享按钮了，给力。
爱娇妻 1
2013年11月13日 11点36分辽宁省沈阳市 26F
回复
我想问一下，文章内的代码是怎么插入的？用的是什么插件呢？@知更鸟
znow 0
2014年2月18日 22点02分广东省广州市 27F
回复
集成到主题的分享按钮，怎样修改才能在分享时，带上一张当前分享的文章中的图片呢？
智享互联 3
2014年4月10日 08点14分山西省太原市 28F
回复
如何控制贴着某个div的边框滚动啊如你的。
幻月无名 3
2014年6月4日 09点25分山东省烟台市 29F
回复
鸟哥，我看到你的网站分享链接下面有分享到微信朋友圈啊，但您的主题里面没有，能不能共享下代码啊，谢了啊！
- 知更鸟
  2014年6月4日 09点44分中国 B1
  回复
  @ 幻月无名 http://zmingcx.com/hotnews-pro-plus-faq.html
  第18条
  - 幻月无名 3
    2014年6月4日 09点50分山东省烟台市 B2
    回复
    @ 知更鸟鸟哥，你这回复速度也太快了，我提交了留言以后就没刷新页面，然后就自己研究了下，看了看你的网站源码，自己弄好了以后本来想告诉你我弄好了，结果你已经回复了，这速度，太佩服了，万分感谢，就是网站备案还没下来，没法展示啊，只能在本地自己欣赏下了。
- 幻月无名 3
  2014年6月4日 09点45分山东省烟台市 B1
  回复
  @ 幻月无名搞定了，鸟哥，谢了，“偷”的你的网站源码和CSS源码，嘻嘻