I've been doing a little maintenance on our website, preparing to write our new app. I never liked the way we had our social media icons posted on our website; it looked like a 1990's website. While cleaning up some code/items, I decided to play with the embed code and found a design that looks more professional and clean, not just on the website, but on the mobile website. Below are photos of before and after, then instructions on how to implement it on your website.
Before: Desktop/Mobile
After: Desktop/Mobile
1. Go to dashboard/online/edit website
2. On the next page click Add Section, select Embed Code and place it above your footer or anywhere you want it placed.
3. Copy this code and place it inside the embed Code section. Important in the code after each social media link you will see x's ( I will make them bold) replace the x's with your handle for each social media account,
<div style="display:flex;justify-content:center;gap:22px;padding:14px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;">
<!-- Facebook -->
<a href="https://www.facebook.com/xxxxx" style="text-decoration:none;color:#222;display:flex;flex-direction:column;align-items:center;font-size:12px;">
<div style="width:42px;height:42px;border-radius:12px;background:#f3f3f3;display:flex;align-items:center;justify-content:center;margin-bottom:6px;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="#1877F2">
<path d="M22 12a10 10 0 1 0-11.5 9.9v-7h-2.3V12h2.3V9.8c0-2.3 1.4-3.6 3.4-3.6.98 0 2 .18 2 .18v2.2h-1.1c-1.1 0-1.5.68-1.5 1.4V12h2.6l-.42 2.9h-2.18v7A10 10 0 0 0 22 12"/>
</svg>
</div>
Facebook
</a>
<!-- Instagram -->
<a href="https://www.instagram.com/xxxx" style="text-decoration:none;color:#222;display:flex;flex-direction:column;align-items:center;font-size:12px;">
<div style="width:42px;height:42px;border-radius:12px;background:#f3f3f3;display:flex;align-items:center;justify-content:center;margin-bottom:6px;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="#E1306C">
<path d="M7 2C4.8 2 3 3.8 3 6v12c0 2.2 1.8 4 4 4h10c2.2 0 4-1.8 4-4V6c0-2.2-1.8-4-4-4H7zm5 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm6.5-.9a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0z"/>
</svg>
</div>
Instagram
</a>
<!-- TikTok -->
<a href="https://www.tiktok.com/xxxx" style="text-decoration:none;color:#222;display:flex;flex-direction:column;align-items:center;font-size:12px;">
<div style="width:42px;height:42px;border-radius:12px;background:#f3f3f3;display:flex;align-items:center;justify-content:center;margin-bottom:6px;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="#000">
<path d="M16 3c.3 1.7 1.7 3 3.4 3.2v3.1c-1.3 0-2.6-.4-3.7-1.2v6.2a5.3 5.3 0 1 1-4.6-5.2v3.2a2.1 2.1 0 1 0 1.5 2V3h3.4z"/>
</svg>
</div>
TikTok
</a>
<!-- X (Twitter) -->
<a href="https://x.com/xxxx" style="text-decoration:none;color:#222;display:flex;flex-direction:column;align-items:center;font-size:12px;">
<div style="width:42px;height:42px;border-radius:12px;background:#f3f3f3;display:flex;align-items:center;justify-content:center;margin-bottom:6px;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="#000">
<path d="M18.9 2H22l-7.5 8.6L23 22h-6.8l-5.3-6.9L4.8 22H2l8.1-9.3L2 2h6.8l4.8 6.2L18.9 2z"/>
</svg>
</div>
X
</a>
<!-- YouTube -->
<a href="https://www.youtube.com/xxxx" style="text-decoration:none;color:#222;display:flex;flex-direction:column;align-items:center;font-size:12px;">
<div style="width:42px;height:42px;border-radius:12px;background:#f3f3f3;display:flex;align-items:center;justify-content:center;margin-bottom:6px;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="#FF0000">
<path d="M21.8 8s-.2-1.4-.8-2c-.8-.8-1.7-.8-2.1-.9C15.7 5 12 5 12 5h0s-3.7 0-6.9.1c-.4 0-1.3 0-2.1.9-.6.6-.8 2-.8 2S2 9.6 2 11.2v1.6c0 1.6.2 3.2.2 3.2s.2 1.4.8 2c.8.8 1.9.8 2.4.9 1.7.1 6.6.1 6.6.1s3.7 0 6.9-.1c.4 0 1.3 0 2.1-.9.6-.6.8-2 .8-2s.2-1.6.2-3.2v-1.6C22 9.6 21.8 8 21.8 8zM9.8 14.5v-5l4.8 2.5-4.8 2.5z"/>
</svg>
</div>
YouTube
</a>
</div>
4. Save it , then click publish and you are finished.
Also when you paste the code in you will see the results instantly, before you publish it. That way if it doesn't look right it won't affect your site in realtime.
Ooooo, that looks amazing! Definitely gonna keep this one in mind when we work on the site, thanks!
