不要再説用百度分享就可以,是可以,但我有我的想法和初衷,而説這話的人都沒有看到!

筆者建站一年多,剛開始用了 JiaThis 分享按鈕,接觸不久,就知道了百度分享,用百度分享一直到現在,所以對 JiaThis 也沒有太多的感覺。

百度分享,為您帶來更多流量!我信了,就用了。看重百度強大的中文搜索引擎,能給網站帶來流量,但其實與其它分享按鈕沒有太多的區別,別人不分享,再強大的分享按鈕放在那也是個擺設。

自定義分享按鈕有幾個初衷:

  • 1 、分享按鈕插件很強大,幾乎包括所有的社交網站,但加載的鏈接多肯定會影響網速,測試了好多次也確是如此。
  • 2 、不美觀,分享按鈕插件的樣式不能網站本身的設計很好的融合在一起。
  • 3 、能用代碼實現的功能就用代碼,儘量減少插件的使用。

替換分享鏈接中的標題與地址:

自定義分享按鈕,其實是很簡單,首頁我們需要獲取社交網站分享的鏈接地址,而這個不用我們操心,可以找百度分享、 JiaThis 等強大的分享按鈕。在任何有百度分享或 JiaThis 分享按鈕的網站中點擊社交分享按鈕都會彈出一個分享頁面,網址就是我們需要的。

一般分享鏈接獲取的都是當前頁面的標題和地址,所以我們只需把分享鏈接中的標題與地址替換為 WordPress 的函數:
把分享鏈接中帶有&t=、&title=等其它標題樣式後面的標題替換為下面的代碼:

把分享鏈接中帶有?url=、?link=等其它鏈接樣式後面的地址替換為下面的代碼:

  1. <?php the_permalink(); ?>

因為分享鏈接中的標題與地址基本都是一大串字符,所以很難區分哪些才是標題,這裏有個簡單的方法,標題為例:

&title=%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE&,在 「&title=」 後面與下一個 「&」 前面之間字符就是標題了,地址也是這樣。

添加分享鏈接按鈕:

下面的代碼為分享的鏈接地址,一些代碼是網上有就沒有重新編輯,把不需要的刪除,需要的一些分享按鈕筆者重新編輯添加了進來。代碼中的 「社交圖標鏈接地址」 替換為你自己的圖標鏈接地址,添加到 single.php 文件的相關位置:

  1. <!--筆者自定義分享按鈕-->
  2. <div class="share"><h3> 分享到:</h3>
  3. <a target="_blank" rel="nofollow" href="http://twitter.com/home/?status=<?php the_title(''); ?>:<?php the_permalink(); ?>" class="twitter-share" title="Twitter"><img src="社交圖標鏈接地址"></a>
  4. <a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(''); ?>" class="facebook-share" title="Facebook"><img src="社交圖標鏈接地址" /></a>
  5. <a target="_blank" rel="nofollow" href="http://www.douban.com/recommend/?url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>" class="douban-share" title="豆瓣"><img src="社交圖標鏈接地址"></a>
  6. <a target="_blank" rel="nofollow" href="http://www.diandian.com/share?lo=<?php the_permalink(); ?>&ti=<?php the_title(''); ?>&type=link" class="diandian-share" title="點點"><img src="社交圖標鏈接地址"></a>
  7. <a target="_blank" rel="nofollow" href="http://t.sohu.com/third/post.jsp?&url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>&content=UTF-8" class="sohu-share" title="搜狐微博"><img src="社交圖標鏈接地址"></a>
  8. <a target="_blank" rel="nofollow" href="http://t.163.com/article/user/checkLogin.do?link=<?php the_permalink(); ?>&source=yfdxs.com&info=<?php the_title(''); ?> <?php the_permalink(); ?>" class="netease-share" title="網易微博"><img src="社交圖標鏈接地址"></a>
  9. <a target="_blank" rel="nofollow" href="http://v.t.sina.com.cn/share/share.php?&url=<?php%20the_permalink();%20?>&title=<?php%20the_title('');%20?>" class="sina-share" title="新浪微博"><img src="社交圖標鏈接地址"></a>
  10. <a target="_blank" rel="nofollow" href="http://v.t.qq.com/share/share.php?title=<?php%20the_title('');%20?>&url=<?php%20the_permalink();%20?>&site=https://yfdxs.com/" class="tencent-share" title="騰訊微博"><img src="社交圖標鏈接地址"></a>
  11. <a target="_blank" rel="nofollow" href="http://www.kaixin001.com/rest/records.php?url=<?php the_permalink(); ?>&style=11&content=<?php the_title(''); ?>&stime=&sig=" class="kaixin-share" title="開心網"><img src="社交圖標鏈接地址"></a>
  12. <a target="_blank" rel="nofollow" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>&desc=&summary=&site=" class="qq-share" title="QQ 空間"><img src="社交圖標鏈接地址"></a>
  13. <a target="_blank" rel="nofollow" href="http://share.renren.com/share/buttonshare?link=<?php the_permalink(); ?>&title=<?php the_title(''); ?>" class="renren-share" title="人人網"><img src="社交圖標鏈接地址"></a>
  14. <a target="_blank" rel="nofollow" href="http://shuqian.qq.com/post?from=3&title=<?php the_title(''); ?>&uri=<?php the_permalink(); ?>" class="qqsq-share" title="QQ 書籤"><img src="社交圖標鏈接地址"></a>
  15. <a target="_blank" rel="nofollow" href="http://cang.baidu.com/do/add?iu=<?php the_permalink(); ?>&it=<?php the_title(''); ?>&linkid=hjm6y313aqz" class="baidu-share" title="百度雲收藏"><img src="社交圖標鏈接地址"></a>
  16. <a target="_blank" rel="nofollow" href="http://feed.feedsky.com/salonglong" class="rss-share" title="訂閲我們"><img src="社交圖標鏈接地址"></a>
  17. </div>

或者也可以新一個 php 文件 (custom_share.php),方便以後重複利用,把上面的代碼添加到此文件中,再用下面的代碼把 custom_share.php 包括進來:

  1. <!-- 分享 -->
  2. <?php include('custom_share.php'); ?>
  3. <!-- 分享 end-->

添加分享按鈕樣式:

分享按鈕的樣式,拷貝到主題的樣式文件就 OK:

  1. .share{
  2.     background: #f8f8f8;
  3.     overflow: hidden;
  4.     height: 50px;
  5.     border: 1px solid #ddd;
  6.     border-radius: 5px;
  7.     margin: 12px 0;
  8. }
  9. .user_avatar{
  10.     background: #f8f8f8;
  11.     border: 1px solid #ddd;
  12.     border-radius: 4px 4px 0 0;
  13.     margin-bottom: 12px;
  14. }
  15. .user_avatar img{
  16.     margin: 8px 6px 0 8px;
  17. }
  18. .share h3{
  19.     font-size: 14px;
  20.     float: left;
  21.     background: url(images/share.png) #3275a8 no-repeat;
  22.     height: 50px;
  23.     width: 123px;
  24.     text-indent: -999px;
  25. }
  26. .share img{
  27.     padding: 0;
  28.     border: none;
  29.     margin: 8px 1px;
  30. }
  31. .share h3,.share img{
  32.     background-color: #dedede;
  33. }
  34. .share img:hover,.share h3:hover{
  35.     background-color: #1e8dcc;
  36. }