关于分享按钮

  • A+
所属分类:css3 html5 网站建设

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

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

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

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

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

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

如果你对这项服务感兴趣,下面米粒在线分享下方法,把分享按钮完美加到模板中。

百度分享与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=622077" ></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=" + newDate().getHours();
  14. </script>
  15. <!-- Baidu Button END -->

其中:uid=622077中的数字为自己的专用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=" + newDate().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. }

 

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

发表评论

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