The Best Showit Social Icons to Improve Your Website’s Engagement

Setting Up Showit Social Icons

Adding social media icons to your website is essential in connecting with your audience and growing your online presence. If you’re using Showit, a drag-and-drop website builder, setting up social media icons is simple and highly customizable. Additionally, you have the option to use a custom icon for further personalization.

This tutorial will walk you through adding, styling, and linking social media icons in Showit, ensuring they look great on both desktop and mobile devices.

---

Why Social Media Icons Matter

Social media icons help visitors easily find and follow you on platforms like Instagram, Facebook, LinkedIn, and TikTok. Whether you’re a business owner, blogger, or creative professional, having clear and accessible social links improves engagement and enhances your brand’s credibility.

Connecting your Instagram account is particularly important as it allows for automatic updates of recent posts and makes it easier for visitors to engage with your content directly.

---

Choosing Your Social Media Icons

Before adding social media icons to your Showit website, you must decide whether to use Showit’s built-in icons or upload custom ones.

Option 1: Using Showit’s Built-in Social Icons

Showit provides a set of pre-designed social media icons that you can quickly add to your site. These are useful if you want a fast and consistent look.

Option 2: Uploading Custom Icons

If you want a unique design that aligns with your brand, you can upload custom icons as PNG, JPG, or SVG files.

Recommended file formats and sizes:

• SVG: Best for sharp, scalable icons that won’t lose quality.
• PNG: Great for transparency but may not scale as well.
• JPG: Works if you don’t need transparency.

Ideal icon size: 50x50px to 100x100px, depending on your design.

---

Adding Social Media Icons to Your Showit Website

Once you’ve chosen your icons, it’s time to add them to your site.

Step-by-Step Guide to Inserting Icons

1. Open your Showit site and navigate to the page where you want to add social icons (e.g., header, footer, or contact section).
2. Click the “Media Library” tab to upload custom icons or select from the built-in icons.
3. Drag the icon(s) onto your canvas. Adjust the size and positioning as needed.
4. Use the alignment tools to ensure even spacing and consistent placement.

Where Should You Place Social Icons?

• Header: Keeps them visible across all pages.
• Footer: Common placement that doesn’t distract from the main content.
• Contact Page: Helps visitors connect with you easily.
• Sidebar (for blogs): Ideal for encouraging social engagement.

---

Linking Social Media Icons to Your Profiles

Once your icons are in place, you’ll need to link them to your social media profiles.

How to Add Links to Icons in Showit

1. Select an icon and click on the “Click Actions” tab.
2. Choose “Website URL” from the dropdown menu.
3. Enter the full URL of your social media profile (e.g., https://instagram.com/yourusername). For example on Instagram, you can copy this link: go to your profile and click “Share profile” (right next to “Edit profile”). Click “Copy link” and send it to yourself, for example through some messenger installed both on your computer and your phone, or just use the buffer if it’s Apple ecosystem).
4. Check the box to open in a new tab (recommended for better user experience).

Testing Your Links

Before publishing, click Preview and test each icon to ensure it correctly redirects to your social media profile.

---

Connecting Social Media Accounts

Ensuring Proper Integration with Showit

Connecting your social media accounts to your Showit site is a crucial step in integrating your online presence. To ensure proper integration, follow these steps:

1. Access Site Settings: Log in to your Showit account and navigate to the “Site Settings” section.
2. Select Social Media Platforms: Click on the “Social Media” tab and choose the platforms you want to connect, such as Instagram, Facebook, or LinkedIn.
3. Authorize Access: Enter your social media account credentials and authorize Showit to access your accounts. This step ensures that your social media content can be seamlessly integrated into your site.
4. Customize Icon Settings: Adjust your social media icon settings to match your site styles. This includes selecting the appropriate size, color, and design to ensure a cohesive look.
5. Test Your Links: Before finalizing, make sure to test your social media links to ensure they are working correctly. This step is crucial to avoid broken links and ensure a smooth user experience.

By following these steps, you can ensure that your social media accounts are properly integrated with your Showit site, allowing you to showcase your social media content and drive traffic to your site.

---

Customizing Social Media Icons

Showit allows for extensive customization of social media icons to match your brand’s aesthetic.

Changing Colors, Hover Effects, and Styles

1. Select an icon and navigate to the “Design” panel.
2. Adjust the color, opacity, and size.
3. Add hover effects (e.g., color change on hover) for an interactive feel.

Using CSS for Advanced Customization

If you want more control over your icon styling, you can add custom CSS in Showit’s Advanced Settings.

Example: Changing an icon color on hover with CSS

.icon:hover {
  fill: #ff6600;
  transition: 0.3s ease-in-out;
}

(Note: Showit requires you to apply CSS within an Embed Code box.)

---

Mobile Optimization for Social Icons

Your social icons should be easy to tap and properly spaced on mobile devices.

Best Practices for Mobile Optimization

• Ensure icons are at least 40x40px for easy touch interaction.
• Use Showit’s Mobile Layout view to adjust spacing and alignment separately from desktop.
• Test on multiple devices to check scaling and readability.

---

Best Practices for Social Media on Your Showit Site

Strategic Placement and Usage Tips

To get the most out of your social media integration on your Showit site, follow these best practices:

1. Strategic Placement: Place your social media icons in a visible location, such as the website footer or right sidebar, to encourage visitors to follow your social media accounts. This ensures that your social links are easily accessible without distracting from your main content.
2. Custom Icons: Use custom icons that match your site styles to create a cohesive look and feel. Custom icons can enhance your brand identity and make your site visually appealing.
3. Link Directly: Utilize the “Link Type” feature to link your social media icons directly to your social media accounts. This makes it easy for visitors to find and follow you on various platforms.
4. Customize Settings: Customize your icon settings to control the size, color, and style of your social media icons. This allows you to maintain a consistent design throughout your site.
5. Sales Pages: Avoid placing social media links on sales pages, as they can distract from the main call-to-action. Keep the focus on your product or service to maximize conversions.
6. Connected Accounts: Ensure your Showit account is connected to your social media accounts to automatically update your social media content on your site. This saves time and keeps your site current with your latest posts.
7. Drive Traffic: Use your social media profiles to drive traffic to your site and increase engagement. Promote your website content on your social channels to attract more visitors.
8. Site Styles: Ensure that your social media icons match your site styles to create a cohesive look and feel. Consistency in design enhances user experience and brand recognition.
9. Automatical Updates: Use the Social Grid widget to automatically update your Instagram feed on your site, saving you time and effort. This feature keeps your site dynamic and engaging with fresh content.

By following these best practices, you can maximize the effectiveness of your social media integration on your Showit site and drive more traffic and engagement to your online presence.

---

Troubleshooting Common Issues

Even though Showit makes it easy to add and customize social icons, you may run into some issues.

Icons Not Displaying Correctly

Solution: Ensure icons are uploaded in the correct format (SVG or PNG recommended). If using custom icons, double-check file paths.

Links Not Working

Solution: Confirm you’ve entered the correct URL, including https://. If the link isn’t opening, try clearing your browser cache and testing again.

Icons Look Misaligned on Mobile

Solution: Adjust positioning separately in the mobile layout editor to fine-tune spacing.

---

Conclusion

Adding and linking social media icons in Showit is an essential step in building your online presence. By following this tutorial, you can:

• Choose and upload the right social icons.
• Place them strategically on your website.
• Customize their design to match your brand.
• Ensure they function properly on both desktop and mobile.

Next Steps:

• Test your site on multiple devices.
• Explore more Showit tutorials to enhance your design.

This guide ensures your social media icons are well-placed, properly linked, and visually appealing, making it easy for visitors to connect with you. Need help with your Showit site? Contact us through this form.