首页

产品服务

AI建站

解决方案

外贸学院

了解AB客

外贸学院|

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.

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

阅读：64

类型：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.

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.

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?

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:

Then you can use the icon directly:

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?

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:

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:

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)

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

Log in to the backend : First, go to the backend of AB Ke Smart Website Builder and find the website you want to edit.
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.
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.
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.
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.
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:

❷ Does hover not change color?

reason:

Insufficient CSS priority

Solution: Enhance the icon selector

❸ Are the mobile icons too big?

Add to:

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

Discover how ABKE can transform your marketing strategy and boost efficiency—start your journey to success today!