If you’re like us, you’re on pretty much all of the social networking sites. Facebook, Twitter, Instagram, Tumblr, Pinterest…there are so many out there, and you probably want to link to all your profiles from your blog sidebar, right? Here’s a simple tutorial on how to do that!
First, you’ll need your icons. You can, of course, make your own, but there are so many out there already made for you – check out our Pinterest board for a growing selection that you’re bound to find one to suit you. For this tutorial, we’re going to use the icons provided here by CarrieLoves (which are awesome – pretty much every button in every colour you can think of ever wanting – including glitter!)
Once you’ve got the icons that you want to use (or at least the top five or so), upload them to wherever you upload your images to and copy each image URL. (If you don’t have anywhere in particular to put your images, you could upload them to a Flickr account then check out our Providing a Blog Button post which explains how to find the image URL of a Flickr image)
For each icon that you want to add to your site, you’ll need the following HTML:
<a href="SOCIAL MEDIA LINK"><img alt="ALT TEXT HERE" src="RELEVANT IMAGE LINK" width="50px"></a>
Replace the “Social Media Link” part with whichever profile you want to link and put the image URL to the icon that relates to that profile. Replace “Alt text here” with something like “Follow me on Twitter” – this will help visually impaired readers understand what that icon is for. For example, here’s what we’d write to link the Twitter icon above to our Twitter profile:
<a href="http://www.twitter.com/bonjourblogger"><img alt="Follow us on Twitter!" src="http://www.bonjourblogger.com/wp-content/uploads/2013/05/twitter.png" width="72" height="72" /></a>
Repeat as necessary until you have a block of HTML for each profile. Put it all together, and leave no spaces between it if you want the icons to appear in a row.
If you’re a WordPress user, then from the Dashboard, click on Appearance then Widgets. Drag the HTML item to your sidebar, paste the HTML for your image in and click save.
Finally, check out how they look! If they’re a little bit too big for your sidebar, you can adjust the size by changing the width of the image – in the example HTML, that’s the part that says 50px.
Let us know how you get on – and if you’ve got any links to free social media icons, share them in the comments as well!