在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，有興趣的話可以去看看喔。

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