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

1,特定の記事を埋め込む

今回ホームページにインスタグラムの記事を埋め込みたい場合の方法をご紹介していきます。
参考のインスタグラムのユーザーに渡辺直美さんのインスタを参考にしていきます。

まず最初に渡辺直美さんのホーム画面にいきます。
記事の中で、ホームページに反映させたい記事をクリックします。

そこの右下に「・・・」のメニューバーがありますのでクリックしてください。

そうすると「埋め込み」というメニューがありますので、そこクリックして、
ホームページに反映させたい箇所に貼りましょう。

これだけでできてしまいます。

あとは横幅の調整などは、div要素でwidthを設定しましょう。

1,アルバムの画像を埋め込む

画像のアルバムを簡単に埋め込む方法で、instawidgetを使います。
instawidget

1,早速使ってみるを押してください。

2,ユーザー名を記入

ユーザー名を確認する方法

自分のインスタグラムのアカウントトップページにいってください。
https://www.instagram.com/watanabenaomi703/?hl=ja
上のURLは渡辺直美さんのインスタのトップページのURLです。
そこのURLをinstagram.com/から次の/までの間をコピーします。
渡辺直美さんの場合はwatanabenaomi703です。

3,カスタム

初期状態でも問題ないですが、いろいろカスタムができるのでとても便利

4,プレビューをクリック

5,右側にコードが発行されるので、それをコピー

6,ホームページに反映させたい箇所にペーストして出来上がり！

7,レイアウトを整える

8,レスポンシブ対応

このままでは、スマフォに対応していませんので、スマフォから見ても大丈夫なように、設定します。
コピーしたコードの最後にwidthが書かれている部分がありますので、そこに100%とすることでレスポンシブ対応は問題ないでしょう。

画像と記事を表示させたい場合

画像と記事を表示させたい場合はSnapWidgetでできますので参考にしてください。

これを使用する場合はユーザー名とパスワードが必要なため今回は割愛させていただきます。
https://snapwidget.com/

新規登録が必要ですが、簡単にできちゃいます。