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

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

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

Customize Google Reader's Clips(Google Operating System)

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

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=数字 の箇所は、表示させたいアイテムの数を入れればOKです。

コメント