.png?x-oss-process=image/resize,h_100,m_lfit/format,webp)
.png?x-oss-process=image/resize,m_lfit,w_200/format,webp)
热门产品
Popular articles
Foreign trade B2B site group management ceiling! AB customer intelligent site building teaches you step by step to seize the overseas market!
A practical guide for foreign trade novices: choosing transport methods and insurance terms under different trade terms!
Case Study of Foreign Trade B2B: Strategies and Experiences Behind Successful Cross - Cultural Negotiations
Recommended Reading
一天一个外贸建站小知识：社媒图标添加——1步打通网站与社交平台
本篇教程手把手教你在外贸网站 Footer 添加 Facebook、Instagram、LinkedIn 与微信社交媒体图标，并设置点击跳转、微信二维码弹窗及 hover 变色效果。含完整 HTML、CSS、JS 代码示例与操作图解，小白也能一键复制执行，快速提升网站专业度与社交曝光度。
对于外贸网站来说，在 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客智能建站
-
编辑Footer：在网站编辑界面中，找到Footer区域。有时候可能需要在底部滚动或使用页面导航。
-
添加图标模块：通常在Footer部分会有一个选项，允许您添加自定义模块。选择“社交媒体图标”模块。
-
选择图标：在模块中，您可以看到不同社交平台的图标选项，如微信、Instagram、Facebook和LinkedIn。依次选择并添加到Footer。
-
输入链接：为每个图标添加相应的社交媒体链接，这样用户点击图标就可以直接跳转到您的社交媒体页面。
-
保存并发布：确保一切设置妥当后，点保存，然后发布让更改生效。
七、常见问题与解决技巧
❶ 图标显示不了？（80% 新手会遇到）
说明没有加载 Font Awesome。
解决：
❷ hover 不变色？
原因：
-
CSS 优先级不足
解决：给图标加强选择器
❸ 移动端图标太大？
添加：
八、总结：3分钟即可完成的外贸网站基础优化
通过这篇教程，你已经掌握了以下能力：
✔ 在 Footer 添加社交媒体图标
✔ 图标 hover 自动变色
✔ 微信二维码可弹出
✔ WordPress / Shopify / 其他系统均可用
✔ 小白也能 100% 复制执行
这一步，看似简单，却直接影响：
-
用户信任度
-
品牌曝光
-
询盘转换率
-
SEO 权重
如果你还没做，现在就是最好的时候。
.png?x-oss-process=image/resize,h_100,m_lfit/format,webp)
.png?x-oss-process=image/resize,h_100,m_lfit/format,webp)
.png?x-oss-process=image/resize,h_100,m_lfit/format,webp)
.png?x-oss-process=image/resize,h_100,m_lfit/format,webp)
.png?x-oss-process=image/resize,h_100,m_lfit/format,webp)
.png?x-oss-process=image/resize,h_100,m_lfit/format,webp)
