提供分享收藏到社会化网络服务(SNS)的按钮工具,多不胜数,此前国内较有名的有JiaThis、bShare等。 作为国内搜索老大的百度也不甘落后,于6月份推出百度分享测试版,如今已正式上线,从外观与功能完全仿自JiaThis,当然也不知JiaThis抄袭自哪家,真是天下文章一大抄....
不过看了百度针对分享按钮的产品介绍,让你不得不舍弃其它同类服务(注意红色部分):
通过百度分享按钮,您的网站的浏览者可以便捷得分享您网站上的内容到人人网、开心网、qq空间、新浪微博等SNS站点进行传播,为您的网站带回更多的流量。
通过百度分享按钮,您网站上的网页将更容易被百度搜索引擎所发现,从而有机会从百度搜索带回更多的流量。
通过百度分享按钮,您可以免费获取详尽地分享统计分析。了解网民将您网站上哪些内容分享到哪些SNS网站,每日的分享次数是多少,帮您更好得的跟踪、分析、激励用户的分享行为,为网站带来更多的流量。
真是百毒,霸道啊!百度分享按钮虽然还不够成熟,特别是百度自己的很多服务分享按钮,目前都还没有直接使用该分享工具,但看了上面的产品介绍,你会放弃诸如:JiaThis、bShare等同类服务吗?
如果你对这项服务感兴趣,下面米粒在线就分享下方法,把分享按钮完美加到模板中。
百度分享与JiaThis、bShare工具一样,专门为Wordpress站点提供了相关插件,但个人感觉完全没必要安装这个插件,直接把自己申请注册后获得的代码加到模板中更为方便灵活。
百度分享工具代码如下:
- <!-- Baidu Button BEGIN -->
- <div id="bdshare"class="bdshare_t bds_tools get-codes-bdshare">
- <span class="bds_more">分享到:</span>
- <a class="bds_qzone"></a>
- <a class="bds_tsina"></a>
- <a class="bds_tqq"></a>
- <a class="bds_renren"></a>
- <a class="shareCount"></a>
- </div>
- <script type="text/javascript" id="bdshare_js" data="type=tools&uid=622077" ></script>
- <script type="text/javascript" id="bdshell_js"></script>
- <script type="text/javascript">
- document.getElementById("bdshell_js").src = "http://share.baidu.com/static/js/shell_v2.js?t=" + newDate().getHours();
- </script>
- <!-- Baidu Button END -->
其中:uid=622077中的数字为自己的专用ID号,其它大至相同
- <span class="bds_more">分享到:</span>
- <a class="bds_qzone"></a>
- <a class="bds_tsina"></a>
- <a class="bds_tqq"></a>
- <a class="bds_renren"></a>
- <a class="shareCount"></a>
上面是默认显示的SNS站点的图标ID,根据自己的需要可以到下面的页面适当增加分享到的网站图标:
http://share.baidu.com/help/webid
例如:增加谷歌Buzz和QQ收藏图标,代码如下:
- <a class="bds_qq"></a>
- <a class="bds_buzz"></a>
相应 WEBID名称前面必须加上“bds_”
代码具体添加位置
图标显示代码:
- <div id="bdshare"class="bdshare_t bds_tools get-codes-bdshare">
- <span class="bds_more">分享到:</span>
- <a class="bds_qzone"></a>
- <a class="bds_tsina"></a>
- <a class="bds_tqq"></a>
- <a class="bds_renren"></a>
- <a class="shareCount"></a>
- </div>
加到single.php模版:
- <div class="back_b">
上面,也就是与正文底部返回按钮并排显示。
加载的javascript代码:
- <script type="text/javascript" id="bdshare_js" data="type=tools&uid=60788" ></script>
- <script type="text/javascript" id="bdshell_js"></script>
- <script type="text/javascript">
- document.getElementById("bdshell_js").src = "http://share.baidu.com/static/js/shell_v2.js?t=" + newDate().getHours();
- </script>
放到主题footer.php模版:
- <?php wp_footer(); ?>
上面。这样有利用提高页面加载速度,当然也可以与图标显示代码放在一起,相信度娘的网站速度不会有太大的影响。
如果你喜欢显示较大的图标,可以将如下代码:
- <div class="context_b">
- <div id="bdshare"class="bdshare_t bds_tools_32 get-codes-bdshare">
- <span class="bds_more"></span>
- <a class="bds_qzone"></a>
- <a class="bds_tsina"></a>
- <a class="bds_tqq"></a>
- <a class="bds_renren"></a>
- <a class="bds_xg"></a>
- <a class="bds_sohu"></a>
- <a class="bds_buzz"></a>
- <a class="bds_msn"></a>
- <a class="bds_qq"></a>
- <a class="bds_tsohu"></a>
- <a class="bds_fbook"></a>
- <a class="bds_deli"></a>
- <a class="bds_baidu"></a>
- <a class="bds_ff"></a>
- <a class="bds_fbook"></a>
- <a class="shareCount"></a>
- </div>
- <i class="lt"></i>
- <i class="rt"></i>
- <i class="lb"></i>
- <i class="rb"></i>
- </div>
放到single.php模板:
- <!-- entrymeta -->
注释上面。
最后,简单美化一下样式,把下面代码加到主题的style.css中
- /*** 分享 **/
- span.bds_more, .bds_tools a,#bdshare ul li a, #bdshare_s ul li a {
- font: 12px 'Microsoft YaHei', 微软雅黑, Arial, Lucida Grande, Tahoma, sans-serif !important;
- }
- #bdshare h6, #bdshare_s h6,#bdshare p, #bdshare_s p { /*** 隐藏弹出层上下标题 **/
- display:none;
- }
- div #bdshare_l_c {/*** 给弹出层加边框及圆角 **/
- border:1px solid #ccc;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- }
另外,申请注册百度分享按钮后,可能很长时间数据分析功能都无法使用,这个需要等,几天之后自然会正常。