[Blogger] 熱門文章 by Google Friend Connect

今天在找Blogger的熱門文章，又不想找那種是靠回應數評比的，結果找來找去，看到Google Friend Connect有出一個"最多人推的文章"的社交小工具，於是就來用用看好了，雖然這個的評比是靠推薦，也不太符合我的需求。


首先，先連到Google Friend Connect，登入後左邊有個[社交小工具]，點進去後選[推薦小工具]就可以開始設定了。


在步驟一[設定推薦清單]跟步驟二[設定按鈕]設定完後，在步驟三[建立 HTML 程式碼]按下[產生程式碼]，下面就會分別產生出推薦清單與推薦按鈕的程式碼，上面的是清單，下面的是推薦按鈕，兩邊的內容大致都分成三塊

請將以下程式碼加入要顯示綜合小工具的網頁中：

<!-- Include the Google Friend Connect javascript library. -->
[A1]這邊是載入Javascript，清單與按鈕一樣，所以只放一個就好
<!-- Define the div tag where the gadget will be inserted. -->
[A2]這邊是將會顯示熱門文章清單的DIV
<!-- Render the gadget into a div. -->
[A3]這邊會把清單內容與設定寫進上面的DIV

請將以下程式碼加入要顯示按鈕的網頁中：

<!-- Include the Google Friend Connect javascript library. -->
[B1]這邊是載入Javascript，清單與按鈕一樣，所以只放一個就好
<!-- Define the div tag where the gadget will be inserted. -->
[B2]這邊是將會顯示按鈕的DIV
<!-- Render the gadget into a div. -->
[B3]這邊會把按鈕的設定寫進上面的DIV

我是先從推薦按鈕開始加起，把[B1]部份加到Head裡放Javascript的區塊，[B2]加到<div class="post-footer"></div>裡，因為[B3]的Javascript要放在[B2]出現後才有用，所以我把[B3]整塊放到</body>前，這樣設定一看，還蠻醜的 -_-



因為文章最後的LinkWithin旁邊還有空間，於是想說把按鈕加到它旁邊，沒想到還蠻有困難的，因為LinkWithin是事後才用JS寫進來的，我試著用jQuery在網頁ready後去把推薦按鈕的div加在LinkWithin的框框右邊，花了大概兩三個小時的嘗試一直無法成功(加在原本就有的div裡就很簡單)，手邊又沒有什麼好工具去追到底是卡在哪邊，於是只好放棄這個想法，將按鈕顯示在作者與日期的右邊，也就是把div塞在post-footer之前。

</div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Define the div tag where the gadget will be inserted. -->
<div id='div-2317969805736050313' style='width:200px;border:1px solid #cccccc;float: right;'/>
</b:if>
<div class='post-footer'>

看起來長的這個樣子，比之前好看多了

接下來到加上熱門文章列表的部分，這邊就很簡單了，[A1]因為剛剛加過所以可以跳過，在[版面配置]-[網頁元素]裡，找個可以放Javascript的小工具把[A2]跟[A3]丟進去，然後儲存就可以看結果了。

記得先自己推篇文章，熱門文章列表裡才會有東西XD


另外，如果有人研究出怎麼把推薦按鈕塞到LinkWithin旁邊，麻煩指導一下!!