[楽天]レビューページをページに表示 IFRAMEとCSSで簡単実装

楽天のショップを見ていると、トップページや商品ページなどにショップのレビューを表示しているのをよく見かけますね。

本来は別ページにショップのレビューがあるのですが、評価の良いレビューがたくさんあってもお客様の目に止まらない可能性もあります。そこで、お客が必ず訪れる商品ページやトップページにレビューページを埋め込んで表示することで目に止まりやすくすることが出来ます。

楽天のレビューページを他のページにIFRAMEとCSSで埋め込んで表示する方法

以前紹介した
[楽天]無料で使えるネットショップ 運営支援ツール
[楽天]ひと気、賑わい演出、ページ自動更新 ツール・サービスまとめ
にもレビューを表示するツールがいくつかありますが、本日紹介する方法は他のツールなどを利用せずに、トップページ、商品ページにレビューを表示する方法について書きたいと思います。

いたって簡単な方法です。
レビューページをインラインフレームで埋め込んで表示します。

例えば、こちらのショップ高山質店
ショップオブザイヤー2012で（腕時計）ジャンル大賞を受賞されてるショップ

トップページにレビューページを埋め込んで表示しています。
↓↓こんな感じ

でも、ショップレビューのページって
↓↓↓のようなページなので、

単純にインラインフレームで埋め込むだけでは上記ショップさんのように表示することは出来ません。

そこで方法を調べてみました。
色々なブラウザに対応するとなると記述も長くなってしまうので今回はシンプルな記述を優先して紹介します。

ポイントとしては、トップページなどに直接インラインフレームを記述するのではなく、GOLD内に１つHTMLファイルを作成して、そのファイル内にインラインフレームを記述してCSSを使って表示位置を指定しています。

サンプルソース review.html

<style>
#MyReview{
position: relative;
}
.frm {
position: absolute;
top: -570px;
}
</style>
<div id="MyReview">
<iframe src="レビューページURL" marginheight="0" marginwidth="0" scrolling="yes" class="frm" height="1810" width="100%" frameborder="0"></iframe>
</div>

cssのtopで表示開始位置を指定しています。
heightの値はtopをマイナスしている分 余分に取っておく必要があります。

GOLD トップページ等での記述
review.htmlをインラインフレームで表示します。
<iframe src=”review.html” width=”700″ height=”650″ scrolling=”no”></iframe>
で表示することが出来ました。

今回はショップレビューを例に記述していますが、商品レビューページも同様に表示することが出来ると思います。
良いレビューをお客さんに見てもらえるように、ぜひ設置してみてください。