インスタグラムをウェブサイトに埋め込みたい！基本から応用まで分かりやすく解説
今、インタグラムを営業やマーケティングに活用する企業が増えています。インスタグラムを自社サイトに埋め込み連動させれば、PR力をより高め、潜在顧客の掘り起こしにもつなげられるでしょう。本記事ではインスタグラムをウェブサイトに埋め込む方法やメリット、注意点などを解説します。
自社サイトにインスタグラム埋め込みを始める前に
スマホで写真アプリを見る人
写真共有SNSとして世界中で高い支持を得ている、インスタグラム。個人が写真をおしゃれに加工して魅せるツールとして利用されているだけでなく、企業が自社サイトに投稿を埋め込むケースも頻繁にみられるようになりました。自社サイトにインスタグラムを埋め込めば、自社サイトの魅力や見栄えをアップさせることが可能ですが、前提として注意しておきたいのが著作権問題です。まず初めに、インスタグラムの著作権の取り扱いについて知っておきましょう。
インスタグラム投稿の著作権問題
ウェブサイトに他人のインスタグラム投稿を埋め込む場合に気になるのが著作権です。そもそも利用規約には、インスタグラム運営側は投稿を自由に使用できる旨が記載されています。そのため、インスタグラムの公式APIを使って埋め込みされた画像に関しても、このルールが適用され、埋め込みで表示される画像であれば著作者の許諾が不要と解釈されていました。
しかし2020年、インスタグラム社は「埋め込みの画像使用は著作権侵害にあたる」という公式見解を発表しています。そのため、他者のインスタグラムをサイトに掲載する場合には、相手に埋め込みの許可をもらうことが必須です。自社サイトに他者の投稿を埋め込みする場合には、十分気を付けてください。
インスタグラムの埋め込み方法①埋め込みコードを利用する
ソフトウェアのソースコード
インスタグラムをウェブサイトに埋め込む方法は、大きく分けて2つあります。まず基本となるのが、インスタグラムが提供する埋め込みコードを使う方法。ここでは、インスタグラムの埋め込みコードを使ったやり方について手順やメリット、デメリットを詳しく解説します。
埋め込みの手順
埋め込み方法の手順1
1）埋め込みをしたい投稿ページを開く
2）ページ右上の…をクリック
2）ページ右上の…をクリック
埋め込み方法の手順2
3）ポップアップが開き、埋め込みを選択すると埋め込み用コードが表示される
埋め込み方法の手順3
4）コードをコピーしてサイトのHTML編集ページに貼る
コードのコピー時に「キャプションを追加」のチェックボックスのチェックを外すと、キャプションなしで埋め込みが可能です。キャプションとは、インスタグラムで写真とともにアップされるテキストのことで、ハッシュタグもキャプションの一部とみなされます。
表示サイズやレイアウトを変更する方法
埋め込みコードは、HTMLファイルやCMS編集画面に貼り付けて表示させます。HTMLタグを組み合わせて使用すれば、表示サイズやレイアウト変更も可能です。
例えば表示サイズを変更したい時には、貼り付けた埋め込みコードのサイズ部分を確認します。埋め込みコードのデフォルト設定では、「max-width:540px;min-width:326px;」となっています。max-widthとは、横幅のこと。min-widthとは、縦幅のことです。この数字部分を変更することで、表示サイズを変えられます。
画像を中央寄せにしたい場合は、貼り付けたコードを
メリットと注意点
埋め込みコードを使った方法のメリットは、無料で埋め込みが可能であることです。手順もシンプルで簡単ですので、専門の技術が無くても作業できます。注意点は、1投稿ずつしか埋め込みできないこと。そのため複数の投稿を埋め込みたい場合には、時間と手間がかかります。
また、埋め込みしたインスタグラム投稿は固定されます。そのため投稿が削除されれば、表示できなくなってしまうのです。さらにストーリーやIGTVの埋め込みはできないことと、埋め込みのデザインやレイアウトを選択できないのもデメリットと言えるでしょう。
インスタグラムの埋め込み方法②API対応の外部ツールを使う
スマートフォンの画面
インスタグラムの埋め込み方法には、外部ツールを利用する方法もあります。インスタグラムのAPIに対応したツールを利用すれば、自動更新やデザインの変更なども可能です。ここからは、外部ツールを利用したインスタグラムの埋め込みについて、おすすめのツール、メリットや注意点などを解説します。
外部ツールの使い方
使い方は、インスタグラムを埋め込みたいサイトに外部ツールをプラグインとして導入するだけです。例えばWordpressでは、プラグイン検索ページから探すことが可能。ただし導入する時は、2020年のインスタグラムAPI大幅改修後の新APIに対応しているものを選択することが重要です。
おすすめのAPI対応埋め込みツール
SnapWidgetのイメージ画像
via snapwidget.com
SnapWidgetは、複数のインスタグラム投稿を並べて表示できるツールです。更新も自動で可能。有償版もありますが、無料版でもこれらの機能が使えます。
INSTAGRAM JOURNALのイメージ画像
INSTAGRAM JOURNALは、自動的に画像が切り替わるスライダー表示や、写真を格子状に並べられるグリッドレイアウトに対応したツールです。有償のツールですが、画像表示が軽いのは魅力です。複数のインスタアカウント表示もできます。
Instagram Feedのイメージ画像
via smashballoon.com
Instagram Feedは、ウェブページのサイドバーやフッダーなどにインスタグラムを表示させたい時におすすめのツール。情報を定期的に取得してデータをキャッシュするため、表示が速いのが特徴です。無料版でも基本機能は使えます。
メリットと注意点
外部ツールを利用すれば、デザインが多彩で視覚的に訴えるウェブサイトにできます。ストーリーを埋め込むなど、埋め込みコードのコピー＆ペーストではできないことが、複雑なコーディング不要でできるのもメリットでしょう。
ただし、プラグインは有料なことが多いです。また、インスタグラム側のAPIが変更になると使えなくなることもあるため、注意してください。
インスタグラム埋め込み時の気になるポイントは？
拡大されたSEOの文字
ウェブサイトにインスタグラムを埋め込むと、さまざまなメリットが期待できますが、その反面、気になるポイントもあります。例えばSEOの観点から見た場合、インスタグラムをサイトに埋め込むことは評価に影響しないのかと気にされる人もいるようです。ここでは、この疑問について解説します。
SEOへの影響は？
ウェブサイトにインスタグラムを埋め込むということは、その分データ量が増え表示速度が落ちることにつながります。すると気になるのがSEOへの影響です。気になる場合は、表示枚数を減らしたり、キャッシュ機能などを利用したりして、表示速度の改善を行うことをおすすめします。
Clipkit®ならインスタグラムの埋め込みも簡単！
クリップキットのイメージ画像
企業が発信するオウンドメディアの多くがCMSを採用しています。SaaS型クラウドサービスである「ClipkitⓇ（クリップキット）」もその1つ。クリップキットでは、記事編集画面で簡単にインスタグラムの埋め込みが行えます。ここではクリップキットの魅力や、インスタグラムの埋め込み方法について紹介します。
直感的なUIが魅力のクリップキット
クリップキットは、月額使用料を払って利用するオンライン型CMSサービスです。ハードウェアやインフラ環境、エンジニアは不要で、自社サイトを簡単に立ち上げられるのが魅力。直感的に使えるUIで、ITの専門知識がない人でも簡単に記事の編集、投稿ができます。
インスタグラムの埋め込み方法
実際にクリップキットの編集画面でインスタ埋め込み方法を紹介します。
クリップキットでインスタ埋め込み時のイメージ
手順は、記事編集画面から「画像」を選択し、Instagramボタンを押します。そしてインスタグラムからコピーした埋め込みコードを貼り付けるだけです。とても簡単に、インスタグラムの埋め込みができます。
【2020年10月28日更新】Instagramの埋め込み方法が分からない｜ Clipkit (クリップキット) | ニュースサイト・オウンドメディア・キュレーションサイト構築CMS
記事の中にInstagramの投稿を埋め込みたい場合の操作方法をご紹介します。※Instagramの仕様変更により、2020年10月28日よりClipkitでのInstagram埋め込み方法も変更しておりますのでご注意ください※
インスタグラムの埋め込みを活用してユーザー獲得につなげよう
黄色い背景とインスタ画面
新しいターゲット層のユーザー開拓に一役買うかもしれない、企業インスタグラム。インスタグラムを自社サイトに埋め込み活用することで、サイトでは伝えきれなかった企業の魅力を発信できるのではないでしょうか。インスタグラムを効果的に活用して、サイトへの流入を増やし、マーケティングや顧客獲得につなげてくださいね。
またインスタグラム以外にも、マーケティングや自社PRに活用できるSNSはたくさんあります。詳しくはこちらの記事を参考にしてみてください。
SNSの種類とそれぞれの特徴とは。マーケティングに有効なSNSを見つけよう -
SNSとは、インターネット上でコミュニケーションを図れるサービスを指します。TwitterやInstagram、Facebookなど、SNSの種類は豊富で、それぞれに特徴があります。本記事では、SNSとソーシャルメディアの違いから、代表的なSNSの種類を解説。併せてSNSとオウンドメディアの活用方法も紹介します。
taakaakoo56 スマートメディア CMS事業部ライティングディレクター
コンテンツマーケティングのためのメディアサイト構築をライティングディレクターとして支える。担当する企業は冠婚葬祭系、ファッション系などのSEO記事。元IT屋の経験を活かし、誰でも分かるコンテンツ制作にまい進中。
1 件
