在Blogger上顯示文章列表及各個文章的facebook讚(like)數統計


自從幫Blogger的文章加了facebook的讚(like)按鈕後,有一天突然突發奇想,我該如何知道每一篇文章被點的讚數到底有多少呢??一篇一篇的看似乎也可行,但好像很費時,因此就在網路上搜尋。而此時剛好找到了由另一位部落客WFU所提供的方法(原文見此)。不過,由WFU提供的方法是適合由他所設計出來的階層式的標籤,因此他的方法沒辦法套用在我這陽春的標籤及文章上,所以,我只能再去尋找其他方式。

經過我上網的搜尋之後,有找到另一個Blogger hack,是利用javascript及json的技術,把文章列表顯示出來,在發現這個Hack之後,就很開心的把他加在我網頁上方的兩個網頁上,分別為「文章列表(依標籤)」及「文章列表(依日期)」,原本裝上去後覺得很滿意,但隔天馬上就覺得不夠好了。於是又把WFU提供的方法仔細研究後,把原本的「文章列表(依日期)」的javascript,做了一些修改,然後把WFU提供顯示讚的按鈕的script加上去,終於達到我想要的樣子,原來我體內的工程師魂還沒有完全消失啊。

原本很懶得寫一篇文章來分享,但原作者WFU建議我還是寫一篇出來,以利之後有相同需求的人可以搜尋到並套用此方式,因此就開了一篇來分享囉。

程式碼如下:

<script>
var postTitle = new Array();
var postUrl = new Array();
var postDate = new Array();
var postYear = new Array();
var postMonth = new Array();
var postYearMonth = new Array();
var postYearMonth2 = new Array();
var postTanggal = new Array();
var postLabels = new Array();
var sortBy = "titleasc";
var tocLoaded = false;
var numChars = 250;
var postFilter = "";
var numberfeed = 0;
var month2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

function loadtoc(a) {
    function b() {
        if ("entry" in a.feed) {
            var d = a.feed.entry.length;
            numberfeed = d;
            ii = 0;
            for (var h = 0; h < d; h++) {
                var m = a.feed.entry[h];
                var e = m.title.$t;
                var l = m.published.$t.substring(0, 10);
                var p = m.published.$t.substring(5, 7);
                var g = m.published.$t.substring(8, 10);
                var n = month2[parseInt(p, 10) - 1] + " " + m.published.$t.substring(0, 4);
                var c = "/" + m.published.$t.substring(0, 4) + "_" + p + "_01_archive.html";
                var j;
                for (var f = 0; f < m.link.length; f++) {
                    if (m.link[f].rel == "alternate") {
                        j = m.link[f].href;
                        break
                    }
                }
                var o = "";
                for (var f = 0; f < m.link.length; f++) {
                    if (m.link[f].rel == "enclosure") {
                        o = m.link[f].href;
                        break
                    }
                }
                postTitle.push(e);
                postDate.push(l);
                postUrl.push(j);
                postYearMonth.push(n);
                postYearMonth2.push(c);
                postTanggal.push(g)
            }
        }
    }
    b();
    displayToc2();
}
function displayToc2() {
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postYearMonth[b];
        document.write("<p/>");
        //下方這段是用來顯示月份用的
        document.write("<p><a href='" + postYearMonth2[b] + "' target=\"_blank\" style=\"color: #555555;text-decoration: none;\">" + temp1 + "</a></p><ul>");
        firsti = a;
        document.write("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"height: 20px; overflow: hidden;\"><tbody>");
        do {
            document.write("<tr><td width = 550px>");
            //下方這段是顯示文章標題及連結用的
            document.write("[" + postTanggal[a] + "] <a href='" + postUrl[a] + "' target=\"_blank\" style=\"color: #666666;text-decoration: none;\">" + postTitle[a] + "</a> </td>");
            //下面這段是顯示facebook讚數統計用的,如果只要顯示文章列表,就把他mark掉吧。
            document.write("<td><iframe allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" src=\"http://www.facebook.com/plugins/like.php?locale=zh_TW\&href="+postUrl[a]+"\&layout=button_count\&colorscheme=light\&action=like\" style=\"height: 20px; overflow: hidden; width: 75px; \" ></iframe></td>")         
            //下面這段是顯示blog反應按鈕用,但因為速度太慢,就mark掉了。
            //想要用的人可以把前面的//拿掉試試,後面的http://www.blogger.com/blog-post-reactions.g?options=的文字請換成自己的。
            //置換方式請至你的網頁,先檢視原始碼。
            //找到http://www.blogger.com/blog-post-reactions.g?options=,把options=後面那一串看不懂的文字複製起來。
            //然後置換下方的文字,起始點從「options=」的後方開始,到「&amp;textColor=」前方結束
            //document.write("<td><iframe allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" src=\"http://www.blogger.com/blog-post-reactions.g?options=%5B%E8%AE%9A,+%E9%82%84%E5%A5%BD,+%E7%88%9B%E9%80%8F%E4%BA%86%5D&amp;textColor=%23666666#"+postUrl[a]+"\" style=\"height: 20px; overflow: hidden;\"></iframe></td>");
            document.write("</tr>");
            a = a + 1
        } while (postYearMonth[a] == temp1);
        b = a;
        document.write("</tbody></table>"); 
        document.write("</ul>");
        if (b > postTitle.length) {
            break
        }
    }
};
</script>
//這裡請把http://kuangtc.blogspot.com換成自己的Blogger網址
//max-results=500 代表最多顯示幾篇文章,若您的文章超過500,您可以用很大的數字取代
<script src="http://kuangtc.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>
使用方式很簡單,就是開一篇新文章,把程式碼貼進去,然後把最下面那一行的網址修改成自己的即可。

另外,在發佈文章時要注意一點,就是一定要用「HTML」的編輯方式,還有頁面設定的選項中,「撰寫模式」請選擇「解釋輸入的HTML」(如下圖),如此即大功告成。



接下來就發佈此文章,檢視看看結果如何囉。裡面有一些東西是依據我blog的樣式調整的,如link的顏色,文章標題要呈現的大小,這些我都有調過,如果大家有興趣的話,可以自行修改,若不懂如何改,也歡迎留言問我,我會盡力解答的喔。還有如果你文章數非常多,那這個網頁執行會執行得很慢,所以請自行斟酌使用囉。

最後,WFU BLOG上有許多不錯用的Blogger Hack,有興趣的話可以去看看喔。

註:效果請參考文章列表(依日期)

12 則留言:

  1. 厲害!
    海港自助餐有 68個讚,下次南來要老哥請你和潔蜜去吃中午。老媽有卷。

    回覆刪除
  2. Re: Nai-peng <8943571818161967021>
    哈哈,謝謝老爸。
    改好這個script後也發現海港是最熱門的文章,這篇文章的點閱率也是第一高的,真希望其他文章也能有像這樣瀏覽率,仍在繼續努力中!!!

    回覆刪除
  3. K大的效率真高啊~昨天才說今天文章就生出來了~~給你一個 +1。

    謝謝替我打廣告啊,不過我發現在你家的留言框下方沒有「以電子郵件訂閱」的選項說,要追蹤回覆比較麻煩一些,也許舊範本沒有這個功能?

    回覆刪除
  4. sorry, 我找到了,原來在 google 帳戶的下一格,不好意思 ^ ^

    回覆刪除
  5. 我很想努力看得懂,但是還是看不懂,唉,證明我實在不是資訊這塊料,資策會的學費是白交了,鳴><

    回覆刪除
  6. Re: WFU <3088683512988092912>
    哈哈,打鐵要趁熱,所以就趁記憶猶新時快點寫囉,只是簡單的寫而已,沒有像您這樣一行一行解釋,希望大家能看得懂!!

    回覆刪除
  7. Re: Chinyi <6108835878314616108>
    沒關係啦,每個人擅長的東西本來就不同,像妳現在照片及文章就寫得很好,我還要多多像妳學習哩~程式那種東西就忘了吧(但我的方法妳可以用在妳blog上試試喔)~~~

    回覆刪除
  8. 你好,K大提供的程式碼真的很棒~
    不過我想請問一個問題...
    就是我有一篇文章發佈過也有被按讚,可是後來我刪除了此篇文章,
    但這個列表裡還是會出現這篇文章的標題耶>"<
    不知道有沒有甚麼方式可以讓它更正呢?謝謝 ^^

    回覆刪除
  9. K大你好!我想說K大提供的列表沒問題了!
    因為它大約過了30分鐘後自己消失了,我想可能是需要時間吧 :)
    謝謝你的資訊唷~真的很好用

    回覆刪除
    回覆
    1. 哈哈,不用客氣呀。
      有正常就好,老實說看到你第一個留言時,我還煩惱了一下呢XD

      刪除
    2. 哈,不好意思讓你煩惱了XD
      幸好他只是LAG而已...
      K大的部落格寫得真的很詳細很用心!

      刪除
    3. 哈哈~~~
      我也去參觀了你的部落格~
      覺得還蠻有趣的!!!!
      我們一起加油呀!!!

      刪除

歡迎大家留言,您的留言是我繼續發文的動力!!
如果要知道留言有回覆的話,可以按下留言框右下方的通知我,如此有新的留言,或我有回覆時,您就能立刻收到訊息。若之後您不想再收到其他留言,只要回到這篇文章的留言框下方,取消勾選即可。

技術提供:Blogger.