Many blogs and websites now have a familiar strip of stylised social media icons, proudly displaying which networks they are active on and encouraging you to click and connect. Do you want to know how to create your own social media icon widget? You can use either your own artwork or any of the thousands of free social media icons available to download on the internet.
I've created a little tutorial and some code to help you create a beautifully integrated set of links to all of your social media networks. You can simply add it to your sidebar.
Adding Social Media Icons to your blog tutorial
First of all you need some icons - I have included a long list of creative and crafty social media icons for you to browse through below. There are many more available, just click this link to a Google image search for free social media icon sets. There will be a download button for each set.
- Click download. The file will usually be 'zipped'.
- Click on the file and you should see the option to 'extract all files'
- Decide which size icons you will be using, most icon sets have more than one size available, 16px, 32px or 64px. If you choose the largest size you can always make it smaller when we get to adding the code snippet, but you cannot increase as the icon will look fuzzy.
- Next you need to create an image code for these files. I use www.photobucket.com to do this, it's free and very easy to use. I can quickly upload an image, then once saved to one of my photobucket albums, I copy the 'direct url' which is found in a list of links. I now have the image address ready to add to the code. The image address will look something like this -
- Now do the above for all of the icons you need
- Open up your Blogger or Wordpress dashboard and click on the layout area where you can then add a gadget / widget for 3rd party html or similar. You can move it into the best position later. If you are adding the icons to a sidebar you may need to adjust their dimensions to make them fit nicely, or form even rows.
- Next you need to create the code, it's essentially a series of clickable images that link to your social media networks. The basic structure of the code for one of the images is as follows -
<a href="SOCIAL NETWORK LINK HERE"><img alt="NAME OF NETWORK HERE" border="0" src="IMAGE ADDRESS LINK HERE" style="height: 64px;" /></a>
- For each icon you need to copy and paste the above, adding each link, name and image address for each network.
- To change the size of the images adjust the height dimension 64 within the code shown above to your desired height. If you have use 32px icons ensure they are at 32 or less and ditto for 16px icons. You can simply remove the height dimension from the code and the image will be the size it was created at.
- If you feel they need a border to seperate them, experiment by adding a number to the border="0" - just 1 or 2 would probably be enough if you did feel they are too close.
Design your own social media icon Set
The standard dimensions for icons are 16px , 32px , 48px or 64px. If you decide to create a set of your own icons remember that they need to be instantly recognisable for which network they represent. You should also check before using another persons design set as a base for your own designs. The actual logos themselves are of course the copyright of the networks.
Free Social Media Icons for Craft Bloggers
Beautiful and crafty free social media icons that truly reflect the character of your blog! I've hand chosen these and at the time of publishing they were all available to download for FREE! Some designers are so generous :) Thank you to all of those I have included on the list.
The following is a huge visual list of free social media icons that are all downloadable. Aren't they pretty! The screen shots just show some of the icons, be sure to check that the set has all the icons you need, before you start.
Round Sticker Peel Social Media Icons
Origami paper social media icon set
Round wooden social media icon set
Vintage stamps social media set
Old frayed fabric social media set
Black and white clear bubbles social media icon set
Drawn social media icon set
Furry Social Media Icon set
Green Social Media Icons
Marker Pen Social Media Icons
Cloud Shaped Icons
Standard social media icons
Bursting through page social media icons
Vintage peeling stickers social media icons
Light wooden social media icons
Blue biro scribbled social media icons
Arty Painted Social Media Icons
Arty colourful social media icons
Dark wooden social media icons
Coffee Stain icons
Leaves Social Media Icons Set