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.
You can arrange the order of 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.
- Bar Orientation: Set the bar to be horizontal or vertical.
- Icon Size: Select from tiny, small, normal, or big.
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.