对于外贸网站来说，在 Footer 底部添加社交媒体图标（微信 / Instagram / Facebook / LinkedIn）不仅是基础操作，更是提升客户信任度、增强品牌外链权重、构建多触点沟通链路的关键动作。

但对于很多新手来说：

• 图标该从哪里来？

• 如何正确添加到 footer？

• 图标 hover 如何变色？

• 微信二维码如何插入？

今天我们就来做一篇完全小白可复制执行的图标添加实操教程，从零开始，一步步带你打通网站与社交平台。

推荐阅读：一站式社媒营销：统一管理Facebook 、LinkedIn，提升品牌互动

外贸网站上线后的推广路线图及保姆级教程（SEO + 谷歌广告 + 社媒引流）

---

一、为什么社交媒体图标一定要放在 Footer？

因为 Footer 是访问者每个页面都会看到的区域，也是外贸网站默认的品牌信用区 + 联系方式聚合区。

放在 Footer 的好处：

✓ 提升品牌可信度

客户可以找到你真实存在的社交媒体账号，不担心是假站。

✓ 增加沟通入口，提高询盘概率

特别是 WhatsApp / FB Messenger / LinkedIn，都是外贸客户常用的沟通方式。

✓ 增强网站 SEO

外链互通可让爬虫更清晰理解你的网站品牌矩阵。

---

二、你需要准备什么？

✔ 1. 你的社交媒体账号链接

例：

• Facebook：https://facebook.com/yourbrand

• Instagram：https://instagram.com/yourbrand

• LinkedIn：https://linkedin.com/company/yourbrand

• 微信：二维码图片（可上传至网站媒体库）

---

✔ 2. 图标素材

推荐两种方式：

方式 A：使用 SVG 图标（推荐）

下载网站：

• icons8

• flaticon

• svgrepo

好处：清晰、可无损缩放、可自由修改颜色。

---

方式 B：直接使用 Font Awesome（更简单）

只需在 <head> 中引入：

然后即可直接使用图标：

---

三、最终效果展示

✔ Footer 右侧有一排社交图标
✔ 鼠标 hover 自动变色
✔ 微信图标点击可弹出二维码 / 跳转微信页面
✔ 手机端自动适配

最终视觉效果示例：

---

四、【核心教程】如何把社交图标加入网站 Footer？

无论你使用 WordPress / Shopify / 自建系统，都可以用以下通用方法。

---

第一步：在 Footer 添加图标 HTML 结构

把下列 HTML 代码复制到 Footer 代码区 / 模块区即可：

---

第二步：设置图标 hover 变色（CSS 样式）

把下面 CSS 复制到你的自定义 CSS / theme CSS 区：

---

第三步：添加关闭微信二维码的脚本（JS）

将下面 JS 代码加入 Footer 的 <script> 区域：

完成后，点击微信图标即可弹出二维码。

---

五、微信二维码的两种展示方式

---

方式 A：弹出二维码（推荐）

适合外贸网站，不占空间，体验好。

已经包含在上方代码中。

---

方式 B：悬停显示二维码（不用弹窗）

替换以下 CSS 即可：

此方式适合 PC 端，但不适合手机端（手机没有 hover）。

---

六、不同建站系统的放置位置（小白必看）

---

WordPress（Elementor / Divi 等）

路径：

外观 → 小工具 → Footer 区域 → 新增“HTML”小工具 → 粘贴上面的 HTML

CSS 放在：

外观 → 自定义 → 额外 CSS

JS 放在：

插件：Insert Headers and Footers → Footer Scripts

---

Shopify

路径：

Online Store → Themes → Actions → Edit Code → sections/footer.liquid

将 HTML 插入 <footer> 内即可。

CSS 放入：

assets/theme.css

JS 放入：

theme.liquid 底部 </body> 前

---

自建系统 如AB客智能建站

1. 登陆后台：首先，进入AB客智能建站的后台，找到您想编辑的网站。

2. 编辑Footer：在网站编辑界面中，找到Footer区域。有时候可能需要在底部滚动或使用页面导航。

3. 添加图标模块：通常在Footer部分会有一个选项，允许您添加自定义模块。选择“社交媒体图标”模块。

4. 选择图标：在模块中，您可以看到不同社交平台的图标选项，如微信、Instagram、Facebook和LinkedIn。依次选择并添加到Footer。

5. 输入链接：为每个图标添加相应的社交媒体链接，这样用户点击图标就可以直接跳转到您的社交媒体页面。

6. 保存并发布：确保一切设置妥当后，点保存，然后发布让更改生效。

---

七、常见问题与解决技巧

---

❶ 图标显示不了？（80% 新手会遇到）

说明没有加载 Font Awesome。

解决：

---

❷ hover 不变色？

原因：

• CSS 优先级不足

解决：给图标加强选择器

---

❸ 移动端图标太大？

添加：

---

八、总结：3分钟即可完成的外贸网站基础优化

通过这篇教程，你已经掌握了以下能力：

✔ 在 Footer 添加社交媒体图标
✔ 图标 hover 自动变色
✔ 微信二维码可弹出
✔ WordPress / Shopify / 其他系统均可用
✔ 小白也能 100% 复制执行

这一步，看似简单，却直接影响：

• 用户信任度

• 品牌曝光

• 询盘转换率

• SEO 权重

如果你还没做，现在就是最好的时候。