Google Readerのシェア記事表示をカスタマイズ

Google Readerとっても便利に使っているのですが、ついでに自分の気になる記事をブログなどにクリップするために、Share用の機能があります。そのShareした記事をブログに一部表示とかできるのですが（↓こんな感じ）、スタイルに合わないと難しかったりして。

全体を変更したのと同時に、とりあえずリンクだけでこのブログに表示させるWidgetははずしていたのですが、今日こんな記事を発見しました！

Customize Google Reader's Clips(Google Operating System)

自分でカスタマイズ用定義を作ってしまって、それを使うのです。上記の例ではTagを公開する方法が紹介されていますが、ShareフォルダでもＯＫでした。

WordPressに移植する方法

テンプレートのヘッダーの<head></head>の間に、以下のJavaScriptを挿入。


function buildContent (blog) {
if (!blog || !blog.items) return;
var container=document.getElementById("container");
var code="";
for (var i = 0; i < blog.items.length; i++) {
var item = blog.items[i];
code=code + ""'<a href='"+item.alternate.href+"'>"+ item.title+ "</a><div>"+ item.contentSnippet+"</div><br />";
}
container.innerHTML=code;
}




code = code + 以降を変更すれば、表示させる方法を変更することも可能です。例ではitem.contentSnippet（概要）を表示させていますが、それだと結構長さも長くなるので、私はブログ名（出典元）を表示させるように変更してみました。


function buildContent (blog) {
if (!blog || !blog.items) return;
var container=document.getElementById("container");
var code="";
for (var i = 0; i < blog.items.length; i++) {
var item = blog.items[i];
code=code + ""<a href='"+item.alternate.href+"'>"+ item.title+ "</a><div> from: " + item.origin.title + "</div><br />";
}
container.innerHTML=code;
}



これで準備完了。あとは自分がNews Clipを入れたい場所に以下のコードを記入します。


<div id="container"></div>
<script type="text/javascipt" src="http://www.google.com/reader/shared/[id]/?n=7&callback=buildContent"></script>




n=数字　の箇所は、表示させたいアイテムの数を入れればＯＫです。

コメント

コメントを投稿