Elfsightを使用してウェブサイトにInstagramフィードを追加する

重要： 次のガイドでは、Webflow の埋め込み機能を使用してカスタム コードを統合する方法を説明します。この機能は、有料のサイト プラン、および Core、Growth、Agency、Freelancer Workspace プランで利用できます。

このチュートリアルでは、次のトピックについて説明します。 

1. ElfsightでInstagramフィードウィジェットを作成する手順
2. Webflow ウェブサイトに Instagram フィード ウィジェットを埋め込む

ElfsightでInstagramフィードウィジェットを作成する手順

予備的な措置: まだお済みでない場合は、 Elfsightアカウントを登録する.

Instagramフィードウィジェットの作成

Instagram フィード ウィジェットを作成するには、次の手順に従います。 

1. 訪問 Elfsight のアプリ カタログ
2. を選択 Instagram フィード オプション
3. ウェブサイトに適した Instagram フィード テンプレート (プロフィール ウィジェット、グリッドなど) を選択します。
4. 選択したテンプレートで続行
5. Instagramで決める ソースの種類公開アカウントやハッシュタグ、ビジネスアカウント、個人アカウントなど
6. 関連する Instagramソース 情報 — ユーザー名 (例: @webflow)、ハッシュタグ (例: #webflow)、場所 (例: カリフォルニア) など。
7. クリック 追加
8. 追加したいInstagramソースがある場合は、手順6と7を繰り返します。

活用できる フィルター そして ソート フィード管理を効果的に行うことができます。フィルターを使用すると、特定の単語やハッシュタグを含む投稿を表示または非表示にすることができ、並べ替えを使用すると、フィード内の Instagram 投稿の表示順序を設定できます。

Instagramフィードウィジェットのスタイル設定

投稿

に移動 役職 左パネルのタブでは、画像のみの表示やカード全体の表示など、フィードの外観や、各投稿に表示される要素（いいね数、コメント数、投稿テキストなど）をカスタマイズできます。また、投稿をクリックしたときの動作（ポップアップで開くか Instagram で開くか、ポップアップにどの要素を表示するかなど）を決定することもできます。

レイアウト

アクセス レイアウト タブをクリックしてウィジェットのレイアウトを設定します。ここでは、スライダー形式またはグリッド形式を選択したり、列数と行数を指定したり、画像間の間隔を調整したり、フィード ウィジェットの上にタイトルを含めたりすることができます。

外観

以内 スタイル セクションでは、あらかじめ設定されたカラースキームから選択するか、フィードのカスタムカラーを定義します。オーバーレイ、ボタン、リンク、背景、テキストの色を変更するには、 要素をカスタマイズする. 利用することもできます カスタム CSS 高度なレイアウト管理を実現します。

ご注意ください： さまざまな Elfsight ウィジェットでは、選択したフィード テンプレートに基づいてさまざまな色のオプションが提供されます。

カスタマイズ

の中に 設定 セクションでは、フィードの表示言語を指定できます。

Instagramフィードウィジェットを保存する

Instagramフィードウィジェットのカスタマイズが完了したら、 公開. 次に、 コードをコピー ウィジェットの HTML コードを取得します。 

WebflowサイトへのInstagramフィードウィジェットの統合

埋め込み機能を使用して、ライブ Webflow サイトに Instagram フィード ウィジェットを挿入できるようになりました。  

Instagram フィード ウィジェットを Web サイトに統合するには: 

1. デザイナーでサイトにアクセスする
2. 案内する パネルを追加 > 高度な そして追加する 埋め込み キャンバスに要素を追加する
3. コードエディターにElfsightウィジェットのHTMLコードを貼り付けます。 
4. 変更を保存する

準備ができたら、サイトを公開して、新しく追加した Instagram フィード ウィジェットの動作を確認します。 

重要： Instagram フィード ウィジェットはデザイナー キャンバスには表示されないため、デザイナー内でウィジェットをプレビューすることはできません。代わりに、プレースホルダーが表示されます。サイトを公開またはエクスポートすると、ウィジェットが指定された場所に表示されます。カスタム ドメインで公開する前にプレビューするには、webflow.io ステージング サブドメインに公開するという方法があります。