Website social media icons build trust by showing visitors you maintain an ongoing online presence and cross-promote your channels, helping generate leads and expand your following.
In this tutorial, we’ll show you how to add over 30 interactive social media icons in five sizes!
Header
Integrating social media icons into the header of your website is an effective way to promote and gain new followers for your accounts, but be wary not to overdo it; too much will only alienate visitors. For optimal results, add social links in either the navigation bar or footer where they will be more prominently displayed – as well as conceal any unnecessary icons (e.g. Instagram) from display in your header.
Brine templates already include this functionality, while for York, Bedford and Pacific templates it requires some tweaks. First you will need to create a link on a page where you’d like social media icons in the header – click + in Pages then Secondary Navigation area then Link then type your social media account address in URL field before using “Open in New Window” so when visitors click an icon it opens as a separate browser tab instead of overtaking their current page.
Simply navigate to the Content Blocks menu, locate “Social”, and add the social link content block. Choose your style before scrolling down and selecting “Add Accounts.” Note that in order for this method to work successfully, all accounts must be synced with Squarespace; should any difficulty arise here please reach out and contact Selah Creative Co. and we can assist in setting this up!
Footer
Social media icons are an effective way of encouraging your website visitors to follow you across multiple platforms and stay informed with your content, but they may be confusing if you don’t know exactly how best to utilize them.
One effective way of displaying social media icons on your website is in its footer. This location makes for an unobtrusive yet visible way for people to know what’s happening with you; but, be mindful that your footer reflects your brand, so make sure any icons chosen reflect its audience and values accordingly.
To add social links to your footer, first navigate to the Site Footer section in your editor. It can be found at the very bottom of each page on your site and will show up every time it loads. After opening this section, click “Edit Footer” for a pop-up window with all available fields for entering social links.
Method 3 will allow you to modify your footer and add a social links block that automatically displays all platforms you added in method 2. Additionally, icon alignment (default: left) and style options such as knockout or solid are selectable from here.
There’s also the option of customizing the colors of social icons using CSS code in your Footer section of your editor, making your footer appear more consistent with the rest of your website.
Add social media icons to your footer as an effective way of encouraging visitors to follow you and stay updated on your latest content. By following these easy tips, you can design an aesthetically pleasing yet functional footer for your Squarespace website. Just keep it simple by not overloading it with too many icons – too much clutter may distract or confuse visitors! Focus on including only key platforms relevant for your target audience for maximum effect!
Sidebar
If your social media presence is strong, promoting it on your website is crucial to building trust between visitors and your brand. By including social icons in the sidebar of your site, visitors will stay up-to-date with your latest content and news and be more likely to follow other accounts from your account.
To add social icons to a Squarespace sidebar, navigate to the page in which you would like to edit, click “+”, select Social Icons from the available options, then choose which platforms from each list you would like displayed. Customize sizes, link settings and icon styles as necessary until your design matches perfectly with that of Squarespace’s.
Within the settings, you can also decide whether or not you wish to hide the block on desktop and mobile. In addition, you can specify whether links should open in a new browser window, and adjust spacing between it and other elements of your website.
Another effective way of promoting your social media accounts is by including them in your header navigation. Not only is this a fast and simple way of sharing them with visitors, but it can also look professional while building brand recognition – an especially helpful strategy if your business uses multiple accounts that pertain to its industry or topic area.
For instance, if you run a retail store, adding Instagram as part of the navigation bar allows customers to easily locate and connect with you and help expand your reach and business growth.
Add Instagram Feed to Website Sidebar You can embed Instagram feed in the sidebar of your website as a great way to show off product photos and user-generated content, increasing website traffic while simultaneously improving SEO.
Content Blocks
Squarespace provides unparalleled flexibility when it comes to creating your website. Their platform relies on content blocks – basic pieces that you can add or subtract at will from each page – giving you complete freedom when it comes to personalizing each one with your brand’s specificity and aesthetic.
As an example, you can display social media icons in the header or footer of your website, and set up links leading directly to social media platforms so visitors can follow updates and connect with you in real-time. This feature helps increase audience and expand reach while improving SEO (search engine optimization).
Once you add a social media icon block to your site, it will automatically connect with any accounts connected through your Social Links panel. If your account features a custom icon, this will be displayed; otherwise standard icons are shown. To customize its default settings for this block further, visit your Social Links panel and choose either your preferred icon or change its display setting; to hide an icon by simply unchecking its box next to it is also an option.
There are multiple ways you can incorporate social media icons into your Squarespace website. Use the Form Block to build and embed web forms directly on your site; connect to third-party web forms like Zapier; or leverage Sociable’s third-party social media management tools for easy audience engagement online. All these options will expand how your audience engages with you online.
Add social media icons to your footer or sidebar by including a Social Links block with customizable designs. Just keep in mind that too many icons can become distracting for visitors; ensure yours stand out without overshadowing the primary goal of your website – turning visitors into customers!
Finally, the code block allows you to add HTML or markup text snippets directly onto your website. If you are a developer or writing tutorials, using this feature to showcase their work on the Internet can be invaluable – simply be sure to toggle Display Source in order for all snippets to display correctly on your page.
