皆さん、こんにちは。okamoです。
今回から新企画**「実録:ITよろず相談シリーズ」**を始めます! これは、私が実際に受けたITに関する相談や質問、そしてその解決プロセスをTips集として共有していくコーナーです。
記念すべき第1回目のテーマは、**「ホームページにInstagramの投稿を埋め込む方法」**です。
Web制作の現場では定番の要望ですが、久しぶりに触ると「あれ? ボタンどこいった?」となることも。実際のチャットのやりとりをベースに、初心者の方にもわかりやすく解説します。
相談:「埋め込みボタンが見当たりません」
ある日、相談者さんからこんな相談が届きました。
インスタの埋め込みの件ですが、やってみようと思ったら「埋め込み」というボタンが見つからなくなっていました。 システム変わりましたかね? アドバイスください。
Instagramの仕様は頻繁に変わるので、ドキッとしますよね。実はこれ、**「デバイス」**による違いが大きな原因でした。
解決策:PCブラウザでの作業が確実です
相談を受けた当時(約1年前)、Webサイトやブログに埋め込むための「埋め込みコード」を発行できるのは、**「PCのWebブラウザ版のみ」**という仕様でした。
※現在はスマホWeb版から埋め込みコードを取得できるようになっていますが、仕様変更が激しいため、Web制作の作業フローとしては**「PCのWebブラウザ版」で行うのが最も確実で操作もしやすい**です。
今回は、PCを使って確実にコードを取得する方法をご紹介します。
図解:Instagram投稿を埋め込む手順
では、PCを使って実際に埋め込みコードを取得し、ホームページに表示させるまでの手順を解説します。
手順1:PCで投稿を表示しメニューを開く
まず、PCのブラウザでInstagramにログインし、埋め込みたい投稿を表示させます。 投稿の右上にある「…(3点リーダー)」アイコンをクリックしてください。

手順2:「埋め込み」を選択
表示されるメニューの中から、「埋め込み」をクリックします。

手順3:埋め込みコードをコピー
コードが表示されます。「キャプションを追加」にチェックを入れると投稿の文章も一緒に表示されます。お好みで設定し、「埋め込みコードをコピー」という青いボタンをクリックします。

手順4:HTMLに貼り付け
コピーしたコードを、ホームページのHTMLソースコード内の表示させたい場所に貼り付け(ペースト)します。

完成!
うまくいくと、以下のようにWebページ上でInstagramの投稿が表示されます。

トラブルシューティング:表示されない時は?
相談者さんとのやりとりの中で、**「手順通りやったのに写真が表示されない」**というトラブルも発生しました。
「写真動画のリンクに問題があるか削除された可能性があります」になって写真が出ませんでした。
考えられる原因
検証した結果、特定のアカウント内でも「埋め込める写真」と「エラーになる写真」がありました。明確な公式発表はありませんが、経験則として以下の要因が影響することがあるようです。
- 日本語ハッシュタグの影響:エラーになった投稿には
#●●●のように日本語のハッシュタグが含まれていました。 - 投稿の鮮度:投稿直後すぎる場合、API等の反映ラグでうまく外部表示できないケースがあります。
運用のアドバイス
また、この「埋め込みコード」で貼り付けた投稿は、Instagram側で新しい投稿をしても自動で入れ替わりません。あくまで「その瞬間のその投稿」を切り取って貼っているだけです。
ですので、ホームページでの運用としては、
- 「最高の一枚(奇跡の一枚)」を選んで掲載する
- そこからInstagramのプロフィールページへ誘導する
という使い方が、メンテナンスの手間も少なく、かつ効果的でおすすめです。
WebサイトにSNSを連携させたい時は、ぜひ「PCから」試してみてください!
余談:映えない「okamoのインスタ」とアカウント停止騒動
最後に余談ですが、今回の記事作成のために、私okamoのInstagramアカウントを新設しました。

「映え」とは無縁の、Markdownで書かれた企画書のスクリーンショットなどをアップしていたのですが……なんと、Instagramのルール違反警告メールが届き、一時アカウントが停止(サスペンド)されてしまいました。
Your Instagram account has been suspended. This is because your account, or activity on it, doesn't follow our Community Standards.
「コミュニティ規定に従っていない」とのことで、考えられる理由としては以下のような項目が挙げられていました。
- 第三者の知的財産権の侵害
- スパム
- 誤情報
- アカウントの信頼性
自分で書いたドキュメントのスクショだったのですが、写真ではなく文字ばかりの画像を連続で投稿したことが、システム側に「スパム」や「不審なコンテンツ」と判定されたのかもしれません。
結果として、写真はすべて削除することに。現在は「写真なし」のアカウントだけがひっそりと残っています。
「映えないインスタ」を作ろうとしたら、**「存在すら許されないインスタ」**になりかけました(笑)。皆さんも、Instagramの運用ルールにはくれぐれもご注意ください。
コメントを投稿するにはログインが必要です。