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

公開日:  最終更新日:2018/04/29

[楽天]レビューをページに表示さりげなくショップをPR!!IFRAMEとCSSで簡単実装
楽天のショップを見ていると、トップページや商品ページなどにショップのレビューを表示しているのをよく見かけますね。

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

スポンサードリンク

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

以前紹介した
[楽天]無料で使えるネットショップ 運営支援ツール
[楽天]ひと気、賑わい演出、ページ自動更新 ツール・サービスまとめ

にもレビューを表示するツールがいくつかありますが、本日紹介する方法は他のツールなどを利用せずに、トップページ、商品ページにレビューを表示する方法について書きたいと思います。

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

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

トップページにレビューページを埋め込んで表示しています。
↓↓こんな感じ
30-1.png
でも、ショップレビューのページって
↓↓↓のようなページなので、
30-2.png
単純にインラインフレームで埋め込むだけでは上記ショップさんのように表示することは出来ません。

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

ポイントとしては、トップページなどに直接インラインフレームを記述するのではなく、GOLD内に1つ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をインラインフレームで表示します。

で表示することが出来ました。

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






Comment

  1. yokota より:

    いつもサイトを拝見させて頂いております。
    この度上記のテクニックを実装しようと思ったのですが、IFRAMEで表示した先のURLにTARGETタグが入っていないのでフレーム内で表示されてしまうと思います。
    これについては解決策はないでしょうか?
    もし、お返事いただけるようでしたらメールアドレスの方へ返信いただけますでしょうか?
    お手数をおかけいたしますが、よろしくお願いいたします。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク

記事が気に入ったらシェアお願いします

[楽天]レビューページをページに表示 IFRAMEとCSSで簡単実装
  • 1つ星2つ星3つ星4つ星5つ星
    (評価なし)
    読み込み中...
PAGE TOP ↑