『Instagram（インスタグラム）』では投稿をブログやWebサイトに載せるための「埋め込み」機能が用意されています。手順はいたって簡単。インスタから埋め込みコードをコピーして貼り付けるだけでブログ・サイトに投稿が差し込めます。
本記事ではパソコンとスマホの埋め込みコード取得方法をご紹介。実際の埋め込みサンプルや、複数投稿を並べた自動更新埋め込みができるツールの紹介から注意点までをわかりやすく解説していきます。
Instagram「埋め込み」のやり方 投稿をブログやサイトに表示する方法
簡単！ Instagramの埋め込み方法【PC/スマホ共通】
インスタの埋め込み手順はシンプルです。該当の投稿から「埋め込みコード」を取得して、自身のサイトに貼り付けるだけ。
ブログなどからインスタへの流入が増やせますし、ほかのインスタユーザーの投稿を貼り付ければ話題の幅も広がります。
①埋め込みコードを取得する方法
投稿を一つ選んで埋め込むコードの取得方法です。PC版とスマホWebブラウザ版の手順は同じ。
スマホの方は『Safari』などのWebブラウザからインスタにログインしましょう。スマホアプリ版では埋め込みコードの取得はできないのでご注意を。
こちらもご参考に
1.埋め込みたい投稿右にあるメニュー[…] > [埋め込み]をタップ
※非公開アカウントだった場合は [埋め込み] が出ず、投稿の埋め込みはできません。
2.[埋め込みコードをコピー]をタップ
▲写真だけを埋め込む場合は「キャプションを追加」のチェックを外す。投稿時に付けた文章やハッシュタグが非表示に。
②埋め込みコードを貼る
インスタの投稿を反映させたいブログやサイトにコピーした埋め込みコードを貼ります。いつも使っているサイトの編集画面に行き、投稿画面など任意の場所に貼り付ければ完了。
テキスト編集モードになっている場合は、HTML編集モードに切り替えましょう。
埋め込みでできないこと
通常投稿・アルバム投稿（複数枚連続した画像）・動画の埋め込みは可能ですが、ストーリーとIGTVの埋め込みはできません。
またインスタの投稿を複数枚並べて表示したり、自動更新する仕様にするにはインスタのAPIを利用した外部ツールを使う必要があります。残念ながらインスタのAPIは2020年3月に廃止（参照：Instagram Platform Changelog）が決まっており、それでもやりたい方は後述のツール紹介を参照ください。
APIとは
サービスの機能と仕様を一部公開し、第三者でもその一部機能を二次的に利用することができるようになる仕組みのこと。
いろいろな埋め込みサンプル
中央揃え、サイズ変更のやり方
中央揃えで表示する
サイトの真ん中に表示されない場合は、先ほど取得した埋め込みコードをcenterで挟みましょう。
<center>（インスタ埋め込みコード）</center>
サイズを変えて表示する
埋め込んだ投稿画像の表示サイズを大きくしたり、小さくすることもできます。
元のサイズ
【横幅】max-width:540px;
【縦幅】min-width:326px;
埋め込みコード内の上記max-width:とmin-width:の数値を変更しましょう。下記サンプルは「max-width:300px; min-width:300px;」で設定。
複数投稿並べた自動更新の埋め込みができる外部ツール
先述のとおり『Instagram』のAPIは2020年３月には廃止されるため、APIを利用した外部ツールは使用できなくなっていくでしょう。
複数投稿を並べたり、自動更新仕様にもできた埋め込みツールの『InstaWidget』は、現在サイトにアクセスできなくなっています。
『SnapWidget』はまだ使えるようですが、こちらもいつ使えなくなるかは不明。それでも今やりたいという方は、以下簡単にご紹介しますのでご参考までに。
SnapWidget
インスタの埋め込みを複数投稿を並べた自動更新仕様にしてくれる外部ツールです。無料版でも上記は可能で、プレビューを確認しながら設定できます。
ただし埋め込み投稿をクリックしても直接インスタには飛ばず『Snapwidget』ドメインページに詳細が表示され、広告も掲載されています。
問題ないという方は、まず下記ボタンから『Snapwidget』へ行き「CREATE YOUR FREE WIDGET」をクリックしてアカウントを作りましょう。Facebookユーザーはお持ちのアカウントでログインできます。
1.ログイン後[SKIP THIS] > FREEの中から好きなデザインを選ぶ
2.「Username」からインスタアカウントと紐づける
3.項目ごとに設定 > [GET WIDGET]をクリックで埋め込みコードを取得
▲項目は下までスクロールして入力。必要に応じて一番下の「UPDATE PREVIEW」でプレビュー確認。
設定項目の意味
Thumbnail Saize
サムネイル画像（一つひとつの投稿画像）の表示サイズ
Layout(Columns X Rows)
Columnsが横、Rowsは縦にいくつ並べるかのレイアウト表示設定
Photo Padding
画像と画像の間の余白
Hover Effect
画像にマウスを合わせた際の動きを付けるか
Rsponsive
PCとスマホそれぞれの端末に合わせた表示（レスポンシブ）にするか
注意点、不具合と対処法
埋め込んだ投稿が削除されるとどうなるか、ほかのユーザーの投稿を埋め込む場合の注意点や不具合がある際の対処法を見ていきましょう。
埋め込んだ投稿が削除されると非表示になる
埋め込みはインスタの投稿を参照表示しています。投稿内容が変更されれば埋め込みの方にも反映されます。
投稿自体が削除されている場合は下記のように非表示となります。定期的に埋め込んだ投稿の更新・削除がないかチェックすると良いでしょう。
他ユーザーの投稿を埋め込む場合の著作権について
『Instagram』データに関するポリシーでは投稿の再シェアを許可しています。「再シェア」とは、インスタが提供するAPI（埋め込み機能など）を使ったネット上での投稿シェアを指します。
つまりInstagramの投稿を引用として、埋め込みで掲載すること自体は問題ありません。画像をいったん保存してから貼り付けるのはNGなので注意しましょう。
なお、許可なく勝手に掲載をしてほしくないと感じるユーザーもいます。もし投稿者本人から取り下げるようお願いされた場合には、掲載をやめるのがベターです。
埋め込みが表示されないときの対処法
Wi-Fiなどの通信環境を確認する
インスタの埋め込みに限らず、ページがうまく表示されない場合は真っ先に通信環境を確認しましょう。Wi-Fiやモバイルデータ通信がオフになっていたらオンにしましょう。
スマホはiOSやAndroidを最新版にアップデートする
最新版に合わせて仕様を更新しているサービスでは、iOSやAndroidのバージョンが古いと不具合が出やすくなります。端末のバージョンはこまめにアップデートをしましょう。手順は以下のとおりです。
【iPhoneの方】
[設定] > [一般] > [ソフトウェア・アップデート]から
【Androidの方】
[設定] > [端末情報] > [ソフトウェア更新]から
PCのウェブブラウザを最新バージョンにアップデートする
パソコンで埋め込みがうまく表示されない場合は、『 Google Chrome』『Internet Explorer』などのWebブラウザを最新バージョンにアップデートしましょう。
【『Google Chrome』の場合】
検索バー右端のメニュー[…] > [ヘルプ] > [Google Chromeについて] から
【『Internet Explorer』の場合】
検索バー右端の[歯車アイコン] > [バージョン情報] から
▲画像は『Google Chrome』。『Internet Explorer』も同じ位置に歯車アイコンがある。
上記でも解決しない場合にはサイトとの相性もあるため、使っているブログやサイトの運営に問い合わせしましょう。
『WordPress』だと『InstaShow Lite』などのプラグインを追加して解決する場合も。最終手段ですが、ブログによってはリンクを貼り付けるだけで「埋め込み」にできるものもあります。
まとめ
インスタの「埋め込み」で持っている他サイトに投稿を表示させることで、新しい間口からユーザーを引き込むことができます。自分以外のユーザーの投稿も埋め込みできるため、第三者の投稿（発言）は記事への信憑性にも繋がるでしょう。
デザインを変えたり自動更新仕様の埋め込みをするには外部ツールの利用が必要ですが、API廃止に伴い徐々に使用できなくなっていきます。必要な方は理解した上で活用してください。
こちらの記事もおすすめ
