Blogger ラベル記事一覧を表示するスクリプト

Written by .digital 日付: 8月 01, 2021 , Posted in Tips.

今回はウィジェットに関係なく、特定のラベルの記事一覧を出力する javascript を紹介します。

function onLoadFeeds(root) {	if("entry" in root.feed){
		var entryNum = root.feed.entry.length;
		for(var e=0; e<entryNum; e++) {
			var entry=root.feed.entry[e];
			var url;
			var linkNum=entry.link.length;
			for(var l=0; l<linkNum; l++) {
				var link=entry.link[l];
				if(link.rel=="alternate"){
					url=link.href;
					break;
				}
			}
			document.write("<a class='linkHref' href='"+url+"'>"+entry.title.$t+"</a><br/>");
		}
	}
}

これが Blogger の Feed からラベルの記事一覧を取得して、記事のタイトルと記事 Url のリンクを出力するスクリプトです。

簡単な使用方法を紹介します。

上記のスクリプトを読み込んだあと、

<script>
function onLoadFeeds(root) {	if("entry" in root.feed){
var entryNum = root.feed.entry.length;
		for(var e=0; e<entryNum; e++) {
			var entry=root.feed.entry[e];
			var url;
			var linkNum=entry.link.length;
			for(var l=0; l<linkNum; l++) {
				var link=entry.link[l];
				if(link.rel=="alternate"){
					url=link.href;
					break;
				}
			}
			document.write("<a class='linkHref' href='"+url+"'>"+entry.title.$t+"</a><br/>");
		}
	}
}</script>
><script src="http:// {{ my blogger address }} /feeds/posts/summary/-/ {{ labelname }} ?redirect=false&max-results=500&alt=json-in-script&callback=onLoadFeeds&orderby=published">
</script>

のように自身のブログのメタデータを読み込ませます。例えば、このコードで .digital の tips のラベル一覧は、次のように出力されます。

<script>
function onLoadFeeds(root) {	if("entry" in root.feed){
		var entryNum = root.feed.entry.length;
		for(var e=0; e<entryNum; e++) {
			var entry=root.feed.entry[e];
			var url;
			var linkNum=entry.link.length;
			for(var l=0; l<linkNum; l++) {
				var link=entry.link[l];
				if(link.rel=="alternate"){
					url=link.href;
					break;
				}
			}
			document.write("<li><a href='"+url+"'>"+entry.title.$t+"</a></li>");
		}
	}
}</script>
<script src="http://dot-digital-g.blogspot.com/feeds/posts/summary/-/tips?redirect=false&max-results=500&alt=json-in-script&callback=onLoadFeeds&orderby=published">
</script>

できました ! お疲れさまでした。