关于百度分享按钮

2011年10月4日02:00:59 76 19,438

提供分享收藏到社会化网络服务(SNS)的按钮工具,多不胜数,此前国内较有名的有JiaThis、bShare等。 作为国内搜索老大的百度也不甘落后,于6月份推出百度分享测试版,如今已正式上线,从外观与功能完全仿自JiaThis,当然也不知JiaThis抄袭自哪家,真是天下文章一大抄....

不过看了百度针对分享按钮的产品介绍,让你不得不舍弃其它同类服务(注意红色部分):

通过百度分享按钮,您的网站的浏览者可以便捷得分享您网站上的内容到人人网、开心网、qq空间、新浪微博等SNS站点进行传播,为您的网站带回更多的流量。

通过百度分享按钮,您网站上的网页将更容易被百度搜索引擎所发现,从而有机会从百度搜索带回更多的流量。

通过百度分享按钮,您可以免费获取详尽地分享统计分析。了解网民将您网站上哪些内容分享到哪些SNS网站,每日的分享次数是多少,帮您更好得的跟踪、分析、激励用户的分享行为,为网站带来更多的流量。

真是百毒,霸道啊!百度分享按钮虽然还不够成熟,特别是百度自己的很多服务分享按钮,目前都还没有直接使用该分享工具,但看了上面的产品介绍,你会放弃诸如:JiaThis、bShare等同类服务吗?

如果你对度娘这项服务感兴趣,下面就以HotNewsPro 2.7 Plus主题为例,把分享按钮完美加到模板中。

百度分享与JiaThis、bShare工具一样,专门为Wordpress站点提供了相关插件,但个人感觉完全没必要安装这个插件,直接把自己申请注册后获得的代码加到模板中更为方便灵活。

百度分享工具代码如下:

  1. <!-- Baidu Button BEGIN -->   
  2.     <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">   
  3.         <span class="bds_more">分享到:</span>   
  4.         <a class="bds_qzone"></a>   
  5.         <a class="bds_tsina"></a>   
  6.         <a class="bds_tqq"></a>   
  7.         <a class="bds_renren"></a>   
  8.         <a class="shareCount"></a>   
  9.     </div>   
  10. <script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=6688" ></script>   
  11. <script type="text/javascript" id="bdshell_js"></script>   
  12. <script type="text/javascript">   
  13.     document.getElementById("bdshell_js").src = "http://share.baidu.com/static/js/shell_v2.js?t=" + new Date().getHours();   
  14. </script>   
  15. <!-- Baidu Button END -->  

其中:uid=6688中的数字为自己的专用ID号,其它大至相同

  1. <span class="bds_more">分享到:</span>   
  2. <a class="bds_qzone"></a>   
  3. <a class="bds_tsina"></a>   
  4. <a class="bds_tqq"></a>   
  5. <a class="bds_renren"></a>   
  6. <a class="shareCount"></a>  

上面是默认显示的SNS站点的图标ID,根据自己的需要可以到下面的页面适当增加分享到的网站图标:

http://share.baidu.com/help/webid

例如:增加谷歌Buzz和QQ收藏图标,代码如下:

  1. <a class="bds_qq"></a>   
  2. <a class="bds_buzz"></a>  

相应 WEBID名称前面必须加上“bds_”

代码具体添加位置

图标显示代码:

  1.    <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">   
  2.        <span class="bds_more">分享到:</span>   
  3.        <a class="bds_qzone"></a>   
  4.        <a class="bds_tsina"></a>   
  5.        <a class="bds_tqq"></a>   
  6.        <a class="bds_renren"></a>   
  7.   <a class="shareCount"></a>   
  8.    </div>  

加到single.php模版:

  1. <div class="back_b">  

上面,也就是与正文底部返回按钮并排显示。

加载的javascript代码:

  1. <script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=60788" ></script>   
  2. <script type="text/javascript" id="bdshell_js"></script>   
  3. <script type="text/javascript">   
  4.     document.getElementById("bdshell_js").src = "http://share.baidu.com/static/js/shell_v2.js?t=" + new Date().getHours();   
  5. </script>  

放到主题footer.php模版:

  1. <?php wp_footer(); ?>  

上面。这样有利用提高页面加载速度,当然也可以与图标显示代码放在一起,相信度娘的网站速度不会有太大的影响。

如果你喜欢显示较大的图标,可以将如下代码:

  1. <div class="context_b">   
  2.     <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare">   
  3.          <span class="bds_more"></span>   
  4.          <a class="bds_qzone"></a>   
  5.          <a class="bds_tsina"></a>   
  6.          <a class="bds_tqq"></a>   
  7.          <a class="bds_renren"></a>   
  8.          <a class="bds_xg"></a>   
  9.          <a class="bds_sohu"></a>   
  10.          <a class="bds_buzz"></a>   
  11.          <a class="bds_msn"></a>   
  12.          <a class="bds_qq"></a>   
  13.          <a class="bds_tsohu"></a>   
  14.          <a class="bds_fbook"></a>   
  15.          <a class="bds_deli"></a>   
  16.          <a class="bds_baidu"></a>   
  17.          <a class="bds_ff"></a>   
  18.          <a class="bds_fbook"></a>   
  19.          <a class="shareCount"></a>   
  20.     </div>   
  21.     <i class="lt"></i>   
  22.     <i class="rt"></i>   
  23.     <i class="lb"></i>   
  24.     <i class="rb"></i>   
  25. </div>  

放到single.php模板:

  1. <!-- entrymeta -->  

注释上面。

最后,简单美化一下样式,把下面代码加到主题的style.css中

  1.  /*** 分享 **/  
  2. span.bds_more, .bds_tools a,#bdshare ul li a, #bdshare_s ul li a  {   
  3.     font: 12px 'Microsoft YaHei', 微软雅黑, Arial, Lucida Grande, Tahoma, sans-serif !important;   
  4.     }   
  5. #bdshare h6, #bdshare_s h6,#bdshare p, #bdshare_s p  { /*** 隐藏弹出层上下标题 **/  
  6.     display:none;   
  7.     }   
  8. div #bdshare_l_c {/*** 给弹出层加边框及圆角 **/  
  9.     border:1px solid #ccc;   
  10.     -moz-border-radius: 5px;   
  11.     -webkit-border-radius: 5px;   
  12.     border-radius: 5px;   
  13.     }  

效果如下图:

关于百度分享按钮

另外,申请注册百度分享按钮后,可能很长时间数据分析功能都无法使用,这个需要等,几天之后自然会正常。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:76   其中:访客  63   博主  8

    • 艾维塔 0

      百度分享和JIATHIS有什么区别吗?

      • 心缘 0

        我看到有人在走路下载了东西,但是为什么我找不到路径?找不到该要的东西?

        • 在路上 4

          我在别的地方扣了段css,但不知道怎么把背景改成透明,求赐教.
          #bdshare
          {width:40px;padding:10px
          10px 0px 10px;position:fixed;_position:absolute;left:50%;margin-left:-542px;top:280px;_top:expression(eval(document.documentElement.scrollTop + 333));background:none repeat scroll 0 0 #F7F3ED;border:1px
          solid #F7F3ED;border-radius:6px 0 0 6px;z-index:9999 !important;*z-index:9999}
          #shareCount,#shareCountText
          {color:#f25c05;width:40px;height:20px;line-height:23px;background:#EDFBFE !important;background:#EDFBFE;border:1px solid #CCC;text-align:center;text-indent:0}
          #shareCount
          {font-weight:700;padding-left:0;border-radius:5px 5px 0 0;border-bottom:none}
          #shareCountText
          {font-weight:200;border-radius:0 0 5px 5px;border-top:none;text-indent:0px}
          #shareToText
          {width:40px;text-align:center;display:inline-block;margin:7px
          0 1px;font-size:12px}
          #shareCount:hover,#shareToText:hover
          {color:#f25c05}

            • 在路上 4

              @在路上 background:transparent 找了这么个东西搞定,但有个分享次数那块搞不定,sharecount这个不知道怎么改定义

            • Twolake 3

              数据分析功能??

              • 成长的企鹅 3

                现在的百度的分享按钮是怎么做的啊?怎么实现始终贴着文章的左侧?

                • joker 0

                  鸟哥,百度分享代码添加到您文中所示的位置后,分享时页面只有文章标题,标题下方却没有摘要和图片,我看你的分享时都能显示,请问怎么做到的?

                    • 知更鸟 Admin

                      @joker 我用的是百度标准的分享代码没作过改动….

                    • jhshn 2

                      鸟哥,现在的分享按钮没有分享到微信的功能,怎么填加?

                        • 知更鸟 Admin

                          @jhshn 嗯,百度的分享代码升级了,这两天有时间我修改一下

                        • jhshn 2

                          鸟哥,我看你的主题已经加上新的分享按钮了有微信,如何实现的?

                            • 知更鸟 Admin

                              @jhshn http://zmingcx.com/hotnews-pro-plus-faq.html
                              第18条

                                • 爱美丽 0

                                  @知更鸟 我安装这鸟哥的办法改了百度分享的新代码,结果百度分享跑网页底部去了http://w01.pw/怎么改回到侧边来呢?

                              • 流年伴夏 0

                                博主,你好,你最下面的 赞和打赏以及分享 功能是怎么实现的啊