使用 Elfsight 将 Instagram 信息添加到您的网站

重要的： 以下指南演示了如何使用 Webflow 中的嵌入功能集成自定义代码。此功能可在任何付费网站计划以及核心、增长、代理和 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 信息流小部件

现在，您可以使用嵌入功能将您的 Instagram 提要小部件插入到您的实时 Webflow 网站上。  

要将 Instagram 动态小部件集成到您的网站： 

1. 在设计器中访问您的网站
2. 导航 添加面板 > 先进的 并添加 嵌入 元素到画布
3. 将 Elfsight 小部件的 HTML 代码粘贴到代码编辑器中 
4. 保存更改

准备就绪后，发布您的网站以查看您新添加的 Instagram 提要小部件的实际运行情况。 

重要的： 您的 Instagram 动态小部件不会显示在 Designer 画布上，这意味着您无法在 Designer 中预览小部件。相反，将显示一个占位符。发布或导出网站后，小部件将出现在指定位置。要在自定义域上线之前进行预览，可以选择发布到 webflow.io 暂存子域。