首页

产品服务

AI建站

解决方案

外贸学院

了解AB客

外贸学院|

首页 / 博客 / 一天一个外贸建站小知识：社媒图标添加——1步打通网站与社交平台

一天一个外贸建站小知识：社媒图标添加——1步打通网站与社交平台

发布时间：2025/12/05

作者：AB客

阅读：64

类型：技术知识

本篇教程手把手教你在外贸网站 Footer 添加 Facebook、Instagram、LinkedIn 与微信社交媒体图标，并设置点击跳转、微信二维码弹窗及 hover 变色效果。含完整 HTML、CSS、JS 代码示例与操作图解，小白也能一键复制执行，快速提升网站专业度与社交曝光度。

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

但对于很多新手来说：

图标该从哪里来？
如何正确添加到 footer？
图标 hover 如何变色？
微信二维码如何插入？

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

外贸网站上线后的推广路线图及保姆级教程（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 自动变色
✔ 微信图标点击可弹出二维码 / 跳转微信页面
✔ 手机端自动适配

最终视觉效果示例：

uploaded image

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

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

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

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

<div class="footer-social">
    <a href="https://facebook.com/yourbrand" target="_blank" class="social-link">
        <i class="fab fa-facebook-f"></i>
    </a>

    <a href="https://instagram.com/yourbrand" target="_blank" class="social-link">
        <i class="fab fa-instagram"></i>
    </a>

    <a href="https://linkedin.com/company/yourbrand" target="_blank" class="social-link">
        <i class="fab fa-linkedin-in"></i>
    </a>

    <!-- 微信：用二维码弹窗方式 -->
    <a href="javascript:void(0)" class="social-link wechat-icon" onclick="document.getElementById('wechat-popup').style.display='block'">
        <i class="fab fa-weixin"></i>
    </a>
</div>

<!-- 微信二维码弹窗 -->
<div id="wechat-popup" class="wechat-popup">
    <img src="/uploads/wechat-qrcode.jpg" alt="WeChat QR Code">
</div>

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

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

.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social .social-link i {
    font-size: 22px;
    color: #666;
    transition: color 0.3s, transform 0.3s;
}

.footer-social .social-link:hover i {
    color: #1e73be;  /* hover变色，随意改 */
    transform: translateY(-3px);
}

/* 微信二维码弹窗样式 */
.wechat-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.wechat-popup img {
    width: 200px;
}

.wechat-popup:after {
    content: "点击任意处关闭";
    display: block;
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
    color: #999;
}