外贸学院|
Home / Blogs / A daily tip for building a website for foreign trade: Adding social media icons – one step to connect your website with social media platforms.

热门产品

外贸极客

Popular articles

推荐阅读

all
Enterprise Knowledge Base
GEO optimization
Smart website building
Social Media Operations
Fast customer acquisition
Customer Management
intelligent agent

A daily tip for building a website for foreign trade: Adding social media icons – one step to connect your website with social media platforms.

发布时间：2025/12/05
作者：AB customer
阅读：126
类型：Technical knowledge

This tutorial guides you step-by-step on how to add Facebook, Instagram, LinkedIn, and WeChat social media icons to the footer of your international trade website, and how to set up click-through redirects, WeChat QR code pop-ups, and hover color-changing effects. It includes complete HTML, CSS, and JS code examples and step-by-step illustrations, allowing even beginners to easily copy and execute the steps, quickly enhancing your website's professionalism and social media exposure.

uploaded image

For foreign trade websites, adding social media icons (WeChat/Instagram/Facebook/LinkedIn) to the bottom of the footer is not only a basic operation, but also a key action to enhance customer trust, strengthen brand backlinks, and build multi-touchpoint communication links.

But for many beginners:

  • Where should the icons come from?

  • How do I add it correctly to the footer?

  • How to change the color of the icon hover?

  • How do I insert a WeChat QR code?

Today we'll create a beginner-friendly tutorial on adding icons, guiding you step-by-step from scratch to seamlessly integrate your website with social media platforms.

Recommended reading: One-stop social media marketing: Unified management of Facebook and LinkedIn to enhance brand engagement

A comprehensive roadmap and step-by-step guide to promoting your foreign trade website after launch (SEO + Google Ads + Social Media Traffic Generation)

Why must social media icons be placed in the footer?

uploaded image

Because the Footer is the area that visitors see on every page, and it is also the default brand credibility area and contact information aggregation area for foreign trade websites.

Benefits of placing it in the footer:

✓ Enhance brand credibility

Customers can find your real social media accounts, so they don't have to worry about it being a fake site.

✓ Increase communication channels to improve the probability of inquiries.

In particular, WhatsApp, Facebook Messenger, and LinkedIn are commonly used communication methods by foreign trade clients.

✓ Enhance website SEO

External link exchanges can help web crawlers understand your website's brand matrix more clearly.

II. What do you need to prepare?

✔ 1. Your social media account link

example:

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

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

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

  • WeChat: QR code image (can be uploaded to the website's media library)

✔ 2. Icon materials

Two methods are recommended:

Method A: Use SVG icons (Recommended)

Download website:

  • icons8

  • flaticon

  • svgrepo

Advantages: Clear, lossless scaling, and customizable colors.

Method B: Use Font Awesome directly (simpler)

Simply include it in <head> section:

< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" >

Then you can use the icon directly:

< i class = "fab fa-facebook-f" > </ i > < i class = "fab fa-instagram" > </ i > < i class = "fab fa-linkedin-in" > </ i >

III. Final Result Display

✔ There is a row of social icons on the right side of the footer.
✔ Automatic color change on mouse hover
✔ Clicking the WeChat icon will display a QR code/redirect to the WeChat page.
✔ Automatic mobile adaptation

Final visual effect example:

uploaded image

4. [Core Tutorial] How to add social icons to a website footer?

uploaded image

Whether you are using WordPress / Shopify / a self-built system, you can use the following general method.

Step 1: Add icons to the Footer HTML structure

Simply copy the following HTML code into the Footer code section/module section:

< 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 >

Step 2: Set the icon hover color change (CSS style)

Copy the following CSS to your custom CSS/theme CSS section :

.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 ; }

Step 3: Add a script (JS) to disable WeChat QR codes.

Add the following JavaScript code to the <script> section of the Footer:

< script > document . addEventListener ( "click" , function ( e ) { const popup = document . getElementById ( 'wechat-popup' ); if (e. target . id !== 'wechat-popup' && popup. style . display === 'block' ) { popup. style . display = 'none' ; } }); </ script >

Once completed, click the WeChat icon to bring up the QR code.

V. Two ways to display WeChat QR codes

Method A: Display QR code (Recommended)

Suitable for foreign trade websites, it doesn't take up much space and provides a good user experience.

It is already included in the code above.

Method B: Hover over to display QR code (no pop-up window)

Simply replace the following CSS:

.wechat-icon :hover + .wechat-qrcode { display : block; } .wechat-qrcode { display : none; position : absolute; background : #fff ; padding : 10px ; border-radius : 6px ; box-shadow : 0 0 10px rgba ( 0 , 0 , 0 , 0.2 ); }

This method is suitable for PCs, but not for mobile devices (mobile devices do not have hover).

VI. Placement of Different Website Building Systems (A Must-Read for Beginners)

uploaded image

WordPress (Elementor/Divi etc.)

path:

Appearance → Widgets → Footer Area → Add "HTML" Widget → Paste the HTML above

CSS is placed in:

Appearance → Customize → Additional CSS

JS is placed in:

Plug-in: Insert Headers and Footers → Footer Scripts

Shopify

path:

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

Simply insert the HTML within <footer> .

Add the following CSS:

assets/theme.css

Add the JS file:

theme.liquid bottom </body> front

Self-built systems such as ABke Intelligent Website Builder

  1. Log in to the backend : First, go to the backend of AB Ke Smart Website Builder and find the website you want to edit.

  2. Editing the Footer : In the website editing interface, locate the Footer area. Sometimes you may need to scroll at the bottom or use page navigation.

  3. Add an icon module : There's usually an option in the Footer section that allows you to add a custom module. Select the "Social Media Icons" module.

  4. Choose an icon : In the module, you can see icon options for different social media platforms, such as WeChat, Instagram, Facebook, and LinkedIn. Select one in turn and add it to the Footer.

  5. Enter links : Add a corresponding social media link to each icon so that users can directly jump to your social media page when they click the icon.

  6. Save and Publish : After ensuring everything is set up correctly, click Save, and then Publish to apply the changes.

VII. Common Problems and Solutions

❶ Icons not displaying? (80% of beginners encounter this)

This indicates that Font Awesome is not loaded.

solve:

< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" >

❷ Does hover not change color?

reason:

  • Insufficient CSS priority

Solution: Enhance the icon selector

.footer-social .social-link :hover i { color : #1e73be !important ; }

❸ Are the mobile icons too big?

Add to:

@media (max-width: 600px ) { .footer-social .social-link i { font-size : 18px ; } }

VIII. Summary: Basic optimization of foreign trade websites can be completed in 3 minutes

Through this tutorial, you have mastered the following skills:

✔ Add social media icons to the Footer
✔ Icon hover automatically changes color
✔ WeChat QR code can pop up
✔ Compatible with WordPress / Shopify / other systems
✔ Even beginners can copy and execute 100%

This step, though seemingly simple, has a direct impact:

  • User trust

  • Brand Exposure

  • Inquiry conversion rate

  • SEO weight

If you haven't done it yet, now is the best time.

Foreign trade website construction Foreign trade independent station Foreign trade website building tutorial Add social media icons to foreign trade websites Foreign trade websites and social media platforms are integrated. Footer icon settings

AI 搜索里，有你吗？

外贸流量成本暴涨，询盘转化率下滑？AI 已在主动筛选供应商，你还在做SEO？用AB客·外贸B2B GEO，让AI立即认识、信任并推荐你，抢占AI获客红利！
立即开启GEO获客闭环
了解AB客
专业顾问实时为您提供一对一VIP服务
开创外贸营销新篇章，尽在一键戳达。
开创外贸营销新篇章，尽在一键戳达。
数据洞悉客户需求，精准营销策略领先一步。
数据洞悉客户需求，精准营销策略领先一步。
用智能化解决方案，高效掌握市场动态。
用智能化解决方案，高效掌握市场动态。
全方位多平台接入，畅通无阻的客户沟通。
全方位多平台接入，畅通无阻的客户沟通。
省时省力，创造高回报，一站搞定国际客户。
省时省力，创造高回报，一站搞定国际客户。
个性化智能体服务，24/7不间断的精准营销。
个性化智能体服务，24/7不间断的精准营销。
多语种内容个性化，跨界营销不是梦。
多语种内容个性化，跨界营销不是梦。
https://shmuker.oss-accelerate.aliyuncs.com/tmp/temporary/60ec5bd7f8d5a86c84ef79f2/60ec5bdcf8d5a86c84ef7a9a/thumb-prev.png?x-oss-process=image/resize,h_1500,m_lfit/format,webp