All Articles

react-instagram-embedを使ってInstagramを組み込む

Reactで作ったウェブサイトにInstagramの投稿を埋め込みたい時は、「react-instagram-embed」を使います。

react-instagram-embedのDEMO

アプリIDとClient Access Tokens

react-instagram-embedは、Instagram oEmbedを使っており、以前は不要だったClient Access Tokensが必ず必要となりました。 絶対に「App Access Tokens」を使ってはいけません

アプリIDとClient Access Tokensの取得方法

  1. Facebook個人アカウントを作成する。
  2. Facebookページを作成して、ビジネスアカウントを作成する。
  3. アプリを作成する
  4. アプリダッシュボードでoEmbedを検索して、許可する。
  5. アプリダッシュボードでアプリIDを検索して、メモする。
  6. アプリダッシュボードのサイドバーで「設定 > 詳細設定」の順にクリックし、クライアントトークンを検索して、メモする。
  7. 5,6で得たアプリIDとクライアントトークンを下記のように結合して使用します。
const appID = 'アプリID';
const clientToken = 'クライアントトークン';
const clientAccessToken = `${appID}|${clientToken}`

react-instagram-embed : InstagramEmbed

react-instagram-embedでInstagramの投稿を表示するコンポーネントは、InstagramEmbedです。

InstagramEmbedは下記のプロパティを持ちます。

url

表示したいInstagram投稿のURLを設定します。 このプロパティは必須プロパティでString型の値を設定する必要があります。

clientAccessToken

下記のように、アプリIDとクライアントトークンから作った文字列を設定します。

const appID = 'アプリID';
const clientToken = 'クライアントトークン';
const clientAccessToken = `${appID}|${clientToken}`

このプロパティは必須プロパティでString型の値を設定する必要があります。

maxWidth

表示するコンポーネントの最大幅を設定します。 このプロパティは数値型の値を設定する必要があります。 デフォルト値はundefinedで、設定できる最小サイズを320です。

hideCaption

キャプションを非表示にするかどうかを設定します。

  • true: キャプションは表示されません。
  • false: キャプションは表示されます。 デフォルト値はfalseです。

containerTagName

InstagramEmbedのコンテナのタグを文字列で指定します。 デフォルト値は'div'です。

onLoading

Instagram投稿の読み込み開始時に呼ばれるコールバック関数を設定できます。

onSuccess

Instagram投稿の読み込み成功時に呼ばれるコールバック関数を設定できます。

onFailure

Instagram投稿の読み込み失敗時に呼ばれるコールバック関数を設定できます。

onAfterRender

Instagram投稿のレンダー後に呼ばれるコールバック関数を設定できます。

injectScript

{Boolean} Default true

protocol

{String} Instagram API script protocol. Default '' same as current protocol This property needed if you use device's file system, for example, Electron, Cordova apps