2020-09-29
ipad-pro-on-white-table

インスタグラムをブログやウェブサイトへ埋め込む方法と埋め込みインスタ活用術

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

目次

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

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

インスタグラムの各投稿には埋め込みコードが付与されています。このコードをコピーして、埋め込みたいブログやウェブサイトの編集(テキスト)画面に貼り付けるだけで、簡単に埋め込むことが出来ます。以下、ステップを見ていきましょう。(なお基本の方法ではストーリーズは埋め込めませんので、後述の他の方法を検討して下さい。)

埋め込みコードを投稿から取得する(パソコンの場合)

パソコンのインターネットブラウザ上でインスタグラムを表示し、埋め込みたい投稿を選択。投稿右上にある3つの点をクリックします。
instagram-browser-version-three-dots
3つの点をタップすると出てくるポップアップの中に「埋め込み」ボタンが出てきます。こちらをクリックして、埋め込みコードをコピーします。
instagram-embed-button
なお、埋め込みインスタにキャプション(テキスト部分)を追加するかどうかを選ぶことが出来ます。
copy-instagram-embed-code
これでコピーは完了です。この後すぐに貼り付け作業ができない場合は、コピーしたコードをなくさないように、メモ帳などに念のため貼り付けておくと良いでしょう。

ウェブサイトやブログの編集画面に貼り付ける

ワードプレスの場合

テキストエディタで、本文の埋め込みたい場所にコピーした―コードを貼り付けます。
embed-instagram-wordpress
これで作業は完了です。例えばキャプションを追加しないで埋め込んだインスタはこのように表示されます。

 

View this post on Instagram

 

A post shared by EmbedSocial Japan (@embedsocialjapan) on

埋め込みコードを投稿から取得する(スマホのアプリの場合)

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

スマホのインスタグラムアプリでも、投稿の右上に3つの点が出てくるのですが、これをタップしても埋め込みボタンは出てきません。埋め込みボタンは現在、インターネットブラウザ(サファリ、Googleクロム、インターネットエクスプローラーなど)のみに対応しているためです。そのため、インスタグラムのアプリ上で埋め込みたい投稿を見ている場合は、以下の作業を行ってください。

三つの点をタップして「リンクをコピー」をタップして、URLをコピーします。
instagram-mobile-share-link
インターネットブラウザ(サファリやGoogleクロムなど)のURL入力欄にコピーしたリンクを貼り付けて、改めてブラウザ上で同じ投稿を開きます。この状態で右側の3つの点をクリックすると、今度は「埋め込み」ボタンが出てきますので、タップして埋め込みコードをコピーします。
get-instagram-embed-code

あとは先ほどと同じです。コピーしたコードをウェブサイトやブログの編集画面(テキストエディタ)に貼り付けると、埋め込み完了です。

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

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

(1)HTMLコピペ

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

(2)API対応埋め込みツール

API対応埋め込みツールを使う方法です(APIとはインスタグラムと他のアプリを連動させるための仕様書のようなものとお考え下さい)。インスタグラムが公開する最新のAPI対応埋め込みツールを使うと、難しいコーディングなしで、複数投稿の一括埋め込みが可能になり、豊富なデザインやインサイトなど便利な機能も使えるようになります。ストーリーズが埋め込めるツールもあります。有料の場合が多いのですが、価格の幅は広く月々数千円から使えるものあります。

(3)自分でAPI利用

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

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

ウェブサイトやブログにワードプレスを使っている方は、ワードプレスのプラグインの検索ページから埋め込みツールを探すことが出来ます。Googleで「インスタグラム 埋め込み ツール」といったキーワードで検索してもよいでしょう。

選ぶ際には機能や価格などとともに、「新APIに対応しているかどうか」を確認しましょう。インスタグラムは2020年にAPIの大幅な変更を行っているため、新API対応していないとインスタグラムを正常に埋め込むことができませんので、注意が必要です。

こちらも読む:2020年 旧Instagram API廃止の影響および新APIのポイントと対応策

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

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

埋込インスタグラムにCTAボタンを設置して購買行動に直結させる

インスタグラムの投稿をウェブサイトに埋め込み、それぞれの投稿にCTAボタンを設置する例です。「予約する」「購入する」などのCTAボタンをクリックしたリンク先を、皆さんのウェブサイトの予約ページやネットショッピングサイトにすれば、インスタを見た消費者をまっすぐ購買行動に誘導しやすくなります。
ここでは試しに「テスト」というボタンを付けて当社のお問い合わせページにリンクさせた埋め込みインスタを載せてみました。


インスタグラムを見てCTAをクリックするだけで購入画面に移動させることが出来るので、購入までのアクションが少なく、「衝動買い」を後押ししたり、購入画面にたどり着く前に面倒になり購入をやめるといった取りこぼしが防止できそうです。

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

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

ハッシュタグキャンペーン事例 フジパン「メロンパンサンド選手権」
消費者参加型イベント事例 福島県花き振興協議会「ふくしまわたしのおうち花フォトコンテスト」

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

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

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

こちらも読む:

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

せっかく時間を使って作成し投稿したSNSコンテンツはとことん活用して、皆さんのビジネスや活動の勢いを加速していきましょう!

関連記事

share-your-voice
10月 29, 2020

インスタグラムのストーリーで簡単に口コミ…

インスタグラムを使って集客したい、商品やサービスを広めたい、と思っている皆さん。インスタグラムを使っ…

10月 20, 2020

Googleマイビジネス(GMB)に登録…

Googleを使って今いる場所の近くでお店や施設を検索すると、検索結果の上のほうに写真や星評価付きで…

10月 16, 2020

WEBサイトでストーリーが作れる『AMP…

AMPはWEBサイトをスマホ端末でより高速に表示させることができる技術として知られていますが、サイト…

10月 14, 2020

【フィード機能】ウィジェットのレイアウト…

2020年10月のアップデートにより、Instagram・Twitterなどソーシャルメディア投稿の…