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

電話番号:06-6484-5445

営業時間:平日 9:00〜18:00

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

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

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

インスタグラム(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という無料サービスにアクセスします。

※このサービスは無料ですが広告が表示されます。有料版を申し込めば広告を非表示にすることができるようです。

 

画面を少し下の方へスクロールし、いくつか並んでいるウィジェットの種類の内、左上のInstagram Photosのウィジェット欄の、「CREATE YOUR FREE WIDGET」をクリックします。

 

下記のような設定画面が表示されますので、Usernameのところをクリックします。



すると、インスタグラムの認証画面が表示されますので、ここでご自身のインスタグラムのユーザー名とパスワードを入力して、ログインボタンをクリックします。

 

また、お使いのブラウザですでにインスタグラムにログインされている場合は、下のような認証画面が表示されます。この場合は、「authorize」ボタンをクリックします。(このウィジェットがご自身のインスタグラムの写真を表示することを許可しますよという意味です)

 



正常にログインできたら、(1)の部分に、ご自身のインスタグラムの写真が表示されます。下に細かい設定項目がありますが、ひとまずデフォルトのまま(2)の「GET WIDGET」ボタンをクリックします。(後で慣れてきたら、細かく設定をいじってみるのも良いでしょう)



次のようなウィジェットのコードが表示されますので、これをまるまるコピーします。



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

 

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

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

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

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

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

 

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

 


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


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

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