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

公開日:  最終更新日:2015/06/11

[楽天]レビューをページに表示さりげなくショップをPR!!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をインラインフレームで表示します。

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

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




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Comment

  1. yokota より:

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

Your Message

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

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

スポンサードリンク

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

PAGE TOP ↑