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

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

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

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

[GET FREE WIDGET]ボタンをクリックします。

名前、メールアドレス、パスワードを入力して[SIGN UP]をクリックするか、フェイスブックアカウントでログインします。

(1) [CHOOSE A SERVICE]をクリック

(2) [INSTAGRAM]をクリック

(3) 表示レイアウトをクリック

(4) [CONFIGURE WIDGET]をクリック

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

すると、インスタグラムの認証画面が表示されます。

ここでご自身のインスタグラムのユーザー名とパスワードを入力して、ログインボタンをクリックします。

また、お使いのブラウザですでにインスタグラムにログインされている場合は、下のような認証画面が表示されます。

この場合は、「authorize」ボタンをクリックします。

（このウィジェットがご自身のインスタグラムの写真を表示することを許可しますよという意味です）

正常にログインできたら、(1)の部分に、ご自身のインスタグラムの写真が表示されます。

下に細かい設定項目がありますが、ひとまずデフォルトのまま(2)の「GET WIDGET」ボタンをクリックします。

（後で慣れてきたら、細かく設定をいじってみるのも良いでしょう）

※左側の設定欄最下部の「Responsive（レスポンシブ）」は必ず［YES］を選んでおきましょう。

　閲覧環境によって幅が自動調整されるようになります。

上記のようなウィジェットのコードが表示されますので、[COPY TO CLIPBOARD]をクリックしてコピーします。

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

プレビュー画面を表示し、

インスタグラムの写真群を表示させたい場所付近にマウスを持っていき、「＋表示追加」をクリックします。

画面下部にスクロールして、「フリーページ」欄左の[+]ボタンをクリックします。

[+まっさらから作成する]ボタンをクリックします。

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

新たに開く黒い枠の入力欄内に、前述のインスタグラムでコピーしたタグを貼り付けて（マウス右クリックメニューの貼り付けを選択）、画面下部の「HTMLソース編集」ボタンをクリック後、画面最下部の「保存」をクリックします。

以上で、インスタグラムウィジェットを埋め込むことができます。 

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

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