The Social Media Icons Bar app lets you promote your social media profiles on your website, making it easy for customers to follow you or ask questions. It adds a sticky bar with social media icons linked to your profiles on every page of your site.
The following social media icons are available:
Facebook
LinkedIn
TikTok
X
Instagram
Discord
Telegram
Messenger
Line
YouTube
Vimeo
Etsy
Tumblr
WeChat
WhatsApp
Threads
Fiverr
SoundCloud
UpWork
Pinterest
Reddit
Spotify
Github
Snapchat
Viber
Yelp
VK
Twitch
Weibo.
The app interface is divided into two columns: on the left, you can configure social icons, and on the right, you can see a live preview of how the social icons bar will look on the frontend.
Add icon to your frontend
To enable a social media icon, toggle the switch next to the social network's name. Click '…' to adjust the settings for that specific icon:
Name - the name of the social media network you're setting up the icon for.
Profile URL - insert the link to your social media profile, so customers can visit it by clicking the icon.
Hover Text - specify the text that will appear when users hover over the icon.
Show on Mobile - toggle to show or hide the social icon on mobile devices.
Show on Desktop - toggle to show or hide the social icon on desktop devices.
Click the Save button to apply the changes.
Then, you can arrange the order of enabled social icons in the bar by simply dragging and dropping them.
Upload a custom icon
If you can’t find the icon you need or want to use a custom design, click the +Custom Icon button. Then, fill in the following details:
Name - the name of the social media network you're setting up the icon for.
Profile URL - insert the link to your social media profile, so customers can visit it by clicking the icon.
Hover Text - specify the text that will appear when users hover over the icon.
Click Upload social media icon and select it from your computer.
Note: Only SVG files are supported, and the file size must not exceed 100KB.
Show on Mobile - toggle to show or hide the social icon on mobile devices.
Show on Desktop - toggle to show or hide the social icon on desktop devices.
Click the Save button to apply the changes.
Then, you can arrange the order of enabled social icons in the bar by simply dragging and dropping them.
Customize the icon
To customize your icons, click the Settings button at the top of the page.
Layout
In Settings, open Layout to customize the following:
- Icon Position: Choose from right, left, top, or bottom.
- Orientation: Set the bar to be horizontal or vertical.
- Icon Size: Select from tiny, small, normal, or big.
- Spacing: Set the space between the icons for a cleaner, more organized look.
- Display More: Enable this option to show a specific number of icons on the frontend. The remaining icons will be hidden under a "Display More" button.
- Limit Visible Icons: Choose how many icons to display on the frontend, with the rest accessible via the "Display More" button.
Click the Save button to apply the changes.
Style
Return to Settings and open Style to customize the following:
- Icon Style: Use the left or right arrows to select from the available styles.
- Background Color: Choose native, dark, or light backgrounds for the icons.
- Icon Color: Choose native, dark, or light colors for the social media symbols.
Note: Use contrasting background and icon colors to ensure the symbols are clearly visible. - Icon Shape: Select the shape—circle, rounded, or square.
- Hover Effect: Enable the toggle to change the background or icon color when hovered over.
Click the Save button to apply the changes.