ガイド/コンテンツの作成/埋め込み/Instagram フィードを表示する

Instagram フィードを表示する

Instagram アカウントの最新投稿の自動更新グリッドを表示するには、最新の Instagram 投稿ブロックを使用します。このガイドでは、最新の Instagram 投稿のフィードをサイトに追加する方法について説明します。

必須: Instagram のプロアカウント

Instagram のプロアカウント (ビジネスまたはクリエイター) を持っていれば、サイトに Instagram の投稿のフィードを表示できます。Instagram のプロアカウントは無料です。Instagram の新しいプロアカウントを作成できるほか、Instagram の既存の個人アカウントをプロアカウントに変換できます。

初めて WordPress.com アカウントを Instagram に連携すると、Instagram の個人アカウントをプロアカウントに変換するか、作成済みのプロアカウントを選択するよう求められます。

ステップ1: 最新の Instagram 投稿ブロックを追加する

最新の Instagram 投稿のフィードを表示する最初のステップは、最新の Instagram 投稿ブロックを追加することです。

以下の手順を実行して、最新の Instagram 投稿ブロックを追加します。

  1. WordPress.com サイトの固定ページ、投稿、テンプレートを編集します。
  2. 「+」ブロック挿入 (プラスアイコン) をクリックして「Instagram」を検索します。
  3. 「最新の Instagram 投稿」アイコンをクリックして、最新の Instagram 投稿ブロックを挿入します。
ブロックセレクターの「最新の Instagram 投稿」アイコンの周りにボックスが描かれている。

ブロックを追加する手順についてはこちらを参照してください。

ステップ2: Instagram に連携する

最新の Instagram 投稿ブロックを初めて追加する際は、Instagram アカウントを連携するよう求められます。プラグイン対応サイトの場合、サイトのプライバシー設定が「非公開」ではなく「公開」または「まもなく公開予定」モードに設定されている必要があります。

サイトを Instagram に連携するには、以下の手順を実行します。

  1. 最新の Instagram 投稿ブロック「Instagram に連携」ボタンをクリックします。
  2. ポップアップウィンドウで「許可」ボタンをクリックして連携を承認します。
  3. Instagram ウィンドウが閉じ、最新の Instagram 投稿のフィードが WordPress エディターに表示されます。

Instagram のコラボコレクション (会話に共有された投稿) は現時点では含まれません。

最新の Instagram 投稿ブロックの例に投稿が表示されている。
最新の Instagram 投稿ブロックの例

ステップ3: フィードをカスタマイズする

表示する投稿の数やモバイル端末での表示方法などの、最新の Instagram 投稿ブロックの設定を変更できます。

Instagram のフィード表示をカスタマイズするには、次の手順を実行します。

  1. 「最新の Instagram 投稿」ブロックをクリックして選択します。
  2. ブロック設定サイドバーが開きます。
  3. アカウント設定と表示設定をカスタマイズします。

カスタマイズオプションには以下があります。

アカウント設定: 連携した Instagram アカウントを表示します。アカウントを削除したり、別のアカウントを連携したりする必要がある場合は、そのアカウントを連携解除します。

表示設定: 表示される Instagram 投稿の数、使用する列の数、Instagram グリッドで各投稿を分割するスペースの量 (ピクセル単位で計算) を調整します。

モバイルで重ねる: 「モバイルで重ねる」を有効にすることで、左側のコンテンツが右側のコンテンツの上部に表示されます (デスクトップ画面のような横並びではなく)。これにより、モバイルの訪問者のエクスペリエンスが向上します。

高度な設定: 「高度な設定」タブでブロックに CSS クラスを追加することで、カスタム CSS を記述してブロックをスタイリングできます。ブロックへの CSS クラスの追加の詳細はこちらをご覧ください。

ブロック設定サイドバーが、最新の Instagram 投稿ブロックのアカウント設定と表示設定を表示している。

整列と幅: ブロックが選択されると表示されるブロックツールバーには、ブロックを左揃え、中央揃え、右揃えのいずれかにするオプションだけでなく、テーマでサポートされている場合にワイド表示または全幅表示を使用するためのオプションもあります。

ブロックツールバーの配置オプションが強調表示されている。

複数の Instagram アカウントを連携する

最大2つの Instagram アカウントを連携して、2つの「最新の Instagram 投稿」ブロックを使用できます (ブロックごとに1つのアカウントを使用できます)。このプロセスでは2つの異なる Instagram 認証情報が必要です。同じ認証情報で複数の Instagram アカウントを管理している場合、このプロセスは使用できません。

最初の Instagram アカウントをサイトに連携した後、以下の手順を実行して2つ目のアカウントを連携します。

  1. 新しいブラウザタブで、Instagram.com にアクセスして1つ目の Instagram アカウントからログアウトします。
  2. 2つ目の Instagram アカウントにログインします。
  3. 次のリンクをクリックして、サイトの「マーケティング連携」ページに移動します。
  4. 連携した Instagram アカウントの横にある下矢印をクリックします。
  5. 「Instagram」で「別のアカウントを連携」オプションを選択します。
  6. 連携すると、2つの「最新の Instagram 投稿」ブロックを使用できるようになります。

Instagram の連携を管理する

サイトの「マーケティング連携」ページから Instagram の連携を管理することもできます。

Instagram アカウントと WordPress.com サイトの連携を解除または再連携するには、次の手順を実行します。

  1. 次のリンクをクリックして、サイトの「マーケティング連携」ページに移動します。
  2. 連携した Instagram アカウントの横にある下矢印をクリックします。
  3. 「連係解除」ボタンをクリックして、アカウントとの連携を解除することを確定します。

次に、Instagram アカウントを再連携するか、「マーケティング連携」ページの「Instagram」の横にある「連携」をクリックして別のアカウントを連携します。

Copied to clipboard!