Blogger 聯播程式產生器 - 增加「最新文章與最新回應」與「標籤訂閱」程式產生器


|
Jinyao 的 blog 中提供了Blogger聯播程式產生器,所產生的程式碼可以顯示出一個 blog 的最新文章,可以用來訂閱其他 blog 的最新文章,也可以用來作自己的 blog 的最新文章表列,相當不錯唷!

目前還沒有增加聯播的部份,先更新一下最新文章的程式碼。Blogger聯播程式產生器所產生的程式碼如下:

<div id="newpostslittle_hat">
<h2>Loading...</h2>
</div>

<script>
function handlePostslittle_hat(json) {

var temp = '<h2>小帽依然碎碎念</h2><ul id="Feed001_feedItemListDisplay">';
var postshow=10;
for (var i=0, post; post = json.feed.entry[i]; i++) {
if(i>=postshow) break;
var title=post.title.$t;
var link=post.link[0].href;
var authorname=post.author[0].name.$t;
var timestamp=post.published.$t.substr(0,10);
temp += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a>-'+timestamp+'-'+authorname+'</span></li>';
}
temp+="</ul>";
document.getElementById("newpostslittle_hat").innerHTML = temp;
}
</script>

<script src="http://little-hat.blogspot.com/feeds/posts/default?
alt=json-in-script&callback=handlePostslittle_hat" type="text/javascript"></script>


因為用作自己 blog 內的最新文章時不需要註明這是哪一個 blog 的文章,以及發佈者是誰,所以將上面的紅色部份刪掉,變成下面這樣:

<div id="newpostslittle_hat">
<h2>Loading...</h2>
</div>

<script>
function handlePostslittle_hat(json) {

var temp = '<ul id="Feed001_feedItemListDisplay">';
var postshow=10;
for (var i=0, post; post = json.feed.entry[i]; i++) {
if(i>=postshow) break;
var title=post.title.$t;
var link=post.link[0].href;
var authorname=post.author[0].name.$t;
var timestamp=post.published.$t.substr(0,10);
temp += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a></span></li>';
}
temp+="</ul>";
document.getElementById("newpostslittle_hat").innerHTML = temp;
}
</script>

<script src="http://little-hat.blogspot.com/feeds/posts/default?
alt=json-in-script&callback=handlePostslittle_hat" type="text/javascript"></script>


然後在 sidebar 增加一個 html/javascript 的框架,將程式貼上就大公告成了!程式碼更精簡,速度比原來的快唷!感謝 Jinyao 的分享!

如果你願意聯播小弟的 blog,可直接複製下列的程式碼帖到您的blog,會顯示最後更新的兩篇文章。

<div id="newpostslittle_hat">
<h2>Loading...</h2>
</div>

<script>
function handlePostslittle_hat(json) {

var temp = '<h2>小帽依然碎碎念</h2><ul id="Feed001_feedItemListDisplay">';
var postshow=2;
for (var i=0, post; post = json.feed.entry[i]; i++) {
if(i>=postshow) break;
var title=post.title.$t;
var link=post.link[0].href;
var authorname=post.author[0].name.$t;
var timestamp=post.published.$t.substr(0,10);
temp += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a>-'+timestamp+'-'+authorname+'</span></li>';
}
temp+="</ul>";
document.getElementById("newpostslittle_hat").innerHTML = temp;
}
</script>

<script src="http://little-hat.blogspot.com/feeds/posts/default?
alt=json-in-script&callback=handlePostslittle_hat" type="text/javascript"></script>



<更新>

昨晚與今天早上測試過之後,跟原作者反應跟建議一些事項,沒想到下午程式產生器就出來!真是高啊!詳情請看:「最新文章與最新回應」與「標籤訂閱」程式產生器。

原本的聯播程式產生出來,在用作最新文章的時候,會導致原本的最新回應無法正常顯示(原本的最新回應程式碼也是所提供的!),所以要提供了一段顯示最新回應的 script,這樣一來就能正常顯示,速度也能便快唷!

另外一個就是標籤訂閱部份,我跟說,像我會碎碎念,可能人家不是全部都很愛看,想說只要聯播關於單車或是攝影的部份,應該會比較符合特定 blog 導向。所以這一個部份也可以獨立產生出程式碼來訂閱,真是太棒啦!




9 回應:

Abin 提到...

回答你在這邊的問題:
如果部分內文用文章收合的技巧動態藏起來 (Javascript + style display: none)
用 IE 為核心的瀏覽器都有背景圖片 Load 不出來的狀況
這是 IE 對標準 CSS 語法支援不夠的一個狀況,用 FireFox 就會正常
所以如果要避免,就是這類文章不要被動態收合起來,或是"繼續閱讀"改連到該文章的靜態連結囉!
(我這篇文章有提到)

小帽 提到...

感謝 Abin 的回覆,不過我用靜態連結瀏覽文章的時候也是看不到該區塊,我猜想是 IE 在辨識兩個 script 之間有所衝突導致。

這邊也再度建議使用 Firefox 瀏覽小弟的 blog。

Abin 提到...

我發現問題了(習慣去解 Bug..)
1. 你用名稱 hightlight 來當標籤名稱,這是合乎 CSS 規定沒錯,但是 IE 還真的不能用(我之前用別的也不行),所以建議你把標籤 hightlight 名稱改成 code,剛測試過就可以了。
2. 小 bug,標籤結尾你打錯字喔,你打成 < / highlihgt > 啦,不過這並不是 IE 顯示不出來的原因。

小帽 提到...

原來如此啊!
感謝Abin!

euyoung 提到...

小帽:上次你留的那個東西還真的滿有趣的,只是最近沒時間弄Blog XD。

我覺得還是要兼顧IE的使用者比較好,雖然我也都是使用FX,但是畢竟很大一部份都使用IE,這也是設計版型不可不注意的地方。

題外話,為甚麼你的RSS Reader累積的那麼快阿?昨天繞過來看好像才21而已

小帽 提到...

呵呵,有空再去玩啦!
我是比較期待 GR Fan Club. XD

CSS 我是完全不懂,不過這陣子有摸出一點頭緒來,以後應該會比較順了,敬請期待。

然後關於那個 FeedCount,好像有時候會多,有時後會少,我也不知道怎麼看??可能不只是從我網站訂閱的會計算上去?連結到 feedburner 提供的 RSS url 會不會也加上去?還是說我那個小玩具有有關係?

也無所謂啦,有沒有人在看,我都會加減碎碎念啦!

Leonie 提到...

請問小帽為何堯blog的最新回應現在只能出現loading,而你的却還能正常運作,請問你是用堯的方法或另有他法?

小帽 提到...

Leonie 您好,我是用堯的方法沒錯,你的情形我早就遇到了,這個情況可能跟他的 Script 寫法有關,感覺上是需要被"觸發"才會運作該段程式,而這個觸發的動作可能是回覆一個新的回應,沒有仔細去測試。這問題不大,但也是有點小困擾。
我的作法是在 google/ig 用 blogpost 本身提供的方式訂閱自己 blog 的最新回應,以便知道有沒有最新回應。(這方式的缺點是無法排序,有可能修改的回應會變成最新回應,所以沒採用在 blog 上面)
我找時間測試一下,有進展再跟您報告。

Leonie 提到...

感謝您!