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

知更鸟
知更鸟
知更鸟
1618
文章
6927
评论
更多
2013年9月22日15:45:40 48 6.1K
添加一个位置固定的百度分享按钮

百度分享

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

第一步，在你所用主题目录新建一个名称为：share.php的模板文件，将下面的代码复制到进去并保存：

  1. <div id="share">  
  2.     <div class="share">  
  3.         <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">  
  4.             <a class="bds_tsina"></a>  
  5.             <a class="bds_tqq"></a>  
  6.             <a class="bds_qzone"></a>  
  7.             <a class="bds_renren"></a>
  8.             <span class="bds_more"></span>  
  9.         </div>  
  10.         <div style="clear:both;"></div>  
  11.     </div>  
  12. </div>  
  13. <script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=0" ></script>  
  14. <script type="text/javascript" id="bdshell_js"></script>  
  15. <script type="text/javascript">  
  16. document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)  
  17. </script>  
  18. <style type="text/css">  
  19. #share {  
  20.     display:block;  
  21.     width:35px;  
  22.     margin-left:-546px;/* 修改左右位置 */  
  23.     position:fixed;  
  24.     left:50%;  
  25.     top:420px;/* 修改上下位置 */  
  26.     _margin-left:-546px;/* IE6修改左右位置 */  
  27.     _position:absolute;  
  28.     _margin-top:420px;/* IE6修改上下位置 */  
  29.     _top:expression(eval(document.documentElement.scrollTop));  
  30.     }  
  31. .share {  
  32.     background:#fff;  
  33.     width:24px;  
  34.     border: 1px solid #ccc;  
  35.     border-radius:5px 0 0 5px;  
  36.     }  
  37. #bdshare_l {  
  38.     border-radius: 5px;  
  39.     }  
  40. div #bdshare_l_c {  
  41.     border: 1px solid #ccc;  
  42.     border-radius: 5px;  
  43.     }  
  44. #bdshare h6, #bdshare_s h6,#bdshare p, #bdshare_s p {  
  45.     display:none;  
  46.     }  
  47. </style>  

第二步，将调用代码：

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

添加到主题页脚模板footer.php这句上面：

  1. <?php wp_footer(); ?>  

以上代码在WP默认主题Twenty Twelve中测试通过，针对不同主题的页面宽度，可适当调整固定按钮的位置，代码中有注释。

添加更多的百度分享网站按钮点此查看方法

 

历史上的今天
9月
22
weinxin
版权声明
本站原创文章转载请注明文章出处
获取本主题
售前咨询加Q：598845006
多功能主题 Begin
解决WordPress 5.6 WordPress

解决WordPress 5.6 “从URL插入”图片BUG

在WordPress 5.6 唯一让人欣慰的是中文版同期发布，因为开发者一直在努力优化增强区块编辑器，而我自己一直在使用经典编辑器，没感觉有什么变化。 不过很快发现一个BUG，就是使用经典编辑器添加图...
12月16日 561 6
WordPress 判断浏览器 WordPress

WordPress 判断浏览器

目前大部分主题模板对已淘汰的IE支持不好，影响体验，可以利用WordPress提供的变量，判断访问者用浏览器，然后提醒用户升级浏览器。 比如在主题模板适当位置添加： <?php global $...
12月16日 346 1
WordPress 5.6 发布 WordPress

WordPress 5.6 发布

WordPress 5.6 为您带来无数方法，让您的想法自由自在，并把它们付给生活。使用全新的默认主题作为画布，它支持不断增长的块集合作为画笔。用文字画。图片。声音。或丰富的嵌入式媒体。 更大的布局灵...
12月09日 1.3K 15
搭建本地PHP8环境 WordPress

搭建本地PHP8环境

之前一直用phpStudy搭建本地环境，PHP8 于2020年11月26日发布，phpStudy目前并没有集成PHP8，试着添加无果，最后还是用回老牌的建站集成软件包XAMPP（Apache+MySQ...
12月05日 659 3
获取本主题
售前咨询加Q：598845006
多功能主题 Begin
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论：48   其中：访客  38   博主  5   引用   5
    • Louis Han Louis Han 6
      2013年9月22日 19点57分 1F
      回复

      这个位置很不错啊

        • johnny johnny 0
          2013年9月23日 13点27分 B1
          回复

          @ Louis Han ie不是太好使

          • 我爱动感单车网 我爱动感单车网 7
            2016年2月29日 11点25分 B1
            回复

            @ Louis Han :razz: 虽然我所使用的主题已经将百度分享集成到了文章页面里，但是一直来很是希望还能够在首页、分类等页面也出现，按照鸟哥介绍的方法已经添加好来了。效果如何感兴趣的朋友可以去我博客看看，欢迎与雪儿交流WordPress的各种使用心得哦。

          • 度娘 度娘 1
            2013年9月22日 22点36分 2F
            回复

            感谢鸟哥分享，非常适用~~~

            • wk 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模板文件清空里面的内容，保存并替换原文件

                      • 永恒之塔 永恒之塔 2
                        2013年9月24日 15点45分 5F
                        回复

                        感谢鸟哥，这东西还真不错。

                        • 围挡 围挡 4
                          2013年9月26日 00点18分 6F
                          回复

                          这样会不会出现很多代码？

                          • csbaike csbaike 1
                            2013年9月26日 16点05分 7F
                            回复

                            请问Opera浏览器（电脑版）上分享按钮错位到页面底部了是什么原因？

                            • 工业制冷 工业制冷 2
                              2013年9月26日 16点35分 8F
                              回复

                              谢谢分享，不错。

                              • kodango kodango 0
                                2013年9月27日 13点27分 9F
                                回复

                                这个方法很好，用上了，感谢楼主

                                • 天下足球网 天下足球网 0
                                  2013年9月29日 10点36分 10F
                                  回复

                                  这个方法很好，用上了

                                  • 我爱上QQ 我爱上QQ 6
                                    2013年9月29日 20点42分 11F
                                    回复

                                    我安装了最新版的知更鸟主题没有左侧固定分享按钮…

                                    • 枫先生 枫先生 2
                                      2013年9月30日 22点13分 12F
                                      回复

                                      很好用~~谢谢了

                                      • 天下足球网 天下足球网 0
                                        2013年10月3日 10点42分 13F
                                        回复

                                        主题不适合手机浏览器，请安装移动版主题

                                        • 路人呵呵 路人呵呵 0
                                          2013年10月3日 23点38分 14F
                                          回复

                                          楼主 你的文章里高亮代码用的是什么插件或者其它的什么的
                                          灰常感谢

                                          • 老虎 老虎 5
                                            2013年10月6日 15点30分 15F
                                            回复

                                            鸟哥什么时候出一款宽屏版（或自适应屏幕）的hotnewspro？毕竟现在的主题在Mac上看着已经不爽了……
                                            如果没有此计划，那有没有相关的设置可以自己修改？

                                            • iKan88 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 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 yumanutong 6
                                                                2013年10月13日 15点19分 22F
                                                                回复

                                                                哇哦，不错，我之前还想问这个怎么实现的，找到了

                                                                • cynic cynic 0
                                                                  2013年10月13日 16点49分 23F
                                                                  回复

                                                                  鸟哥，那个“将HotNews主题视频模版应用到首页”里面的独立视频模版在哪里啊？我在网站找了半天都没看见

                                                                  • 80后脱口秀 80后脱口秀 0
                                                                    2013年10月21日 20点40分 24F
                                                                    回复

                                                                    不错非常实用

                                                                    • 番茄 番茄 2
                                                                      2013年11月5日 21点05分 25F
                                                                      回复

                                                                      我的博客也搞定这个固定分享按钮了，给力。

                                                                      • 爱娇妻 爱娇妻 1
                                                                        2013年11月13日 11点36分 26F
                                                                        回复

                                                                        我想问一下，文章内的代码是怎么插入的？用的是什么插件呢？@知更鸟

                                                                        • znow 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
                                                                                  回复

                                                                                  @ 幻月无名 https://zmingcx.com/hotnews-pro-plus-faq.html
                                                                                  第18条

                                                                                    • 幻月无名 幻月无名 3
                                                                                      2014年6月4日 09点50分 B2
                                                                                      回复

                                                                                      @ 知更鸟 鸟哥，你这回复速度也太快了，我提交了留言以后就没刷新页面，然后就自己研究了下，看了看你的网站源码，自己弄好了以后本来想告诉你我弄好了，结果你已经回复了，这速度，太佩服了，万分感谢，就是网站备案还没下来，没法展示啊，只能在本地自己欣赏下了。

                                                                                    • 幻月无名 幻月无名 3
                                                                                      2014年6月4日 09点45分 B1
                                                                                      回复

                                                                                      @ 幻月无名 搞定了，鸟哥，谢了，“偷”的你的网站源码和CSS源码，嘻嘻