IGTVの動画をWEBサイトに埋め込み・活用する方法！

2021年4月のアップデートにより、SNS埋め込みツール『EmbedSocial』ではInstagramからIGTVの動画を取り込んでWEBサイトへと埋め込み表示をすることができるようになりました！実際の埋め込み方法や活用事例、埋め込み後に効果的に運用していく方法についてご紹介いたします。

EmbedSocialを使ってIGTV動画を埋め込む方法

EmbedSocialを利用すると、自社でAPIの開発を行うことなくIGTVの動画を収集・WEBサイトへ埋め込んでコンテンツとして活用いただくことができます。誰でも簡単に実装が可能な、EmbedSocialでの操作方法についてご紹介させていただきます。

EmbedSocialでの設定方法

1. 管理画面を開き、IGTVの埋め込みを希望するInstagramアカウントを入力します。

※初回設定時には、システムへのFacebookアカウントの接続等が必要となります。
詳しくはこちらをご覧くださいませ：Instagramアカウントの投稿を収集して表示させる方法

2. 該当のアカウントに紐づくInstagram投稿・IGTV動画の収集が完了しました。「ウィジェットを作成」をクリックして埋め込み用ウィジェットの編集画面へと進みます。

3. 以上の2ステップで埋め込み用ウィジェットの作成・コードの生成が完了します。最後に赤枠のコードコピーしてWEBサイトのbodyタグ内に埋め込むことで、プレビュー画面に表示された内容をそのままWEBサイト上で表示させることができます。

WEBサイト上ではプレビュー画面のまま下記のように表示され、IGTVをクリックした際にはポップアップ上で再生することが可能となっています。

想定されるご利用ケースごとの表示方法を解説！

ここからは実際に導入の想定されるご利用ケースごとに、EmbedSocialでの設定方法を解説いたします。

通常のフィード投稿と合わせて埋め込みを行う場合

IGTVの動画を収集する際にはアカウントに紐づくフィード投稿・IGTVがまとめて収集される形となるため、この場合にはデフォルトの設定のまま設置が行なえます。表示イメージは下記のとおりです。

IGTV専用の表示ウィジェットを作成を希望する場合

IGTVの動画を紹介する専用のウィジェット作成を希望される場合には、管理画面からウィジェットに表示させる投稿を選別することでIGTV動画のみを抽出して表示させることが可能になります。

運用上のポイント

管理画面の設定より「自動同期」をOFFにすると、紐付けたアカウントで新規投稿がされた際にもWEBサイト上では非表示の状態で管理画面へと投稿を収集してくることが可能なため、新規投稿の中からIGTVだけを都度表示ONへと変更し、WEBサイト上への掲出を行うといった運用を実施いただくことも可能です。

導入前後で発生する、よくある質問への回答

レイアウトの変更はできますか？

8種類のレイアウトからお選びいただけます。（※2020年4月現在）その中から、導入ケースの多い代表的なレイアウトを3つご紹介いたします。

「フィード」レイアウト

「Grid」レイアウト

「カルーセル」レイアウト

レイアウトのテンプレート変更以外にも、ヘッダー・SNSロゴの表示/非表示の切り替え、一度に表示させる投稿数の制御など管理画面から大部分の設定を変更することが可能で、カスタムCSSを追加してサイトデザインに合わせてレイアウトの細かな調整をいただくこともできます。

設定の変更後にコードの再埋め込みは必要ですか？

EmbedSocialウィジェットの埋め込み用コードを一度埋め込んで後には、管理画面から設定を変更した際にもコードの再埋め込みは必要ありません。初回の実装時のみエンジニアと共同で担当、その後はマーケティング担当者のみが運用を行うといったように作業を分担することができるのも大きな特徴です。

デザインは、レスポンシブ対応していますか？

2021年4月現在では、全てのレイアウトテンプレートがPC・スマートフォン両方からの閲覧に適したレスポンシブデザインに対応しています。上記の代表的なレイアウト3つは、実際にEmbedSocialを使って埋め込みを行っているウィジェットですので、この記事をPC・スマートフォン両方から閲覧すると確認が可能です。