TOP > スポンサー広告 > スポンサーサイト> ブログいぢり(カスタマイズ) > FC2ブログに関連記事の表示をする(関連エントリー) 1の1

スポンサーサイト

--.--.--(--:--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  

この記事の写真を大きなサイズ(原寸)で全部見る。
スポンサー広告 | トラックバック(-) | コメント(-) | [EDIT]

FC2ブログに関連記事の表示をする(関連エントリー) 1の1

2009.04.10(23:39)

FC2ブログに関連記事の表示をする(または関連エントリー)カスタマイズ方法が ようやく判明。(これまでもできなかったわけではないけれど、実用に耐えなかったので。)

関連記事と切っても切り離せないのが「タグ」。
そしてもうひとつの鍵は【Google AJAX Feed API】。

どっちも新しいものではないのだけれど、あぁそうか、RSS読めばいいだけか。アイデアですね。

関連エントリーサンプル

RSSとかフィードって何?って人は「RSSFead」←これなら見覚えある?あとは各自復習で。

本来は解説をコピペすればあっという間にできてしまえる♪のが理想なのでしょうが、遠回りで説明します。カスタマイズ初心者でも、ある程度理解しながら進めていただいたほうが、自分でさらにカスタマイズしやすいので。

目的:【個別記事に関連記事を表示する】

説明手順

  1. 下準備
  2. 基本の表示
  3. 関連記事(タグを使った一覧)の表示
  4. 表示の調整
  5. よくあるカスタマイズ

1.下準備

Google AJAX Feed APIを使用する準備をします。Google AJAX Feed APIキーを取得しましょう。おそらく全工程の中で、一番壁となるところ。初心者はなんだか敷居の高さを感じるみたいですね。本当は簡単なんですけど。

googleの仕様変更により、googleAPIキー不要になりました。1の手順をとばして「2.基本の表示」に進んでください。(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.基本の表示

ここからはテンプレートの中に記述していきます。バックアップを忘れずにぃ。
以降出没する「変数」に関してはこちらを参照→テンプレート用 変数一覧

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.関連記事の表示

説明の都合後回しになりましたが、ここは簡単。変数タグの使い方は常套内容です。

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

その他参考:というよりアイデアネタ元です。
FC2ブログのタグとGoogle AJAX Feed APIを使用した関連エントリー
→なんか続きがみられるそうなんですが、探せない(T-T)

追記:見れました。直々にありがとございます。しっかし人間のフィルター能力ってすんげぇなぁ、と、自分の目の節穴は棚において感心してみる。

  

この記事の写真を大きなサイズ(原寸)で全部見る。
決闘 | | うめ成長記録part.11


◆新着・関連記事
Loading...(Javascript)
コメント
私はプロフィールに、「考える力を鍛える記事を載せるようにしています。」と載せています。

もし続きが見られなかったのなら、「考える力を鍛える記事(答えを表に出していない記事)」から「考えられて」ご自分の答えに到達されたようですね。
記事を投稿した本人としてはうれしい限りです。

カスタマイズされた表示されている記事へのリンクをなくす、広告RSSの非表示等もすばらしいですね。

追記:
「木を隠すなら森の中」ということで、続きはJavascriptをONにして[PR]に並んでいる中の『Tuduki Wo Miru「続きを見る」のローマ字表記)』をクリックすれば見られますよ。
【2009/04/19 00:43】 | アドセンス、アフィリエイトにちょっと使えるネタ帳 | [edit]
申し訳ありません!!
無事表示することができました^^;
これから愛用させ頂きます(`・ω・´)ゞ

では失礼します
【2010/08/13 00:12】 | こくとー | [edit]
ご報告ありがとうございます~。
【2010/08/13 20:56】 | 双葉そら | [edit]
コメントの投稿












管理者にだけ表示を許可する
トラックバック
トラックバックURL:
http://cat2neko2cafe2.blog102.fc2.com/tb.php/104-b761ff58

[PR]
エコキッチンさんのランキングベスト3にはいるシリコンカップカバー。 猫ぱんちさんでみてすっごい気になってました。お値段も、手ごろ。

【シリコンカバー】MOM Kitchen(マムキッチン) シリコン製カップカバー

雑貨屋さんが好きなので、ここのサイトは楽しい。 私の勘所をよく知っていらっしゃる(違)欲しいのいっぱい出てくる。 料理しないくせにキッチン用品欲しい~。プレゼントにも最適な商品がいっぱいです。
[エコキッチン]


決闘 | | うめ成長記録part.11
プロフィール
双葉そら

Author:双葉そら

ひとつきに一度は猫かふぇに行かなければ、猫欠乏症及びもっふもふ禁断症状に陥ります。

猫カフェにいる人々をみてるのも楽しかったりします。

普段はSE関連のお仕事。
WEBやデザイン系は苦手です。
配色って何?おいしいの?

本サイトにて、癒しと、猫カフェの認知&"布教"の一端を担えれば最高です。

肉球礼賛 ビバ肉球


カテゴリ
最近の記事
猫喫茶
ねこかふぇリンク。

*猫カフェ情報猫カフェ一覧(自内)


肉球 マウスパッド 【ねこきゅう マウスパッド】 [マウスパッド にくきゅう 猫 ネコ]肉球 マウスパッド
 ぷにっぷにっ!

*猫カフェブログ(自内)


当サイトへのリンクはご自由に。
「猫とカフェオレ、ときどき仕事」バナー

お気に入り

*猫カフェブログ(自内)
店舗ブログではなく、一般の人の猫カフェブログを集めてみました。

*ネコキャバではない。
東京の猫カフェ【ねこのみせ】ブログ。店内の徒然にとどまらず、開店の原点エピソードや、経営者視点からの猫カフェ動向の感想だったり読み応えあり。(→移転前)

*関西 猫 カフェめぐりの日々
→更新終了。いままで素敵な写真で楽しませてくださりありがとうございました!!
主に関西圏猫カフェのにゃんこ写真が盛りだくさん。 やさしい表情のにゃんこから、アクロバティックな姿まで生き生きした写真は必見。

*赤ソマ狂の詩
旧題「coco壱!」。飼い猫coco(ソマリ)ちゃんのブログ。ブリーダさんの頃から見てるので 個人的に愛着が強いのですが、ソマリ好きさんも是非。
赤ソマ狂の詩バナー

*這いつくばって猫に近づけ
猫写真家、荻窪氏が書く猫の撮影といろんなデジカメのレビュー。

*【実録】隠れ?ヲタギャルの日常【4コマ】
イラストレータさんの4コマブログ。わからないネタもあるかもしれませんが、 猫漫画は秀逸。
「08冬コミ参加おめでとうございます」 ←この意味が分かる人なら猫ネタ以外でも全部面白いとおもいます。
【実録】隠れ?ヲタギャルの日常【4コマ】バナー

*ミシュニャン
タイトルは、レストランガイドミシュランをもじったもの。世界をまたにかけた猫探訪録。

*猫の肉球が素材-ダ・ジ・ポン
猫モチーフのフリー素材。めっさかわいくて、全部散りばめたい衝動に駆られます。

[tag cloud]
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。