Reactで作ったウェブサイトにInstagramの投稿を埋め込みたい時は、「react-instagram-embed」を使います。
アプリIDとClient Access Tokens
react-instagram-embedは、Instagram oEmbedを使っており、以前は不要だったClient Access Tokensが必ず必要となりました。 絶対に「App Access Tokens」を使ってはいけません
アプリIDとClient Access Tokensの取得方法
- Facebook個人アカウントを作成する。
- Facebookページを作成して、ビジネスアカウントを作成する。
- アプリを作成する
- アプリダッシュボードでoEmbedを検索して、許可する。
- アプリダッシュボードでアプリIDを検索して、メモする。
- アプリダッシュボードのサイドバーで「設定 > 詳細設定」の順にクリックし、クライアントトークンを検索して、メモする。
- 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