Wednesday, October 7, 2009

[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>前,這樣設定一看,還蠻醜的 -_-
Popular_1


因為文章最後的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'>


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

Popular_2


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

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


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

No comments:

Post a Comment