社交媒体

在你的网站上添加社交媒体按钮可以帮助增加用户互动，增加你的网站和社交页面的流量。

在这篇文章中，我们将向你展示如何在Webflow的元素面板中添加两个社交媒体元素:

1. Facebook上的点赞按钮
2. 一个推特跟踪和推特按钮

添加一个Facebook点赞按钮

从左侧工具栏，单击加号(添加按钮)，并在Components下找到Facebook元素。将它拖到您的设计中。

一旦你将Facebook按钮添加到画布中，按如下方式设置它:

1. 连接你的Facebook URL(或者你想展示点赞的URL)
2. 自定义Facebook按钮的布局和大小
3. 指定Facebook按钮区域设置

连接你的Facebook URL

在Facebook按钮设置中，输入您想要连接到该按钮的页面的URL。Facebook会自动拉入并显示你选择的页面的喜欢。这可以是你的Facebook页面或你想要展示Facebook点赞的网站URL。

如果你想连接多个唯一的Facebook url，你可以添加多个Facebook按钮到你的项目。

自定义Facebook按钮的布局和大小

默认情况下，Facebook按钮会显示在你连接的Facebook页面上的点赞数旁边。在Facebook按钮设置中，你可以自定义按钮和点赞数的显示方式。

您可以在按钮设置中选择3个布局选项:

• 标准:在一行中显示“喜欢”按钮和文本摘要
• 箱:显示“喜欢”按钮和数量喜欢在一个盒子，堆叠垂直
• 按钮:折叠'喜欢'按钮和数量喜欢在一个单一的按钮

在按钮设置中，您还可以设置按钮的自定义宽度和高度。为此，在输入字段中输入所需的宽度和高度。

指定Facebook按钮区域设置

您可以使用Locale设置指定Facebook组件的区域和语言设置。

添加Twitter关注和tweet按钮

就像我们在Facebook上做的那样，从Add面板中拖动Twitter按钮。

选择按钮类型:

1. 推按钮
2. 按按钮

创建一个推特按钮

推特按钮允许用户从他们的推特个人资料中快速分享到你的网站的链接或网站上的特定页面。推特按钮有助于驱动从Twitter到您的网站的流量，并增加您的内容的可见性。

将Twitter按钮添加到画布并选择推特按钮选项，可以更新推特按钮设置:

1. 输入共享URL:当用户分享您的页面时，这个URL将填充tweet
2. 输入tweet文本:自定义文本，将预先填充分享tweet
3. 显示或隐藏泡沫: Twitter给了你显示一个气泡的选项，但因为Twitter不再拉数字，它显示为一个省略号，你可能想要隐藏它。
4. 选择按钮大小

创建一个Twitter关注按钮

跟随按钮允许用户快速找到并跟随您的Twitter个人资料，推动流量从您的网站到您的Twitter个人资料，并增加与您的网站的访客的参与度。

将Twitter按钮添加到画布并选择遵循按钮选项，可以更新按钮设置:

1. 输入你的Twitter账号:Twitter账户链接到follow按钮(没有@符号)
2. 显示或隐藏泡沫:这将显示所提供句柄的关注者数量
3. 选择按钮大小

要在页面上同时添加tweet和follow按钮，请在页面上添加两个单独的Twitter按钮。