If you have set up a Facebook page, a Twitter profile, a Google+ page, or any other social profile, you will want to make sure your website customers know where they are so they can interact with you. The best way to do this is to add social icons into your header or footer so that they appear on every page of your site. There are hundreds of free icons available online, just search on Google for ‘social icons’ and you’ll be sure to find ones that suit your design.
We have created a small standard range of the most popular icons for you to use on your own site. They come in four different sizes and either have a transparent background, so the color of your header or footer will show through, or a white background, so they stand out against your header or footer background. Just click on the button below to download the full set.
Adding icons to your website
The most common place to add social icons on a website is the footer. This is so they are placed with all other customer service links such as Delivery & Returns and Terms & Conditions. To add social icon to your footer just follow these steps:
Resize icons to the size you want them to appear on your website in a graphics package such as PhotoShop
In the admin console of your website go to Site > Template Manager > default template > Footer tab
Next to the Footer Content field click on the WYSIWYG icon
Click on the Insert Table icon and use the following settings
In the left-hand cell add any links you may want, such as Terms & Conditions and Privacy Policy, and any legal requirements, such as the company registration number and VAT registration number (if registered)
Type in the text for your link
Highlight this text and click on the Insert Link icon
From the Internal URL drop-down select the page you want to link to (the page must already exist in the Page Manager) and click on OK
In the right-hand cell add in the social icons you want on your site
Click on the Insert Image icon
Click on Browse Server and then the Browse and Upload button
Select the first social icon image from your computer and click Open
Click on the Assign Image button
Add the alt text into the Alternative Text field and click OK
Click on the social icon to highlight it and click on the Insert Link icon
In the URL field paste the full URL of your social profile (example: https://www.facebook.com/BlueparkSolutions) and click OK
Align the right-hand cell to the right so that the content looks uniform
Right click on the right-hand cell
In the menu that appears go to Cell > Cell Properties
Set Horizontal Alignment to Right and click on OK
Once you have added all of your links and social buttons click Send Changes and Save.
Your footer should then look something like this:
Other methods of connecting your website to your social profiles are possible. To add social share buttons to your product pages and blog pages go to our previous blog post How to: add Social Share buttons to your website. Also look out for our next post which will explain how to add social widgets to your site.
