« 上一篇 | 下一篇»

用Google工具實作部落格聯播

16 六月, 2008 01:59 •  (8) 迴響  •  引用(0)  •  4733 hit.  • 分類: LifeType , google   

之前用Google Reader 裡頭的功能做了兩個部落格聯播(台中縣學校部落格聯播精選教師部落格聯播),同時把這兩個聯播放在中縣教網部落格華龍部落格上。

昨天看到Meme的「在部落格顯示其他部落格的最新文章標題」這一篇文章,所以我先把華龍部落格上的部落格聯播改了個樣子。

Meme是使用「AJAX Dynamic Feed Control」+「Yahoo Pipes! 」來做聯播,可是我沒用過Yahoo Pipes!,試了一下,不小心試到用Google Reader也是可以將數個部落格的RSS feed串成一個新的 feed ,就像下面的這樣囉!

載入中......

一、用Google Reader做聯播

大概先說一下如何用Google Reader來做部落格聯播

  • 1.在Google Reader裡將要聯播的部落格設定成同一個資料夾

  • 2.管理訂閱項目 / 標記

  • 3.新增剪輯至您的網站

複製上面的HTML碼,貼到網頁或部落格上就可以了。

[題外話:如何修改上面聯播的配色]

上面的聯播配色,是Google提供的,但若跟你的網誌顏色很不搭,想自己修改顏色,怎麼辦呢?

上面聯播的HTML碼裡有連結到這個檔案「publisher-zh_TW.js」,這檔案裡頭就有配色、字型大小的設定。

把那檔案下載回來放到自己的空間,然後再自己修改就可以囉!當然改好後,上面html碼,就改成用自己的publisher-zh_TW.js了。

譬如我上面選的是粉紅色,搜尋一下「publisher-zh_TW.js」這檔案,會看到有

pink:{q:"#fff",p:"#aaa",C:"#d69",B:"#ddd",A:"#e684ad",m:"#ebc",v:"#fcf0f7",l:"#a88"}

上面代表的意思為

p:背景顏色
n:外框顏色
C:不知道
B:不知道
A:文章標題顏色
l:部落格名稱顏色
v:「閱讀更多資訊...」的背景顏色
k:「閱讀更多資訊...」的文字顏色

甚至你可以插入一段新的顏色代碼(例如取名叫 mime),然後在上面Google Reader提供的 html碼上自己修改成你的顏色代碼名稱

這樣就可以!

上面是題外話,繼續講下去如何用「Google AJAX Feed API」來做聯播。

 

二、用Google Reader串起數個部落格的 RSS feed

前面說到 Meme 是用「Yahoo Pipes! 」來串起數個RSS變成一個新的RSS,在Google Reader 裡也是可以的。

在Google Reader的標記裡,有個「以電子郵件傳送連結」,按下它寄給自己一封信吧!

信件內容裡,就提供了這個要聯播的資料夾的 feed 了,

我們就是要這個網址,等一下就可以把它拿到「Google AJAX Feed API」來使用了。

 

三、用「Google AJAX Dynamic Feed Control」來產生聯播

這「AJAX Dynamic Feed Control」都是英文,不想看也沒關係,可以直接到「 Dynamic Feed Control Wizard」這裡來試試。

而且上面Feeds Expression是輸入部落格名稱或關鍵字,然後它幫我們搜尋到的,不一定是我們要的東西,所以呢,我們可以按下畫面下方的「Generate code 」來產生程式碼,再來自己修改。

下面是我放在華龍部落格上的聯播程式碼,你可以直接複製回去修改。

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="color:#FC0081;font-size:13px;margin:10px;padding:4px;">載入中......</span>
</div>

<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=notsupplied-wizard"
type="text/javascript"></script>

<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>

<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

</style>
{literal}
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: '台中縣學校部落格聯播',
url: 'http://www.google.com/reader/public/atom/user/03592661339992320117/label/tcc_blog_for_hlps'
},
{title: '精選教師部落格聯播',
url: 'http://www.google.com/reader/public/atom/user/03592661339992320117/label/excellent_teacher_blog'
}];
var options = {
numResults : 10,
displayTime : 2000,
fadeOutTime : 500,
pauseOnHover : true,
horizontal : false,
stacked : true,
title : "部落格聯播"
}
{/literal}

new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

 

  • {literal}.....{/literal}

這是我自己加上來的,因為若將這程式碼直接放進LifeType裡,會產生Smarty語法錯誤的問題,所以必須加上這語法,若是放在其他類型網誌或一般html網頁上,就不需要了。

  • var options

上面有一些參數可以設定,可以到「Instructions for adding this to your site」這一頁來仔細看看各個參數的定義。

比較重要的大概就是

numResults : 10, 聯播文章數量
displayTime : 2000, 每篇文章的顯示時間
fadeOutTime : 500, 文章淡出的時間
pauseOnHover : true, 滑鼠移至顯示區塊時是否暫停
stacked : true, 是否堆疊顯示,例如上面我有兩個 feed,是否讓這兩個 feed 都顯示出來。

 

好了,就這樣。

創用 CC 授權條款
 
 
Related Posts Plugin for WordPress, Blogger...

8 Comments on "用Google工具實作部落格聯播"

 

發表迴響
 authimage

Google+ 迴響

*********