「この記事を見た人は以下も読んでます」を表示するプラグイン「feedControl」をFC2ブログに設置

「この記事を見た人は以下も読んでます」を表示するプラグイン「feedControl」

「この記事を見た人はこんな記事も読んでいます」という関連記事を自動で抽出するjs「feedControl」。このブログにも設置しているのですが、忘れそうなのでメモしておきます。なお、記事中の解説はFC2ブログを使っています。

下準備

Google AJAX Feed API への登録

関連タグ記事のRSSフィードを抽出するのに使うGoogle AJAX Feed APIを生成します。簡単に方法を書いておきます。

それにはgoogleアカウントが必要なので、お持ちでない方は、こちらから取得できます。

下記リンクからAPIキーを生成

LinkGoogle AJAX Feed API登録ページ

Step1: 規約を読み、設置するブログのURLを入力

API

Step2: Googleにログイン

API

Step3: APIキー生成完了！メモ帳などにコピペしておく。

API

画像のアップロード

以下の2つの画像を使いますので、アップします。

ローディング画像

RSSの前に付ける画像

アップロードした画像のURLは、後で貼り付けます。

画像URL

設置

CSS

以下の記述をCSS内に追加。場所はどこでも構いません。最後でもOK

先程アップした「RSSの前に付ける画像」のURLだけ差し替えてくださいね。

#feedControl { 
width : 468px;
font-size: 14px;
}
#feedControl .gf-title {display:inline;}
#feedControl .gf-snippet {display:none;}
#feedControl .gf-relativePublishedDate {display:none;}
#feedControl .gf-spacer {display:none;}
#feedControl .gf-author {display:none;}
a.gf-title {
line-height : 150%;
padding: 0px 0px 10px 20px;
background-image : url("RSSの前に付ける画像URLをここに入れる");
background-repeat: no-repeat;
background-position: 0 1px;
}
a.gf-title:link {color:#0000ff; text-decoration: none;} /* リンク色 */
a.gf-title:visited {color:#0000ff;text-decoration: none; } /* 訪問済みリンク色 */
a.gf-title:hover {color:#ff0707;text-decoration: underline;background-color: transparent;} /* マウスを当てたときのリンク色 */-->

次に、以下の記述を挿入したい場所(HTML)に追加してください。

「あなたのGoogle AJAX Feed API Key」に生成したAPIキー、
「ローディング画像のURLをココに入れてください」にローディング画像のURLを差し替えてください。

<script src="http://www.google.com/jsapi?key=%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AEGoogle%20AJAX%20Feed%20API%20Key" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[
// load the AJAX Feed API
google.load("feeds", "1");
function initialize() {
// create a feed control
var feedControl = new google.feeds.FeedControl();
<!--topentry-->
<!--tag_list-->
feedControl.addFeed("<%url>?xml&utag=<%topentry_tag_list_parsename>", "<%topentry_tag_list_name>");
<!--/tag_list-->
<!--/topentry-->
feedControl.addFeed("<%url>?xml", "新着");
feedControl.setNumEntries(10);
feedControl.setLinkTarget(google.feeds.LINK_TARGET_SELF);
feedControl.draw(document.getElementById("feedControl"),
{
drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED
});
}
google.setOnLoadCallback(initialize);
//]]>
</script>
<h3>この記事を見た人はこんな記事も読んでいます</h3>
<div id="feedControl"><p class="al-c">Loading...<br><img src="%E3%83%AD%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E7%94%BB%E5%83%8F%E3%81%AEURL%E3%82%92%E3%82%B3%E3%82%B3%E3%81%AB%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84" alt="ローディング"></p></div>

設置完了です。

■参考にした記事

FC2ブログのタグとGoogle AJAX Feed APIを使用した関連エントリー

関連記事