使用 Elfsight 將 Instagram feed 新增到您的網站

重要的： 以下指南示範如何使用 Webflow 中的嵌入功能整合自訂程式碼。任何付費站點計劃以及核心、成長、代理商和自由工作者工作空間計劃都可以使用此功能。

本教學涵蓋以下主題： 

1. 在 Elfsight 中建立 Instagram feed 小工具的過程
2. 在您的 Webflow 網站上嵌入 Instagram feed 小工具

在 Elfsight 中建立 Instagram feed 小工具的步驟

初步行動： 如果您還沒有這樣做，請 註冊一個 Elfsight 帳戶.

創建您的 Instagram feed 小工具

若要建立 Instagram feed 小工具，請按照以下步驟操作： 

1. 訪問 Elfsight 的應用程式目錄
2. 選擇 Instagram 動態 選項
3. 為您的網站選擇首選的 Instagram feed 範本（例如，個人資料小工具、網格等）
4. 繼續使用選定的模板
5. 在 Instagram 上決定 來源類型，例如公共帳戶和主題標籤、您的企業帳戶或您的個人帳戶
6. 輸入相關內容 Instagram 來源 資訊 - 使用者名稱（例如，@webflow）、主題標籤（例如，#webflow）、位置（例如，加利福尼亞州）等。
7. 點選 添加
8. 對於您希望包含的任何其他 Instagram 來源，請重複步驟 6 和 7

您可以利用 過濾器 和 排序 有效管理您的 Feed。過濾器有助於顯示或隱藏包含特定單字或主題標籤的帖子，而排序使您可以設定 Feed 中 Instagram 帖子的顯示順序。

設計您的 Instagram feed 小工具

貼文

導航至 郵政 左側面板上的標籤可自訂來源的外觀，例如僅圖像或完整卡片顯示，以及每個貼文上可見的元素（按讚數、留言數、貼文文字等）。您還可以確定單擊時的貼文行為，例如是否在彈出視窗中開啟或在 Instagram 上開啟、彈出視窗中顯示哪些元素等。

佈局

訪問 佈局 選項卡來配置小部件的佈局。在這裡，您可以選擇滑桿或網格格式，指定列數和行數，調整影像之間的間隙，並在提要小工具上方新增標題。

外貌

內 風格 部分，從預設的配色方案中進行選擇或為您的 Feed 定義自訂顏色。透過選擇下面的元素選項來修改疊加層、按鈕、連結、背景和文字的顏色 自訂元素。您也可以選擇使用 自訂CSS 用於高階佈局管理。

請注意： 不同的 Elfsight 小工具會根據所選的提要範本提供不同的顏色選項。

客製化

在裡面 設定 部分，您可以指定 Feed 的顯示語言。

儲存您的 Instagram feed 小工具

完成 Instagram feed 小工具的客製化後，按一下 發布。隨後，按一下 複製程式碼 檢索您的小部件的 HTML 程式碼。 

在您的 Webflow 網站上整合 Instagram feed 小工具

現在，您可以使用嵌入功能將 Instagram feed 小工具插入您的即時 Webflow 網站。  

要將 Instagram feed 小工具整合到您的網站上： 

1. 在設計器中造訪您的網站
2. 導航 新增面板 > 先進的 並添加一個 嵌入 元素到畫布
3. 將 Elfsight 小部件的 HTML 程式碼貼到程式碼編輯器中 
4. 儲存您的更改

準備好後，發布您的網站以查看新添加的 Instagram feed 小部件的運作情況。 

重要的： 您的 Instagram feed 小工具不會顯示在 Designer 畫布上，這表示您無法在 Designer 本身內預覽小工具。相反，將顯示一個佔位符。發布或匯出網站後，小工具將出現在指定位置。若要在自訂網域上上線之前進行預覽，可以選擇發佈到 webflow.io 暫存子網域。