プラカンブログSTAFF BLOG

2018.01.24

インスタグラムの投稿を簡単にHTML埋め込む方法

インスタグラムの爆発的な人気により、インスタグラムの投稿をwebサイトに埋め込んでほしいという依頼も多いのではないでしょうか?今回はInstagram APIを使わずに、簡単にインスタグラムをHTMLに埋め込む方法をお伝えします。

インスタグラムの記事をパソコンのブラウザで開く

まずは埋め込みたい記事をブラウザで開いてください。記事の右下に「・・・」のマークがあるので、そこをクリックします。

するとウインドウが出てくるので「埋め込み」をクリックします。

埋め込みコードをコピー

するとさらに埋め込みコードのウインドウが表示されます。投稿記事の文章も含める場合は、「キャプションを追加」にチェックを入れた状態で、文章は不要で写真や動画だけでよければ、チェックを外した状態で「埋め込みコードをコピー」ボタンを押して、コードをコピーします。
※コピーする際、コードを選択していないとコピーされなかったりする場合があったので、念のためコードをクリックしてアクティブな状態にしてからコピーして下さい。

HTML上の任意の位置にコードを貼り付け

あとは、コピーしたコードをHTML上の任意の位置にペーストして下さい。するとあら簡単!目的の写真が表示されます!

表示サイズを調整したい場合は、コピーしたコード内のblockquoteにインラインで書かれているcssのstyleの「max-width」を変更することで、簡単に調整できます。

まとめ

今回の方法とは別の方法として、Instagram APIを使った方法もあるのですが、Instagram APIが2016年6月1日に仕様が変更され、APIの高機能を使うには「Instagramの審査」を通過しなければならなくなりました。審査に通過せずに使う方法として、「SandBoxモード」という機能制限された状態のものを使う方法もあるのですが、最新の投稿20件までしか取得できないなどの制限があり少し使いづらくなりました。

さらに、APIの利用には数多くの手順が必要でそこそこハードな作業なので、まずは今回ご紹介した簡単な方法からはじめてみてはいかがでしょうか?

この記事は1年以上前の記事で内容が古くなっている場合があります。

+dc(ひ)

この記事は、HISADA が書きました。