Wix アプリ:Instagram フィードアプリを追加・設定する

読了時間:7分
Wix の Instagram フィードアプリを使用すると、視覚的に魅力的なカスタマイズ可能なフィードに最新の Instagram 投稿を表示することができ、エンゲージメントを高め、動的コンテンツでサイトを新鮮に保つことができます。
ブランドの紹介、商品の宣伝、最新情報の共有など、Instagram フィードアプリを使用してあなたのソーシャルメディアプレゼンスをサイトに接続し、訪問者によりインタラクティブでつながりのある体験を提供することができます。
注意:
2024年8月に、Wix は Instagram フィードアプリの更新バージョンを導入しました。旧バージョンを使用していて、新機能を利用したい場合は、簡単に新しい Instagram フィードアプリに切り替えることができます。
Instagram フィードアプリの UI を示したスクリーンショット。

ステップ 1 | Instagram フィードアプリを追加して接続する

まずはサイトにアプリを追加することから始めましょう。これは Wix App Market から直接行うことができます。
Wix エディタ
Wix Studio エディタ
  1. エディタ左側で「アプリ をクリックします。
  2. 検索バーに「Instagram Feed」と入力してアプリを検索します。
  3. サイトに追加」をクリックします。
  4. ページ上でアプリを選択します。
  5. 設定」をクリックします。
  6. 個人アカウントを接続」をクリックします。
  7. ポップアップで「許可する」をクリックします。
サイトに新しい Instagram アプリを追加するオプションを示したスクリーンショット。
注意:
Instagram ログインポップアップが開かない場合は、ポップアップブロックを無効にするか、ブラウザのバージョンをアップデートしてみてください。

ステップ 2 | 表示されるパーツをカスタマイズする

好みに応じて特定のパーツを表示または非表示にすることで、アプリをカスタマイズできます。たとえば、設定で該当するボックスにチェックを入れたり外したりするだけで、利用可能なコンテンツをすべて表示したり、ユーザー名などの特定の詳細を非表示にしたりすることができます。
Wix エディタ
Wix Studio エディタ
  1. エディタ内で Instagram フィードアプリをクリックします。
  2. パーツ」アイコン  をクリックします。
  3. 該当するチェックボックスを選択または選択解除します。
「パーツ」パネル
注意:
「すべてのコンテンツ」チェックボックスを選択すると、選択されていない場合でも、タイトル、ユーザーネーム、ハッシュタグ、記事を含むすべての利用可能なコンテンツが表示されます。

ステップ 3 | レイアウトをカスタマイズする

このセクションには、カスタマイズするアイテムが 2つあります。テキストレイアウトとフィードレイアウトです。

テキストのレイアウトは、1行テキストまたは複数行テキストから選択できます。テキストの配置を変更し、左、中央、右に設定することもできます。フィードのレイアウトでは、フィードの周りの余白のレベルを調整できます。
Wix エディタ
Wix Studio エディタ
  1. エディタ内で Instagram フィードアプリをクリックします。
  2. レイアウト」アイコン  をクリックします。
  3. レイアウトを「1行テキスト」または「複数行テキスト」から選択します。
  4. 配置を「」、「中央」、「」から設定します。
  5. 上下の余白」スライダーをドラッグして、テキスト間の余白の量を変更します。
  6. 左右の余白」スライダーをドラッグして、テキストの各側面の余白の量を変更します。
  7. フィード」下で「左右の余白」スライダーをドラッグして、フィードの各側面の余白の量を変更します。
  8. 画像を表示」トグルを有効または無効にして、フィードの画像を表示または非表示にします。

ステップ 4 | デザインをカスタマイズする

このパネルで利用可能なプリセットデザインオプションは、サイトのデザインにマッチするものです。デザインを閲覧し、サイトでの表示を確認します。好みのプリセットが見つかったら、「デザインをカスタマイズ」をクリックしてさらにプリセットをカスタマイズします。

デザインをカスタマイズする方法:

  1. エディタ内で Instagram フィードアプリをクリックします。
  2. デザイン」アイコン  をクリックします。
  3. 利用可能なオプションからプリセットを選択します。
  4. デザインをカスタマイズ」をクリックします。
  5. カスタマイズするものを選択します:
    • ウィジェット背景:
      • 色・不透明度:アプリの背景の色と不透明度を設定します。アプリの背景にガラス効果を追加するかどうかを選択します。
      • 枠線:フレームの枠線の色、太さ、間隔を変更して画像を目立たせます。
      • :画像フレームの角を丸めます。
      • :影を追加して画像に 3D 効果を与えます。影のさまざまな部分をカスタマイズして、画像を目立たせることができます。
    • テキストコンテナ:
      • 色・不透明度:アプリの背景の色と不透明度を設定します。
      • 枠線:フレームの枠線の色、太さ、間隔を変更して画像を目立たせます。
      • :画像フレームの角を丸めます。
      • :影を追加して画像に 3D 効果を与えます。影のさまざまな部分をカスタマイズして、画像を目立たせることができます。

よくある質問

詳細については、以下の質問をクリックしてください。

お役に立ちましたか?

|