スポンサーサイト

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

関連記事

FC2ブログでテンプレート等を使って関連記事を表示 FC2限定

FC2で関連記事を表示 完全版です
FC2だけを使ってできます
関連エントリー
多くの閲覧者は記事を読み終わるとサイトを去ってしまいます
しかし記事の最後にその記事の関連記事を表示する事で好奇心の強い閲覧者を他の記事へと誘導する事ができます
related2.jpg


というわけで色々検索してたのですが
外部サービスを使うと広告が入ったりするので拒否。
その次に自前で作ろうとしたのですがどのサイトも途中で終わっていたり
私の望む結果までたどり着いていなかったりしていました
そこで自分で完成させようかということになりました
形は記事に設定したタグでサイト内検索しそのリストを表示します

使う人にお願いです是非このサイトへのリンクを張ってください!! オネガイシマス
詳しくは続きより
さてさて長くなりますよっと。
まずこれを作るに当たって色々とヒントを貰ったり
参考にさせてもらったサイトを紹介しておきます

ワンダースワンログ - FC2ブログで、自動で関連記事リストを表示する方法。

http://wonderswan.blog69.fc2.com/blog-entry-39.html

bigchocolate - jQueryで無理やり関連エントリーを表示させる FC2ブログテンプレー
http://bigchocolate.blog120.fc2.com/blog-entry-562.html

ありがとうございました。

ここから本題に入るのですが
ちょっと無理やりやっているのでやる人は自己責任となります

ここでのコツ 一度作ったテンプレートのプレイビューは外部からもそのページを読み込む事ができる

では説明

テンプレートの設定でテンプレートを作る
名前は「related」とする
そしてテンプレートに以下のタグをBodyの中に書く

そのまま使ってくれると非常にうれしい(笑)
<body>
<div style="font-size : 16px;">
<ul>
<!--topentry-->
<li><a target="_top" href="<%topentry_link>"><%topentry_title></li>
<!--/topentry-->
</li><br /><br /><li>
<li><a href="http://orzrev.blog105.fc2.com/blog-entry-36.html">orz革命</a> - FC2ブログで関連記事を表示</li>
<li>[<%ad>][<%ad2>]</li>
</ul>
</div>

related1.jpg


これで記事だけを表示するページを作れる
リストに記事のタイトルを表示
2行開けてリンク(あってもなくても良い)
でFC2アドを張る(必須 <%ad><%ad2>を張らないと保存できない )

CSSはからっぽでもいい 文字サイズを設定したかったら指定しても良いかと
アドレスの後ろに「?template=related」を足すことでrelatedテンプレートを表示することができます

----第二部----

次に記事の下にIframeでrelatedを読み込む
topentryの中に張る事 私は記事はここまでってなってるところのすぐ上の<!--/topentry-->のすぐ上に張っています

<!--permanent_area-->
<h3>関連記事</h3>
<iframe scrolling="no" frameborder="0" src="<%url>?q=<!--tag_list--><%topentry_tag_list_parsename>+<!--/tag_list-->& or&template=related&page=1" width="500" height="112">
</iframe>
<!--/permanent_area-->


このリンクが第二のコツなのですが
アドレスの後ろに「?template=related」を足すことでrelatedテンプレートを表示することができますと書きましたが
それにさらに?p=検索文字 を足すことで検索結果を先ほどのrelatedテンプレートを使って表示できます
さらに& orを付けることでOR検索をかけます
これでタグの文字を使ってサイト内検索を行い検索結果を表示できます
また現在見ている記事と検索結果の重複を防ぐために&page=1を付けて検索結果の2ページ目を表示しています
(これ以外の重複防止を知っている方は是非教えてください)
そのため検索結果が5件以下の場合何も表示されてしまいません もし記事が少ないという人は
<iframe scrolling="no" frameborder="0" src="<%url>?q=<!--tag_list--><%topentry_tag_list_parsename>+<!--/tag_list-->& or&template=related&page=1" width="500" height="112">

<iframe scrolling="no" frameborder="0" src="<%url>?q=<!--tag_list--><%topentry_tag_list_parsename>+<!--/tag_list-->& or&template=related" width="500" height="112">
としてお使いください 但し1件目の記事は重複してしまうと思います

検索結果は5件としてお使い下さい もっと多くてもしようはできると思いますが。

今回での反省等 教えてくださればうれしいです。
最初変数とかどうなってるか難しくて理解するのが大変だった。

iframeの代わりにobjectを使おうとしたがスクロール禁止が分からなかった
Javascriptは読み込みが分からなかった
のでIframeになってしまった
後検索結果が現在の記事と重複しないようにできれば100%完成なのだが。


結果的に良くなった副作用
タグ同士のリンクではなくてタグを使っての検索になるので
リアルに関連記事っぽく見える
さらにタグ同士のリンクじゃないので最悪これからの記事にタグを追加すれば
最新の記事にはリストが表示される

後Iframeの高さはFirefox GoogleChrome IE6
Firefoxが112より小さくすると5つめの記事が切れます
検索結果が0の場合FC2のバナー等が画面に入ってくる可能性があるのでbrでもっと改行してもいいかも


追記 一部のサイトで使ってくださった方がいたのですが
related ページのフォントサイズが違っていた為枠からはみ出てしまってましたので
div style="font-size : 16px;" を追加することで回避できると思います
ソースはすでに書き換え済みです。
今気づいた
body style="font-size : 16px;"のが手っ取り早かったかΣ
スポンサーサイト

関連記事

COMMENTS

COMMENT FORM

管理者にだけ表示を許可する

TRACKBACK


この記事にトラックバックする (FC2 blog user only!)

ブログパーツ
検索フォーム
広告
RSSリンクの表示
Amazon
QRコード
QRコード
リンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。