InstagramをWEBページに埋め込む方法・APIツールの注意点

Instagramには投稿を埋め込むコードはPCブラウザでのみ表示されます。

埋め込みコードはその投稿のみに固定され、更新はされません。

APIツールを埋め込めば情報が自動で更新されます。提供サービスは有料が多いです。

Instagramの埋め込み方法

今回はWEBページにInstagramの投稿を埋め込む方法をご紹介します。

早速具体的な埋め込み手順からご紹介します。

PCブラウザでInstagramを開く

まずはPCでInstagramを開きましょう。WEBページ（ブラウザ）からでないと埋め込みコードは表示されません。

Instagramはこちら

埋め込みコードの表示

自分が埋め込みをしたい写真投稿を表示させたら、投稿の右上にある「…」マークをクリックしましょう。

メニューの中から「埋め込み」をクリックします。

上記の様なウィンドウが出ますので、「埋め込みコードをコピー」のボタンをクリックしましょう。

これで埋め込みコードを取得する事ができました。

HTMLソース上にコードを貼り付ける

埋め込みたいWEBページのHTMLソース上にコードを張り付けます。

表示枠は埋め込みコードで修正するのではなく、張り付け場所の枠で調整しましょう。

これで埋め込みは完了です。

表示がされない場合はjavascriptなどが有効になっているかどうかを確認してくださいね。

WEBページに埋め込む際の注意

Instagramを埋め込む際はいくつか注意事項があります。いくつかご紹介しましょう。

埋め込んだ投稿で固定される

Instagramのコード埋め込みの場合は、TwitterやFacebookと違って埋め込んだ枠部分が更新されたりしません。

埋め込まれた投稿記事で固定されて変わらないのです。

上記埋め込み情報はこの状態から変わらない。

本当は自動で更新されると嬉しいのですが、通常の埋め込みではそれはできません。

もちろんInstagramへのリンクなどは表示されます。

埋め込みコードはスマホアプリからは取得できない

InstagramはPCからの場合はWEBサイトとして、スマホからはスマホアプリとして利用します。

しかしスマホアプリでは、「…」メニューの中に埋め込みコードは表示されません。

スマホアプリの「…」メニューを押した状態。

埋め込みコードが表示されるのは、PC版のWEBサイトのみです。

ですので埋め込みコードを表示させる場合は、同じ投稿をPCのブラウザで開く必要があります。

その他

埋め込んだ状態のデザインは変更する事ができませんし、さらにストーリーズも埋め込むことができません。

不正に利用されないように、いろいろ制限がされている訳ですね。

API対応埋め込みツールの利用

Instagram側が独自で出力するコードを埋め込んでも、その投稿で固定されるのは説明した通りです。

しかしInstagramの公開するAPI対応埋め込みツールを利用すれば、TwitterやFacebookの様に自動で情報が更新されます。

APIとはインスタグラムと他のアプリを連動させるための仕組みです。

APIツールは豊富な機能がある

インスタグラムが公開する最新のAPI対応埋め込みツールを使うと、以下の便利な機能が使える様になります。

APIツールが公開されている訳ですから、知識と時間があればツールを手作りでカスタマイズ・埋め込みする事が可能です。

本記事では知識と時間を省くため、そのツールを提供しているサービスを紹介します。

これらはほとんどが月額利用料が発生するツールとなっており、月額数百円から使えます。

InstaWindow

InstaWindowは、インスタグラムの写真を9枚までサイトに埋め込めるツールです。

InstaWindowはこちら

現在2,000以上のサイトで利用されていて、簡単に設置ができるブログパーツです。

注意！以前は使えていたが今は表示されない

月間3万PVまでの読込回数を限度とした個人利用であれば、Freeプランとして無料で利用できていました。

しかし現在はこのツールを使っても表示がされない様です。

Instagram側のAPI仕様が変わった事が原因と思われます。

SnapWidget

このサービスもAPIツールを利用したもので、会員登録する事で無料で利用ができます（一部有料のサービスあり）。

SnapWidgetはこちら

APIコード取得までの手順

会員登録

WEBページを開いたら、左の「GET A FREE WIDGET」をクリックします。

ユーザー名、メールアドレス、パスワードを登録して、会員登録をしましょう。

APIツールの種類の選択

まずは下にある「CHOOSE A SERIVCE」をクリックします。

するとWhich service would you like to display photos from?と表示されるので、上の画像の様に左の「Instagram」を選択します。

埋め込みレイアウトの選択

What layout would you like to use?と表示されるので、希望するレイアウトを選択します。

Great! Now let's configure your widget and add it to your site.と表示されたら、「CONFIGURE WIDGET」を押しましょう。

Instagramのユーザー名と詳細設定

まずは自分のInstagramのアカウントを入れましょう（他の人のアカウントを入れる事はできません）。

必要な項目を変更したら「GET WIDGET」を押すと埋め込みコードが表示されますので、それをWEBページに貼り付けます。

一押し人気コーナー紹介