Media Entity Instagram

Drupal MediaにInstagram連携機能を提供し、FacebookのGraph APIを使用してInstagram投稿をメディアエンティティとして埋め込むことができます。

media_entity_instagram
7,994 sites
24
drupal.org

インストール

Drupal 11, 10 v4.0.0
composer require 'drupal/media_entity_instagram:^4.0'
Drupal 9, 8 v3.0.8
composer require 'drupal/media_entity_instagram:^3.0'

概要

Media Entity Instagramは、InstagramコンテンツをDrupalコアのMediaシステムに統合するメディアソースプロバイダーモジュールです。サイト構築者がInstagram投稿専用のMedia Typeを作成でき、Drupalのメディア管理機能を使用してサイト全体に埋め込むことができます。

このモジュールはFacebookのoEmbed API(Graph API経由)を活用してInstagram投稿のメタデータとHTML埋め込みコードを取得します。このアプローチにより、Instagram投稿がオリジナルのスタイリングとインタラクティブ性を保持したまま適切にレンダリングされます。InstagramのAPIは現在Facebookのエコシステムの一部であるため、モジュールの動作にはFacebook Developer認証情報(App IDとApp Secret)が必要です。

主な機能には、メタデータの自動抽出(作成者名、ショートコード)、キャプション表示オプション付きのカスタマイズ可能な埋め込み表示、コンテンツの選択と挿入を容易にするDrupalのMedia Libraryとのシームレスな統合があります。

Features

  • Instagram投稿とIGTVコンテンツを処理するためにDrupalのoEmbedシステムを拡張するInstagramメディアソースプラグインを作成
  • 最大幅とキャプション表示を制御するオプション付きの専用フィールドフォーマッター(Instagram embed)を提供
  • DrupalのMedia Libraryと統合し、Instagramコンテンツを簡単に追加するためのカスタム追加フォームを提供
  • ショートコード、作成者名、サムネイル、埋め込みHTMLを含むInstagram URLからメタデータを抽出
  • instagram.com/p/、instagr.am/p/、instagram.com/tv/、instagr.am/tv/を含む複数のInstagram URL形式をサポート
  • Instagram埋め込みを処理しフロントエンドで適切にレンダリングするためのJavaScript統合を含む
  • 新しいInstagramメディアタイプを設定する際にソースフィールドを自動的に作成・設定

Use Cases

コンテンツへのInstagram投稿の埋め込み

コンテンツ編集者はInstagramメディアエンティティを作成することで記事にInstagram投稿を追加できます。メディア作成時にInstagram投稿URL(例:https://instagram.com/p/ABC123)を貼り付けるだけで、いいね、コメント、プロフィールリンクを含む完全なインタラクティブ機能で投稿が埋め込まれます。

ソーシャルメディアフィードの構築

サイト構築者はInstagramメディアのViewsを作成してキュレーションされたソーシャルメディアフィードを表示できます。他のソーシャルメディアモジュールと組み合わせることで、サイト上で包括的なソーシャルメディア統合が可能になります。

WYSIWYG向けMedia Library統合

CKEditorとMedia Libraryを使用する場合、編集者は使い慣れたMedia Libraryダイアログを通じてリッチテキストフィールドに直接Instagram埋め込みを挿入でき、一貫したコンテンツ管理ワークフローを維持できます。

IGTV動画の埋め込み

このモジュールは通常の投稿に加えてIGTV URL(instagram.com/tv/)もサポートしており、標準的な投稿と並んで長尺のInstagram動画コンテンツをサイトに埋め込むことができます。

Tips

  • developers.facebook.comでFacebook Appを作成し、oEmbed Read機能を有効にして認証情報を取得してください
  • このモジュールはinstagram.comと短縮形のinstagr.am URL形式の両方をサポートしています
  • 元の投稿テキストなしで視覚コンテンツのみを表示したい場合は、フォーマッターの「Hide caption」オプションを使用してください
  • Instagramメディアのソースフィールドはプレーンテキストまたはリンクフィールドのいずれかにでき、URLの保存方法に柔軟性があります

Technical Details

Admin Pages 1
Instagram設定 /admin/config/media/instagram-settings

oEmbed APIを介してInstagramコンテンツを取得するために必要なFacebook API認証情報を設定します。これらの認証情報は、Instagram埋め込みデータを処理するFacebookのGraph APIへのリクエストを認証します。

Hooks 1
hook_oembed_resource_url_alter

Instagramリクエスト用のoEmbedリソースURLを変更します。このhookはURLを変更してFacebookのGraph APIエンドポイントを使用し、必要なアクセストークン(App IDとApp Secretで構成)を追加します。

Troubleshooting 4
Instagram埋め込みが読み込まれない、または「Facebook credentials have not been configured」エラーが表示される

/admin/config/media/instagram-settingsに移動し、Facebook App IDとApp Secretを入力してください。これらの認証情報は、oEmbed APIアクセスが有効になっているFacebook Developerアプリから取得する必要があります。

Instagram投稿が埋め込みコンテンツではなくプレーンテキストとして表示される

Instagramメディアタイプの表示が「Instagram embed」フォーマッターを使用するように設定されていることを確認してください。/admin/structure/media/manage/[type]/displayで表示設定を確認してください。

APIレート制限または認証エラー

Facebook Developer PortalでFacebook AppがoEmbed Read権限で適切に設定されていることを確認してください。本番レベルのアクセスが必要な場合は、アプリが開発モードになっていないことを確認してください。

CKEditorプレビューで埋め込みコンテンツがレンダリングされない

これは既知の制限です。Instagram埋め込みはCKEditorのiframeプレビューでは完全にレンダリングされない場合がありますが、公開されたページでは正しく表示されます。

Security Notes 2
  • Facebook App SecretはDrupal設定に保存されます。設定が公開リポジトリにエクスポートされないようにしてください。
  • このモジュールはDrupalのセキュリティアドバイザリポリシーの対象であり、セキュリティ問題は公式のDrupalセキュリティプロセスを通じて処理されます。