关于百度分享按钮

知更鸟
知更鸟
知更鸟
站长
2511
文章
0
粉丝
网文资讯21,579阅读模式

提供分享收藏到社会化网络服务(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
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  76  访客  63  作者  8