小工具 »社交媒体图标小组件

本指南将为您介绍如何向边栏或注脚添加社交媒体按钮，以便人们可以通过您首选的社交网络与您联系。

💡

除了这个添加社交图标小工具的选项外，您还可以选择一个包含专用社交菜单的主题，从中可以添加社交媒体帐户的链接，它们将以图标的形式显示在您的站点上。您也可以按照这些说明，使用社交链接区块在站点上的任何位置添加您的社交媒体网络的链接。

目录

1. 可用图标
2. 社交媒体图标小组件
3. 添加社交媒体图标小组件
4. 重新排序图标
5. 添加自定义社交媒体图标
6. 示例和示例图像
7. 常见问题解答

---

可用图标

我们支持添加各种网络图标。

点击此处展开可用图标列表。

500px

Amazon

Apple

Bandcamp

Behance

CodePen

DeviantArt

Digg

Dribbble

Dropbox

电子邮件地址（如果您的电子邮件是 me@yourgroovydomain.com，则在帐户 URL 字段中输入 mailto:me@yourgroovydomain.com）

Etsy

Facebook

Flickr

Foursquare

Goodreads

Google+

Google

GitHub

Instagram

iTunes

领英

中

Meetup

Pinterest

Pocket

Ravelry

Reddit

RSS 源

Skype

SlideShare

Snapchat

SoundCloud

Spotify

StumbleUpon

Tumblr

Twitch

Twitter

Vimeo

VK

WordPress

Yelp

YouTube

💡

在上方可用的图标中没看到您使用的社交网络？

您可以遵循下方添加自定义社交图标中的步骤，添加其他任何社交网络或外部平台。

---

社交媒体图标小组件

社交媒体图标小工具可在主题的任何小工具区域显示链接到您的社交媒体帐户的小图形。在您的社交媒体个人资料中添加链接后，图标会自动在您的站点上显示，让访客可通过您的首选网络与您联系。

 

添加社交媒体图标小组件

1. 转到我的站点 → 设计 → 定制
2. 点击小工具，您会看到主题支持的不同小工具区域。几乎所有主题都至少具有注脚小工具区域。有些主题还有边栏小工具或其他小工具区域。
3. 点击可用的小工具区域；在本例中，我们点击的是注脚小工具区域。
4. 点击添加小工具并搜索社交或浏览可用的小工具，以查找社交图标小工具。

注意：如果您安装了插件，则会在社交图标小工具标题的末尾处看到 (Jetpack)。

5. 点击小工具将其添加到您的小工具区域。
6. 定制各种显示选项，包括小工具的标题和图标的大小。

7. 添加您的首个社交网络个人资料链接。例如，https://www.facebook.com/WordPresscom/

📌

请确保添加完整的链接，包括站点地址的 https:// 部分。

8. 点击添加图标选项，为您的小工具添加更多社交图标。

点击“添加图标”按钮添加另一个社交图标

⚠️

在定制器的预览中，添加到社交图标小工具的每个链接都将自动显示为相应社交网络的图标。

如果您没有看到相应的社交网络图标，请检查以确保您输入的是指向社交网络的正确链接，包括地址的 https:// 部分。

添加好社交个人资料链接后，点击“发布”或“保存更改”，将社交图标小工具添加到您的站点。

您闪亮的新社交媒体图标现在已显示在您的站点上！

---

重新排序图标

您随时可以通过将图标拖放到所需顺序来更改图标的顺序。新顺序将在定制器的预览窗格中实时显示。

---

添加自定义社交媒体图标

站点上社交媒体图标的颜色取决于您使用的主题。如果您想要添加带有特定颜色的图标，或者希望更多地控制图标的显示方式，则可以使用文本小工具或自定义 HTML 小工具及一些 HTML 来添加自定义图标。如果您想要添加不太常见的社交网络图标，这也很有用。

第 1 步：找一些您喜欢的社交媒体图标，并将其上传到您的媒体库。

您可能已有一些想使用的图标，但如果没有，您可以在 Google 上搜索“免费社交媒体图标”。选择图片时，注意不要侵犯任何版权。找到一些您喜欢的图片后，将其下载到您的电脑中。

将图标上传到您的“媒体库”

1. 转到我的站点 → 站点 → 媒体 → 新增
2. 导航到您的电脑上保存要用作图标的图像的位置
3. 将图标上传到您的“媒体库”

获取社交媒体图标的链接

1. 转到我的站点 → 站点 → 媒体。
2. 点击您先前上传的社交媒体图标的图像，然后点击编辑。
3. 在 URL 选项下，点击复制将链接保存到电脑的剪贴板。
4. 点击完成退出媒体编辑器。

第 2 步：添加文本小工具或自定义 HTML 小工具并且使用 HTML 设置按钮的格式。

添加社交媒体图标小工具

确保您已按照上文获取社交媒体图标的链接中所述的步骤，获得已上传的社交媒体图标的链接。

1. 转到我的站点 → 设计 → 定制 → 小工具。
2. 选择您希望在其中添加图标的小工具区域。
3. 点击添加小工具，然后找到文本小工具或自定义 HTML 小工具
4. 点击小工具名称以添加小工具。

添加社交媒体图标小工具 HTML

如果需要，可以为小工具添加标题，然后按照如下结构，为您的小工具添加 HTML：

• 将参考链接地址 https://facebook.com/WordPresscom 替换为您的社交媒体个人资料的完整链接。
• 将链接 https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook1.png 替换为您已上传的社交媒体图标的链接。
• 可选：调整宽度和高度，使其达到您理想的图标尺寸。

对于要显示在站点上的每个图标，复制现有文本小工具或 HTML 小工具的 HTML 代码。

第 3 步：完成后，点击发布并查看您全新的社交媒体按钮！

示例和示例图像

如果您在 Web 上找不到社交媒体图标且希望获得一些示例，可以在此站点中查找更多信息。

要在小工具中使用这些图标，首先在设计 → 定制 → 小工具中创建空白文本小工具。

接下来，从社交媒体小工具页面中复制您喜欢的图标样式的代码区块：

常见问题解答

为什么社交媒体图标不显示？

如果您使用的是社交媒体网页地址的本地化版本，则社交媒体图标可能不会显示。您可以改为尝试使用社交媒体链接的全球版本替换本地部分。

示例：应将 https://www.pinterest.fr/yourpinterest/ 替换为 https://www.pinterest.com/yourpinterest/

本指南对您有帮助吗？

提供反馈