スマホとPC両対応のホームページ作成、ご予約フォームの作成、
メルマガ配信、顧客管理機能までがまるっと一つになったリウムスマイル!

電話番号:06-6484-5445

営業時間:平日 9:00〜17:30

  1. ホームページ内にインスタグラムの写真一覧を表示するウィジェットの紹介
 

ホームページ内にインスタグラムの写真一覧を表示するウィジェットの紹介

2014/12/03 ホームページ内にインスタグラムの写真一覧を表示するウィジェットの紹介

インスタグラム(Instagram)という無料の写真共有サービスをご存知でしょうか?

iPhoneやAndroidをお使いであれば、無料のアプリをダウンロードしてすぐに始めることができます。

 

どういうものかざっくり説明すると、ご自身がスマホで撮った写真をどんどんアップ(公開)していくと、繋がっている友達や同好の方など写真を見た人が「いいね」をしてくれたり、コメントをしてくれたりするというものです。

Facebookやツイッターに似ていますが、文字や情報などではなく、写真を軸に特化したSNSという感じでしょうか。

 

当初は写真のセンス溢れた人達の発表の場みたいな感じだったのですが、利用者がどんどん広がって今ではファッションブランドやネイルサロンなど、お店でも活用されているケースも増えてきているようです。

 

■ファッションブランドの活用例

http://instagram.com/moussyofficial

http://instagram.com/milkfedjp/
http://instagram.com/adidasoriginals

■ネイルサロンの活用例

http://instagram.com/laureanail

http://instagram.com/roomnail

■美容室の活用例

http://instagram.com/kentaman0910

 

リウムスマイル!の機能でもこういったギャラリーページを簡単に作成することができますが、

 

今回ご紹介するウィジェットを使えば、インスタグラムにアップした写真をホームページに埋め込むことができます。

すでにインスタグラムを活用されている方や、これから活用してみようという方は参考にご覧ください。

 

先に、ご自身のインスタグラムのユーザーネームを確認しておいてください。

これからインスタグラムの利用を始めてみようという方は、こちらからアプリをダウンロードしてスタートしてください。iPhone用と、Android用があります。

 

 

まず、インスタグラムをホームページに貼り付ける為のタグを作ってコピーします。

PCのブラウザでこちらのSnapWidgetという無料サービスにアクセスします。

※このサービスは無料ですが広告が表示されます。

画面下の方へスクロールすると設定項目欄があります。

表示の仕方を細かく設定できるようですが、ひとまず↓のように設定して

1.Username欄に、あなたのインスタグラムユーザーネームを設定します。

2.Responsive欄をYesに設定します。

3.画面下部の「Preview」をクリックし、ご自身のインスタグラムの写真が表示されることを確認てOKなら右上の×を押してプレビュー画面を閉じます。正しく表示されないようであればユーザーネームが正しいか確認してください。

4.画面下部の「Get Widget」をクリックします。コード部分をコピー(選択してマウスの右クリックメニュー内にコピー機能があります)しておきます。

 



次にホームページに埋め込む手順です。
ここでは例として弊社の 簡単ホームページ作成サービス リウムスマイル! で埋め込む手順をご説明します。


リウムスマイル!管理画面にログインして、以下の手順でインスタグラムを貼り付けるパーツを作成します。

1.メインカレンダー画面右のクイックアクセス欄「ホームページPC版プレビュー」ボタンをクリックして、プレビュー画面を表示

2.インスタグラムの写真群を表示させたい場所付近にマウスを持っていき、「+パーツ表示追加」をクリック

3.画面右の「新規追加」をクリックして、「フリーページ」ボタンをクリック

4.タイトルに「ギャラリー」など適当な名前を設定し、本文欄上部のボタン群一番右の「HTMLソース編集」をクリック

5.新たに開く黒い枠の入力欄内に、前述のインスタグラムの「Get Widget」でコピーしたタグを貼り付けて、画面下部の「HTMLソース編集」ボタンをクリック(通常、マウスの右クリックメニューに貼り付け機能があります)

6.画面下部の「保存」をクリック

 

以上で、下記例のような感じでホームページ内に、インスタグラムの写真群が埋め込むことができます。

 


上記でご紹介したインスタグラム、および、SnapWidgetサービスは、リウムスマイル!外の提供サービスですので、弊社サポート対象外となります。お問合せにはお答えできかねますので、予めご了承下さい。
2014年12月時点で正しく動作することを確認しておりますが、提供元の都合などにより予告なく仕様が変わる場合がございますので、予めご了承ください。

参考:一覧ではなく、個別の写真をホームページ内に埋め込む手順はこちら↓

ホームページ内にインスタグラムの写真を埋め込む方法