在您的 Webflow 网页上插入交互式 Twitter 分享按钮

重要的： 本指南利用 Webflow 的嵌入组件来整合个性化代码。嵌入元素可在任何付费网站方案以及核心、增长、代理和自由职业者工作区方案中使用。 

利用动态嵌入允许您为网站上的内容设计个性化的 Twitter 分享按钮——例如来自博客文章汇编、音乐评论、活动等的材料。 

在本教程中，您将发现： 

1. 从 Twitter 获取嵌入代码的程序
2. 在您的 Webflow 网页上嵌入交互式 Twitter 分享按钮

如何从 Twitter 获取嵌入代码 

要从 Twitter 获取嵌入代码： 

1. 访问 Twitter 嵌入生成器
2. 按 Twitter 按钮
3. 选择 分享按钮
4. 打 设置自定义选项
5. 在 您想预填充推文文本吗？ 部分 — 稍后，你将用鲜艳的文字替换它
6. （可选）配置其他自定义选项（例如按钮比例等） 
7. 按 更新 
8. 按 复制代码 复制您的嵌入代码

如何在 Webflow 网页上插入交互式 Twitter 分享按钮

重要的： 确保您已创建 CMS 汇编（例如“博客文章”、“音乐评论”等）并创建了至少 1 个事件汇编元素。CMS 提供了有用的模板来帮助您构建汇编。

在这里，我们将研究在您的网页上插入一个交互式 Twitter 共享按钮来传播来自任何 CMS 汇编的内容。 

我们将分两步进行： 

1. 为你的推文文本建立一个汇编字段
2. 生成动态嵌入 

为你的推文文本建立一个汇编字段

您可以为推文文本设计一个新的明文字段（即，当网站访问者单击集成的 Twitter 分享按钮时，您希望合并到推文中的文本），或者使用现有的编译字段。 

为你的推文文本构建一个新的编译字段： 

1. 揭开 CMS 面板
2. 将鼠标悬停在你的合辑上，然后点击设置“齿轮”图标显示 
3. 按 添加新字段
4. 挑选 纯文本
5. 为你的字段指定一个名称（例如“推文文本”） 
6. 按 保存字段

生成动态嵌入

动态嵌入仅对动态内容有效，这意味着您只能将它们附加到汇编页面或固定页面上的汇编列表中。您需要将 Twitter 分享按钮嵌入合并到与您想要分享的内容（例如“博客文章”、“音乐评论”、“食谱”等）链接的汇编页面，或将汇编列表加入到您打算在 Twitter 上分享内容的汇编中。

要附加动态嵌入：

1. 导航 添加面板 > 先进的
2. 包括一个 嵌入 元素到画布
3. 将 Twitter 分享按钮嵌入代码粘贴到代码编辑器中 
4. 在代码中的“data-text=”后面找到你在 Twitter 自定义选项中输入的示例文本
5. 突出显示引号内的示例文本
6. 按 添加字段
7. 选择您想要分享内容的汇编字段（例如“推文文本”）
8. 按 保存并关闭 

准备完毕后，首次推出您的网站，公开展示您的新颖 Twitter 分享按钮。一旦网站访问者点击您的 Twitter 分享按钮，他们的推文将自动填写您合辑中每一项的合辑字段值。 

专家提示： 您可以利用汇编页面和汇编列表中的条件可见性来隐藏没有推文文本的汇编元素的 Twitter 共享按钮。

‍重要的： 您的 Twitter 分享按钮不会显示在 Designer 画布上 — 换句话说，您无法在 Designer 中预期分享按钮，而是会显示一个占位符。发布或导出您的网站后，Twitter 分享按钮将在您放置它的位置展示（即展示）。如果您需要在将您的网站发布到自定义域之前预览分享按钮，您可以在 webflow.io 暂存子域上启动您的网站。