2021.6.25

2021.8.20

Instagramの「埋め込み」機能の使い方 投稿をブログやサイトに表示しよう

Instagramの「埋め込み」機能の使い方 投稿をブログやサイトに表示しよう

instagramの投稿をサイトなどに載せるための、「埋め込み」機能があります。

埋め込みすると聞くと少し難しく感じるかもしれませんが、とても簡単です。
instagramのコードをコピーして、載せたい場所にペーストするだけです。

こちらの記事では、埋め込み機能の具体的な使い方を詳しく紹介しています。ぜひ参考にしてください。

「埋め込み」機能とは?

instagramの投稿をサイトなどに、貼り付けるのが「埋め込み」です。
埋め込みした所からinstagramへ移動し、投稿者のアカウントやプロフィールが見られるので、フォロワーを増やすことに繋がります。

また、埋め込みができるのは、公開されているアカウントに限られます。
公開されているアカウントなら、他の人の投稿を埋め込むことができるので、親しい友人やビジネスパートナーなどの投稿も拡散可能です。

ただし、相手の了承がなく無断で載せると、嫌な気持ちになるユーザーも中にはいるもの。
面識のない人の投稿を埋め込む時は、直接コンタクトを取って許可を得てから載せるようにしましょう。

「埋め込み」機能の使い方

アプリは埋め込みができず、Webバージョンでしか使用できないので注意しておきましょう。
コードをコピーする際には、スマホより、画面の大きいパソコンを使うと良いです。

それぞれ埋め込みの手順を紹介していきます。

パソコンで埋め込む方法

パソコンで、instagramの投稿を埋め込みする順序はこちらです。

  1. HTMLに変換可能か確かめる
  2. 自分のアカウントにログイン
  3. 投稿を選ぶ
  4. コードをコピーする
  5. HTML編集でペーストする

1. HTMLに変換可能か確かめる

最初に埋め込みするサイトが、HTMLに変換可能か確かめてください。
HTMLに変換できないと埋め込みできないので、はじめに確認しておきましょう。

2. 自分のアカウントにログイン

Webバージョンのinstagramからログインをします。ユーザーネームとパスワードを入れます。

3. 投稿を選ぶ

自分以外に他の人の投稿も埋め込みはできますが、公開アカウントに限られるので確認します。
埋め込みができるのは、写真や動画のみになり、ストーリーズやIGTVは埋め込みが不可です。

4. コードをコピーする

埋め込みたい投稿を選んだら、画面右上にある「…」をクリックします。
そうすると「埋め込み」が選択できるので、さらにクリック。
埋め込みコードが表示されコピーをします。
「キャプションを追加」に最初からチェックが付いていますが、外すとキャプション(投稿の文章)がない状態の埋め込みコードを入手できます。

5. HTML編集でペーストする

コードをサイト内に載せたい所に、貼り付けをします。
貼り付ける時は、HTMLの入力画面にしてください。

WordPressの場合は、「テキスト」モードにするとHTML編集になります。
コードを貼り付けたら、英数字が並んだ状態になっています。
その後、HTML編集を解除して本文を見てみると、instagramの投稿が埋め込みされています。

スマホで埋め込む方法

アプリは埋め込みができません。
スマホから埋め込む方法は、Webバージョンのinstagramを使用します。

スマホはパソコンに比べて画面が小さく、使用しづらいデメリットがあります。
そして、スマホのサイトがHTML編集に対応していないケースも考えられるので、その場合はパソコンを使うと良いでしょう。

スマホで埋め込みをする手順はこちらです。

  1. HTMLの入力ができるか確かめる
  2. Webバージョンのinstagramにログインする
  3. 投稿を選んでコードをコピーする
  4. コードをペーストする

1. HTMLの入力ができるか確かめる

まずは、ブログやサイトが HTML編集できるか確かめます。
パソコンでHTMLの編集ができるブログだったとしても、スマホには対応していないこともあるので、気をつけておきましょう。

2. Webバージョンのinstagramにログインする

ブラウザからwebのinstagramにログインして、自分のアカウントを開きます。

3. 投稿を選んでコードをコピーする

投稿を選んだら、パソコンの時と同様に「…」をタップし、埋め込みを選択します。
埋め込みコードが表示されるので、コピーをタップします。
「キャプションを追加」にチェックがされているので、キャプションを非表示にしたいなら外しておくと良いです。

4. コードをペーストする

HTML編集に切り替えて、埋め込みコードをコピーしたものを貼り付けます。

今度は入力形式を戻し、貼り付けたコードが本文で画像として表示されています。
ブログを投稿してみて、実際に埋め込みした画像が表示されているか確かめておきましょう。
「instagramでもっと見る」をタップしてみると、投稿したアカウントへ移動できます。

中央揃えする方法

instagramの埋め込みをして、画像がサイト中央に表示されなかった場合、HTML編集で埋め込みコードの両脇に「center」を入力しましょう。

具体的には、「<center>(埋め込みコード)</center>」と入力してください。

サイズを変える方法

埋め込んだ画像は、サイズを変えることも可能です。
コードの中に、下記の内容が表示されています。

  • max-width:540px;(画像の横幅のこと)
  • min-width:326px;(画像の縦幅のこと)

埋め込みコードには、上記のように画像サイズを表示している部分があるので、数値を変えるとサイズも変更します。

具体的には「max-width:250px; min-width:250px;」と数値を250に設定すると、埋め込んだ画像は小さく表示されます。反対に画像を大きくしたい場合は、数値を上げると良いです。

「埋め込み」機能のメリット

埋め込みにはどんなメリットがあるのか、6つ紹介していきます。

CTAボタンを設置することでコンバージョン率アップ

埋め込んだ投稿にCTAボタンを取り付けると、サービス購入ページに直接移動できます。

投稿されたサービスや商品が欲しいとユーザーが思っても、どこから購入して良いか分かりづらいと、購入までに至らないでしょう。
CTAボタンを設置すると、商品を買いたい気持ちを持続させることが可能なので、ユーザーの離脱率は少なくなります。

CTA(コールトゥアクション)とは、ユーザーにして欲しい行動を促すためのボタンを言います。
具体的には、商品やサービスを紹介するページに、「詳しくはこちら」などといったボタンを取り付けると、ユーザーは購入ページに移動できます。

他にもinstagramのCTAボタンは下記の種類があります。

  • インストールする
  • 購入する
  • 予約する
  • リンクを開く
  • 申し込む
  • お問い合わせ
  • 登録する 等

指定のハッシュタグが付いた投稿をまとめられる

instagramの投稿で、ユーザーにある特定のハッシュタグを付けてもらう条件のキャンペーンがありますが、当てはまる投稿を、1つにまとめて表示できる機能があります。

自社のサービスを宣伝するために行われたキャンペーンの場合、instagramで投稿を閲覧した人に知ってもらえるだけではなく、投稿を1つにまとめることで、「自分もサービスを購入してキャンペーンに参加したい」と促すこともできます。

情報をいち早く伝えられる

Instagramで情報を発信する時は、基本的にinstagramのユーザーに向けてですが、アカウントを持っていない人や、利用すらしていない人には情報を届けづらい点があります。

しかし、同様の情報をブログやサイトでも見られるようにできれば、たくさんの人に情報を発信することが可能です。埋め込んだinstagramの投稿は、更新のたびに反映すれば、わざわざサイトを更新する必要がなくなります。

具体的には、飲食店の営業時間が変わった時など、instagramで発信しておけば、サイト内の埋め込み投稿は更新しなくても良いということです。

センス良い画像に仕上がる

instagramには編集できる機能があり、画像をオシャレにアレンジすることが可能です。
ブログやサイトの画像をこだわって良いものにしたいなら、instagramで編集した画像を埋め込むとセンス良いサイトに仕上がるでしょう。

自社アカウントのアピールに有効

自社の公式アカンウトとしてinstagramを運用しているのに、フォロワーが増えづらいという人も多いでしょう。そういった場合は、自社ホームページでinstagramのアカウントをアピールすることは効果的です。

自社の商品を魅力的に撮影した写真や、動画などを埋め込んで表示していれば、instagramのフォロワーの獲得に繋がります。

ユーザーの口コミが伝わりやすい

購入した商品の良さや使い心地などを投稿しているユーザーは多くいますが、その口コミ投稿をブログやサイトに載せることができます。
ECサイトを利用している人なら、商品の良さをアピールするのに良い手段になるでしょう。

さらに、投稿にある「いいね」の数が多いほど、商品の魅力はより伝わりやすくなるというもの。
ただし、投稿した内容は、投稿した人に権利があるので、ブログやサイトに埋め込む際には、直接本人に許可を得る必要があります。

注意点

投稿を埋め込む時にはいくつか気をつけておくポイントがあるので、紹介していきます。

非公開のアカウントは利用できない

他の人や自分の投稿でも、アカウントが非公開(鍵アカ)の場合は、埋め込みができないのです。

普通は、投稿した画像の右上にある「…」をクリックすると、「埋め込み」を選ぶ画面が出てきますが、非公開のアカウントだと表示されません。
自分のアカウントが非公開だった場合は、公開にするだけで埋め込みは可能です。

投稿者の許可を得る

自分以外の投稿を埋め込みたい時は、DMからでも直接本人に連絡して、埋め込んで良いか確認を取るようにしてください。

少し前までは、instagramの画像の使用について、埋め込みで表示されたものは「本人の許可は不要」と法廷で言われていました。
しかし、instagram社が2020年に発表した内容は、「埋め込み機能を使用しても著作権侵害にあたる」となりました。

もし著作権の侵害にあたると、「10年以下の懲役または1,000万円以下の罰金」が科せられてしまうこともあるため、他人の投稿を埋め込む時は、必ず本人の許可を得てからにしましょう。

表示されないこともある

instagramの投稿と埋め込んだ投稿は連動しているため、instagram上で削除したり、内容を変えたりすると埋め込みも変更されます。

instagramで投稿した文章を変えると、埋め込んだ投稿も同じく変わるというもの。
削除した場合は、「リンクに問題があるか、投稿が削除された可能性があります」と表示されます。

自分のアカウントだと投稿した内容を変えたり、削除したりしたことは把握していますが、自分以外のアカウントの場合は、いつ変更があったのか不明なので、埋め込んでいるなら、たまに投稿を確かめておくと良いでしょう。

ストーリーは埋め込み不可

ストーリーの投稿は24時間と制限されているため、埋め込み機能を使用することはできません。とはいえ、ストーリの投稿をどうしても埋め込みたいと望むなら、メニューボタンをクリックして「投稿としてシェア」を選択し、投稿にあげます。

ストーリーが動画だと静止画になってしまいますが、前述した通りの手順で埋め込みコードをペーストするとサイトに投稿を掲載できます。

埋め込みが表示されない時の対策法

コードをコピーしてペーストしても、投稿がうまく表示されないことがあるというもの。
そのような時には、どのような対策をしたら良いのか紹介していきます。

端末とブラウザはバージョンアップする

端末やブラウザのバージョンが昔のままだと、いろいろと不具合が起きやすくなるものです。
よって、埋め込みコードをペーストしただけだと、画像が表示されないことがあるので、バーションが最新かどうか確かめましょう。

通信環境は正常か

Wi-Fiなどの通信がきちんと正常ではないと、埋め込みをしても画像が表示されないことがあります。
通信環境が整っていない場所や、繋がりにくい場所ではないか確かめておきます。

HTMLにペーストしているか

サイトの本文に埋め込みコードをペーストしていないか、確認してみてください。
コードを貼り付ける時は、必ずHYML編集の画面にしないと、埋め込みができません。どこにコードをペーストしているのか、再度確認してみましょう。

埋め込み機能の具体的な使い方まとめ

instagramの埋め込み機能を使う時は、公開アカウントの投稿のみです。そして、アプリからだと埋め込むことはできないので、なるべく画面の大きいパソコンから作業することをおすすめします。

スマホでもWebバージョンに切り替えることで、埋め込み機能を利用できるようになります。埋め込みをすることで、自社のサービスをアピールできることや、フォロワーの獲得に期待できることなど、メリットがたくさんです。
ただし、2020年からはinstagramの投稿した人に著作権があるので、他の人の投稿を自分のサイトに埋め込む際には、直接本人に許可を得るようにしてください。

埋め込む方法はとても簡単で、コードをHYML編集画面に貼り付けるだけです。
instagramの埋め込み機能をぜひ活用して、役立ててください。

Shopify experts(エキスパート)ならShopi Lab

監修者
佐藤沙知
佐藤沙知

shopi lab SNSコンサルタント

大手SNSマーケティング企業で、インフルエンサーマーケティング、SNSコンサル、SNS運用を手掛け、
現在アパレル、美容系など多くの企業へのコンサルタントとして活動中。

この監修者の記事一覧

あなたにおすすめの記事

よく読まれている記事

この記事を見た人はこんな記事も見ています

お問い合わせ

Shopi Lab(ショピラボ)

Shopi Lab(ショピラボ)をご覧のみなさまへ

Shopi Lab(ショピラボ)では、Shopifyのアプリや構築制作方法、運用マーケティング手段についてはもちろん、自社のECサイトを構築・運用する上で必要な情報を紹介しております。現在日本では開発業者の数が少ないため、検索しても役立つ情報が少ないことが現状です。そのためShopi Lab(ショピラボ)では、今後Shopifyの導入を検討している企業担当者様へ向けて、正確な役立つ情報を発信して行くことを心掛けております。 企業担当者様については、Shopify導入に対してご不明点や懸念事項がございましたら、お問い合わせ窓口よりお気軽にお問い合わせください。 また他カートをご利用中でShopifyへの乗り換えをご検討中の企業様についても、ご支援が可能でございます。世界シェアNo.1のECプラットフォームが日本で展開を初めて2年が経ちましたが、Shopi Lab(ショピラボ)ではさらにShopifyの魅力を発信していきます。