最終更新日 2022/10/07 投稿日 2020/09/29
ipad-pro-on-white-table

【2022年9月更新】インスタグラムをウェブサイトやブログに埋め込む方法と埋め込みインスタ活用術

【2022年9月更新】インスタグラムに魅力的な写真や動画を投稿したら、ウェブサイトやブログに埋め込んでみてはどうでしょうか。インスタとウェブサイトと連携させながら、商品やサービスへの共感を強める取り組みや、商品やサービスの購買行動に直結する仕組みづくりなど、様々な活用がぐっとしやすくなります。
今回はインスタグラムを活用するための第一歩、ウェブサイトやブログへの基本の埋め込み方と、埋め込んだインスタグラムの活用術について解説します。

目次

  1. インスタグラムの埋め込みとは
  2. インスタグラム発行コードをコピー&ペーストするだけ!基本の埋め込み方法
  3. インスタグラムを埋め込む3つの方法を改めて整理
  4. API対応「SNS埋め込みツール」を利用するには
  5. 埋め込みインスタ活用術(ショッピング、キャンペーン)
  6. さいごに SNSはウェブサイトと連携してもっと活用できる

インスタグラムの埋め込みとは

インスタグラムの埋め込みとは、画像や動画の表示機能、また各種リンクなどの機能を維持したまま、インスタグラム以外のウェブサイトやブログに表示させることです。

最近ニュースサイトで有名人のインスタグラム投稿の記事を見かけることが多いかもしれません。インスタグラムの埋め込み機能を使うと、これらの記事内でもインスタグラムの複数画像をスクロールしたり、動画を再生することができ、タップすればインスタグラムのオリジナルアカウントに行くことができます。インスタグラムの投稿そのものをアプリから引っ張ってきて、ウェブサイトに表示させているためです。

埋め込み方はいくつかあるのですが、シンプルな埋め込みは誰でも簡単にできます。以下にその方法をご紹介します。

インスタグラム発行コードをコピー&ペーストするだけ!基本の埋め込み方法

インスタグラムの各投稿(写真・動画)とリールには埋め込み用のhtmlコードが付与されています。このコードをコピーして、埋め込みたいブログやウェブサイトの編集(テキスト)画面に貼り付けるだけで、簡単にインスタを埋め込むことが出来ます。

なお、ストーリーには埋め込みコードが付与されていないので、この基本の方法では埋め込むことができません。後述の他の方法を検討して下さい。
また、スマホのアプリ上ではインスタグラムのhtmlコードを取得できないため、パソコンでの作業をお勧めします(スマホを使う方法もこのあと説明しますが、少し面倒です)。

ステップ1/2. 埋め込みhtmlコードをインスタグラム投稿から取得する(パソコンの場合)

パソコンのインターネットブラウザ(Google ChromeやSafariなど)でインスタグラムを開いて、埋め込みたい投稿を選択します。もしもみなさんが初めてパソコンでインスタグラムを開く場合は、ログインが必要になりますので、IDとパスワードを入力して進んでください。

パソコンでインスタグラムを開くとまずホーム画面が出てきます。その画面のタイムラインに並んでいる各投稿の右上に3つの点がありますので、そこをクリックします。
または、ホーム画面右上の自分のアイコンをクリックして自分のプロフィール画面に進んだ場合は、そこで一覧表示されている投稿やリールから埋め込みたい投稿をクリックすると、右上に3つの点が出てきますので、こちらをクリックします。

IG-post-three-dots
3つの点をクリックすると出てくるポップアップの中に「埋め込み」ボタンが出てきます。こちらをクリックして、埋め込み用のhtmlコードをコピーします。

IG-three-dots-menu

なお、埋め込みインスタにキャプション(テキスト部分)を追加するかどうかを選ぶことが出来ます。

IG-copy-embed-code

これでコピーは完了です。この後すぐに貼り付け作業ができない場合は、コピーしたコードをなくさないように、メモ帳などに念のため貼り付けておくと良いでしょう。

ステップ2/2. ウェブサイトやブログの編集画面に埋め込みコードを貼り付ける

ワードプレスの場合

ここではよく使われるワードプレスで説明しますが、基本的にはどのCMSでも同じで、html編集画面を開き、インスタグラムを埋め込みたい場所に埋め込みコードを貼り付けるだけです。ワードプレスの場合はテキストエディタを開き、本文の埋め込みたい場所にコピーした―コードを貼り付けます。

Paste-code-in-WP-text-editor

これで埋め込み作業は完了です。例えばキャプションを追加しないで埋め込んだインスタはこのように表示されます。

この投稿をInstagramで見る

 

EmbedSocial Japan(@embedsocialjapan)がシェアした投稿

(参考)インスタグラム埋め込みコードをスマホで取得する

スマホのインスタアプリでは「埋め込み」ボタンが出てこないので追加作業が必要

実はスマートフォンのインスタグラムアプリで投稿を表示した際にも投稿の右上に3つの点が出てくるのですが、これをタップしても埋め込みボタンは出てきません。埋め込みボタンは現在、インターネットブラウザ上のみに対応しているようです。そのため、インスタグラムのアプリ上で埋め込みたい投稿を見ている場合は、以下の追加作業を行ってください。

まずはインスタグラムのアプリを開き、埋め込みたい投稿を開きます。
次に投稿の右上にある3つの点をタップします。メニューが出てくるので「リンク」をタップして、投稿のリンクURLをコピーします。
copy-instagram-post-link
ここからはコピーしたリンクを、インターネットブラウザで開く手順です。
まず、インターネットブラウザを開いて、URL入力欄にコピーしたリンクを貼り付けて開きます。そうすると先ほど選んだ投稿が、アプリではなくブラウザ上で閲覧できます。
この状態で右側の3つの点をクリックすると、今度は「埋め込み」ボタンが出てきますので、タップして埋め込みコードをコピーします。
copy-embed-code-internet-browser
あとは先ほどと同じです。コピーしたコードをウェブサイトやブログの編集画面(テキストエディタ)に貼り付けると、埋め込み完了です。

インスタグラムを埋め込む3つの方法を改めて整理

以上の基本の方法を使えば、無料で簡単にインスタグラムを埋め込むことはできます。しかし一つ一つの投稿のコードをコピー&ペーストする作業が必要で、複数のインスタグラムを埋め込みたいときにあまり向いていません。また、デザインを選ぶことが出来ず、さらにストーリーも埋め込むことが出来ません。そこで、インスタグラムを埋め込む際には、先ほどの方法も含めて以下の3つの方法から、自分に合った方法を選びましょう。

(1)埋め込みHTMLコードをコピペ

上記で紹介したインスタ発行のHTMLコードをコピー&ペーストする方法です。カンタンで無料ですが、埋め込みコードを一投稿ずつコピー&貼り付けする必要があるため、たくさんの投稿を埋め込みたい場合は、手間がかかります。またストーリーズは埋め込むことが出来ず、デザインの選択肢もありません。

(2)「SNS埋め込みツール」を使う

インスタグラムを埋め込むためのSNS埋め込みツールを使う方法です。インスタグラムに対応しているSNS埋め込みツールはたくさんの製品が出ていますが、これらのツールを使うと、複数投稿の一括埋め込みが可能になったり、豊富なデザインで埋め込んだりすることが出来ます。CTAボタンを追加したりインサイトなど分析機能が付いているツールもあります。

これらのツールは難しいコーディング作業無しで使えるように工夫されています。そのためウェブデザイナーなどWeb制作のプロはもちろん、個人のブロガーや自営業者、そして企業のマーケティング・広報担当者など、幅広いユーザーに利用されています。

先ほど紹介した通り、基本の埋め込み方法ではストーリを埋め込むことができませんが、SNS埋め込みツールにはストーリーが埋め込めるツールもあります。

十分な機能を使うには有料の場合が多いのですが、価格の幅は広く月々数千円から使えるものあります。

(3)APIを利用して自作アプリを開発する

Meta(インスタグラム)が公開するAPI(異なるソフトウェアを連携させるためのルールとか仕様書のようなもの)を利用して自分でアプリを開発し、インスタグラムからデータを引っ張って埋め込む方法です。ある程度開発のスキルや知識があれば可能ではありますが、他の方法に比べて難易度は高いと言えるでしょう。インスタグラム公式サイトで開発者向けの情報が見られるので、詳しく知りたい方はアクセスしてみてください。

API対応「SNS埋め込みツール」を利用するには

国内外で多くのSNS埋め込みツールがリリースされています。インスタグラムだけでなく、Twitterなど他のSNSに対応しているものもあります。Googleで「SNS埋め込みツール」というキーワードで検索してみると、いろいろな製品を見ることが出来ます。ワードプレスを使っている方はプラグインの検索ページからも探すことが出来ます。

個人向けの比較的シンプルで安価なツールはインターネット上で申し込んで、自分のインスタグラムアカウントと接続すればすぐに使うことが出来るはずです。主に企業が使うようなツールはまずは問い合わせ、という形をとっているところが多いようです。

選ぶ際には機能や価格などとともに、最新のAPIに対応したツールかどうかを確認しましょう。インスタグラム等SNSのAPIは頻繁に更新されるため、最新のAPI対応していないと投稿を正常に埋め込むことができないなど不具合が起こるので注意が必要です。

私たちが開発しているSNS埋め込みツール「EmbedSocial(エンベッドソーシャル)」は、インスタグラムだけでなくTwitterやTikTok、Youtubeなど各種SNSのAPIを活用したツール開発の豊富な経験を活かし、常にプラットフォーマーからの更新情報を製品に反映させているため、様々な種類のSNS投稿を表示できます。

embedsocial-banner

埋め込みインスタグラム活用術(ショッピング、イベント)

さて、埋め込んだインスタグラム”埋め込みインスタ”はどのように活用できるのでしょうか。私たちが開発したインスタ埋め込みツール「エンベッドソーシャル」を使った場合を例に、埋め込みインスタ活用術をご紹介します。

埋込インスタでサイト更新不要の商品カタログを実現。CTAボタンで購買行動に直結も

インスタグラムの投稿をウェブサイトに埋め込み、それぞれの投稿にCTAボタンを設置する例です。
インスタの投稿をウェブサイトに埋め込んで商品カタログとしてウェブサイトで表示し、さらに「予約する」「購入する」などのCTAボタンを投稿に追加して、予約ページやeコマースサイトにリンクさせることもできます。

ここでは例として「お問い合わせ」や「もっと見る」というボタンを付けて当社のお問い合わせページにリンクさせた埋め込みインスタを載せてみました。クリックしてどのように動作するか確認いただけます。

埋め込みインスタを活用すればショッピングサイトの運用がより楽に

SNS埋め込みツール「エンベッドソーシャル」を使って一度ウェブサイトにインスタグラムを埋め込むと、その後は投稿が自動更新されます。つまり、インスタグラムに投稿するだけでウェブサイト上の埋め込みインスタも更新されるので、サイト側の作業不要で、常に最新の状態に保つことができます。

また、ウェブサイトではSNS上よりも多くの情報を提供できます。インスタグラムのアプリ上では伝えきれない情報や、ブランドの世界観なども一緒にユーザーに提示することができ、商品の良さだけでなくその背景にあるストーリーも伝えることでより購入を促す施策を打てるようになります。またCTAを使って、埋め込みインスタをクリックするだけで購入画面や問い合わせ画面に遷移させられるため、購入までのアクションが少なく買い物途中の離脱を防止することも期待できるでしょう。

埋め込みインスタグラムをユーザー巻き込み型のキャンペーンやイベントの会場化する

商品やサービスのユーザーにより作成されたコンテンツ、ユーザー生成コンテンツ(UGC)は広告に代わるコンテンツとして注目されています。商品やサービスを使った様子を指定のハッシュタグをつけて投稿してもらう「ハッシュタグキャンペーン」や、ハッシュタグを使ってコンテストへの出品を促すバーチャルイベントなどで、UGCを活用した例が多く見られます。

UGCは(ほとんどは)一般の人々による投稿なので、他の消費者の共感を生みやすく、また、ハッシュタグを通じて一つのイベントに参加しているような一体感を作りやすいのが特徴です。

当社のエンベッドソーシャル導入事例のページには多くの魅力的なハッシュタグキャンペーンの事例が掲載されています。事例はキャンペーンの種類、企業の規模、業界、いすれもバラエティに富んでおり、UGCを使ったマーケティング施策を検討されている皆様の参考になるはずです。

さいごに SNSはウェブサイトと連携してもっと活用できる

今回ご紹介したインスタグラムに限らず、SNSはウェブサイトと有機的に連携させることで、より多くの価値をもたらすことが出来ます。

こちらも読む:

Twitterの各パーツをブログやウェブサイトに埋め込む方法
TikTokをブログやウェブサイトに埋め込む方法とTikTokまとめデザイン事例
Youtube動画のサイトへの埋め込み|レスポンシブ対応・パラメータの設定方法
PinterestのボードをWEBサイトに埋め込む方法まとめ!

せっかく時間を使って作成した写真や動画ですから、SNSに載せただけではもったいない!今回のインスタの様に投稿をウェブサイトに埋め込んで連携すれば、SNSマーケティングの幅が少し広がりそうですよね。一度ぜひお試しください。

関連記事

9月 06, 2022

Embedsocial Japan株式会…

平素はEmbedSocialをご利用いただき誠にありがとうございます。 これまで合同会社basicm...

8月 22, 2022

InstagramやTikTokなどのU…

全世界15万ユーザー 全国400社以上の導入実績のハッシュタグキャンペーンツール Embedsoci...

8月 16, 2022

PinterestのボードをWEBサイト…

「Pinterest」はインターネット上に散らばる画像を簡単に検索・保存出来るサービスとして世界中で...

7月 15, 2022

Instagramの『リールズ』がEmb…

『Instagram リールズ』がEmbedSocialのフィード機能で収集できるようになりました!...