關于分享按鈕

網站建設 css3 html5評論2,962閱讀模式

提供分享收藏到社會化網絡服務(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. }

 

另外,申請注冊百度分享按鈕后,可能很長時間數據分析功能都無法使用,這個需要等,幾天之后自然會正常。

 
  • 本文由 米粒在線 發表于 2012年9月23日12:08:24
  • 轉載請務必保留本文鏈接:http://www.bjmhhq.com/473.html

發表評論

匿名網友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
確定

拖動滑塊以完成驗證