FC2ブログに関連記事の表示をする(関連エントリー) １の１
FC2ブログに関連記事の表示をする(または関連エントリー)カスタマイズ方法が ようやく判明。（これまでもできなかったわけではないけれど、実用に耐えなかったので。）
関連記事と切っても切り離せないのが「タグ」。
そしてもうひとつの鍵は【Google AJAX Feed API】。
どっちも新しいものではないのだけれど、あぁそうか、RSS読めばいいだけか。アイデアですね。
RSSとかフィードって何？って人は「
」←これなら見覚えある？あとは各自復習で。
本来は解説をコピペすればあっという間にできてしまえる♪のが理想なのでしょうが、遠回りで説明します。カスタマイズ初心者でも、ある程度理解しながら進めていただいたほうが、自分でさらにカスタマイズしやすいので。
目的：【個別記事に関連記事を表示する】
説明手順
- 下準備
- 基本の表示
- 関連記事(タグを使った一覧)の表示
- 表示の調整
- よくあるカスタマイズ
１．下準備
Google AJAX Feed APIを使用する準備をします。Google AJAX Feed APIキーを取得しましょう。おそらく全工程の中で、一番壁となるところ。初心者はなんだか敷居の高さを感じるみたいですね。本当は簡単なんですけど。
googleの仕様変更により、googleAPIキー不要になりました。１の手順をとばして「２．基本の表示」に進んでください。(2012.04)
1-1 「Google AJAX Feed API への登録ページ」 を確認する。
Google AJAX Feed API への登録ページを開いて内容を確認してください。
1-2 Googleアカウントの作成
Googleアカウントをもってない人は作成してください。先ほどの登録ページにリンクがあるはず。 GoogleアカウントでG-mailとかGoogleAnalytics(アクセス解析)とか、igoogleとかが使えるようになります。あって損はないです。
1-3 登録ページの入力
あとは説明よめばわかるはず。
なお、「使用するウェブサイトの URL」はあなたのブログのTOPページのURLです。
利用規約の同意とURLを記入したら「APIキー生成」を押します。
1-4 Googleアカウントにログイン。
この時点でログインしていなければログイン画面がでるのでログインします。
1-5 キーの保存
生成されたキーと、サンプルが表示されるので、画面ドラッグコピーして、メモ帳かなにかで保存しておいてください。
【生成されたキー】は英文字でうにょうにょ長いやつです。
補足：
ここまで3分とかからないはず。
Google AJAX Feed APIのTOPページは以下になります。
→Google AJAX Feed APIのTOP
いろいろ説明があるので余裕が出たらデベロッパー ガイドやクラス リファレンスを読んでみてください。
すでに同じブログでAJAX Search APIとかMAP APIを使用されてるかたは同じキーですので登録不要のはず。(ってかそういう人には細かい説明はいらんね。)
２．基本の表示
ここからはテンプレートの中に記述していきます。バックアップを忘れずにぃ。
以降出没する「変数」に関してはこちらを参照→テンプレート用 変数一覧
2-1:表示箇所の作成
2-1.1 *HTML*<!--permanent_area--> <div id="feed">Loading...</div> <!--/permanent_area-->
記事の中に配置するか、コメント欄より下に配置するかはご自由に。
一応幅の設定しておきます。数値はそれぞれのテンプレートに適した幅で。
2-1.2 *CSS* #feed { width : 320px; }
2-2:google AJAX Feed API読み込みの作成
2-2.1 *javascript*<!--permanent_area--> <script src="http://www.google.com/jsapi?key=YOURKEY" type="text/javascript"></script> <!--/permanent_area-->
YOURKEYとなっているところを、1-5の工程でGETした【生成されたキー】に置き換えて記述します。
関連記事を出さないページでは邪魔(重くなる可能性がある)なのでここでも個別記事の時にだけという条件をつけてます。
googleの仕様変更により、googleAPIキー不要になりました。。?key=の引数は不要になります。(2012.04)
<!--permanent_area--> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <!--/permanent_area-->
2-3:実行ソースの記載
以下のソースを記述すると、最新記事の一覧を出すことができます。最新記事なんかいらんわぁって？ちょっと説明の都合ね。関連記事はもうしばしお待ちください。
2-3.1 *javascript*<!--permanent_area--> <script language="Javascript" type="text/javascript">//<![CDATA[ google.load("feeds", "1"); function init_feedC() { var feedControl = new google.feeds.FeedControl(); feedControl.addFeed("<%url>?xml", "TOP"); feedControl.setNumEntries(5); feedControl.setLinkTarget(google.feeds.LINK_TARGET_SELF); feedControl.draw(document.getElementById("feed"), {drawMode : google.feeds.FeedControl.DRAW_MODE_TABED}); } google.setOnLoadCallback(init_feedC); //]]> </script> <!--/permanent_area-->
もうこれでほとんど完了。しつこく個別記事用の変数で囲ってます。
以下カスタマイズに関連するところだけ説明。
2-3.2 *javascript*
feedControl.addFeed("<%url>?xml", "TOP");
addFeed:読み込むRSSのURLと、タブに表示されるタイトルを設定します。読み込みたいRSSが複数ある場合は、このaddFeedを追加するだけ。
<%url>はFC2の変数です。
2-3.3 *javascript*
feedControl.setNumEntries(5);
setNumEntries:表示する数を指定できます。
デフォルト設定値 : 4
ここでは5記事が表示されることになります。
あまり大きい数値をいれても見にくくなるだけなのでほどほどに。
あと、FC2ブログで配信されているRSSの記事数より多く設定しても無駄です。
[管理ページの環境設定(または各種設定)＞ブログの設定で記事の設定-RSSの設定]で確認・登録できます。
追編）RSSのブログ側の件数設定でちょっと半分勘違い：各RSSの件数は上記の箇所にある「記事の設定」の件数が基本になります。公式マニュアルでご確認ください。→[RSS] ブログのRSS＞配信するRSSの設定
ブログ側の件数設定・および記事投稿がRSSに反映されるのには時差があります。2-3.4 *javascript*
feedControl.setLinkTarget(google.feeds.LINK_TARGET_SELF);
setLinkTarget:リンクのターゲットを指定できます。用はtarget="ここ"の指定。
google.feeds.LINK_TARGET_BLANK - 新しいウィンドウで開きます。
google.feeds.LINK_TARGET_SELF - 現在のウィンドウで開きます。
google.feeds.LINK_TARGET_TOP - 一番上のフレームで開きます。
google.feeds.LINK_TARGET_PARENT - 一番上のフレームで開くか、または現在のフレームを置き換えます。
その他 - targetに指定したい値
デフォルト設定値 : google.feeds.LINK_TARGET_SELF
2-3.5 *javascript*
feedControl.draw(document.getElementById("feed"),
{draw: google.feeds.FeedControl.DRAW_MODE_TABED});
draw:feedControlが読み込を実行するメソッドです。
"feed"は2-1で設定した表示領域のIDです。
drawModeで、リストで表示するかタブ形式で表示するかを指定できます。
google.feeds.FeedControl.DRAW_MODE_TABBED - タブ表示
google.feeds.FeedControl.DRAW_MODE_LINEAR - リスト表示
今回はタブで表示になりますのでサンプルどおりで。
drawModeデフォルト設定値 :google.feeds.FeedControl.DRAW_MODE_LINEAR
補足：
これらを一箇所に記載できる場合は、最初と最後にいれてくださいね。(つど<!--permanent_area-->～<!--/permanent_area-->を書かなくてよいです。)
３．関連記事の表示
説明の都合後回しになりましたが、ここは簡単。変数タグの使い方は常套内容です。
3-1.1 *javascript*<!--topentry--> <!--tag_list--> feedControl.addFeed("<%url>?xml&utag=<%topentry_tag_list_parsename>", "<%topentry_tag_list_name>"); <!--/tag_list--> <!--/topentry-->
記事に設定されたタグの数だけaddFeedしてやればいいだけ。これを[2-3.1]のどこに足せばいいか、もうわかるよね？
お疲れ様です。できあがり～♪
ここまでを実行したら、ん？？？
最初のサンプルと全然ちがうやないか～い。なんか余分な内容がいっぱい出てますケド。
まだ微調整が残っております。が、本日はここまで。
ヒントは「スタイル設定。余分なものは見えなくすればいい」です。
こことにらめっこしてみて。
・Google AJAX Feed API ドキュメント(CSS構造)
・AJAXTOWER
その他参考：というよりアイデアネタ元です。
ＦＣ２ブログのタグとGoogle AJAX Feed APIを使用した関連エントリー
→なんか続きがみられるそうなんですが、探せない(T-T)
追記：見れました。直々にありがとございます。しっかし人間のフィルター能力ってすんげぇなぁ、と、自分の目の節穴は棚において感心してみる。
この記事の写真を大きなサイズ(原寸)で全部見る。
Loading...(Javascript)
さんのランキングベスト３にはいるシリコンカップカバー。
猫ぱんちさんでみてすっごい気になってました。お値段も、手ごろ。
![肉球 マウスパッド 【ねこきゅう マウスパッド】 [マウスパッド にくきゅう 猫 ネコ]](http://ecx.images-amazon.com/images/I/61G%2BQJS3sJL._SL75_.jpg)
