How to add social media buttons to your blog

Over the past few months, since I’ve started to get into craft blogging, I became frustrated by and really jealous of the blogs that contained social media buttons. I wanted  buttons on my blog but I couldn’t figure out how to do it! Over loaded at work I couldn’t think straight. I tried updating my layout to templates that contained social media buttons in their preview but the icons disappeared once I converted my layout. How did other people do it?

Well last week I found out. A few weeks in to my summer holidays my brain had de-fuzzed and I finally googled the right phrase ‘html coding for adding social media buttons to my wordpress blog’. The search revealed Michelle Sheafer’s fantastically clear and straight forward instructions and within an hour my blog contained a series of shiny blog buttons/icons.

I wanted to share my breakthrough with my lovely followers so here are Michelle’s instructions:

Step 1: Choose the Icons You Like and Download Them

Your first step is to pick the icons that go well with the vibe/theme of your blog.  Here are some I like: And some more really creative ones:

For this tutorial I’ll be using the icons here: (I love the coffee cups but I want to include LinkedIn and YouTube, so had to go for a set with all of the networks I post on.)

Once you’ve chosen your icons, you’ll want to check the license (some require a link back to their website), and save them to your computer.  They’ll probably be in a .zip file which you’ll unzip after you download.

Note: If you aren’t using WordPress, or aren’t using a blog, you can still add your social networking icons to your site with similar steps.  Just upload to your website in whatever way your website builder works, then get the URLs, and add in the appropriate code at the appropriate spot in your blog template or your HTML website’s code.

Step 2: Upload the Icons to Your Blog

To upload your icons, login to your WordPress blog then go to “Media” and “Add New”

Next click the “Select Files” button.

This will open a small window where you can browse to the social icons you just downloaded and select them all to upload.  Choose your icons (hold the control key down and click to each one to choose more than one), then click “Open” to upload them.

Now you’ll see the confirmation that they’ve uploaded successfully.

Now you need to get the URL for each of these image.  I recommend opening note pad or wordpad to copy and paste them into so that the next part is easier.

To get your URLs, click that “Show” link to the right of each image and look for the URL field as shown below.  Copy the *entire* URL and paste it into note pad.  Repeat for each image.

Here’s what my URLs look like:

Step 3: Create a New Text Widget to Hold Your Social Networking Icons

Under “Appearance” on the left menu in WordPress, click “Widgets.”

Next find the “Text” Widget, grab it and drag it into your side bar where you want the social networking links to show.

This is where you’ll be adding your HTML code for your profile links and images.  Give your widget a title if you’d like, and then you’ll add your code, like this:

IMPORTANT NOTE!!  These quotes are straight quotes, not curly (fancy) quotes.  If you copy and paste they may try to turn themselves into fancy ones.  If you get an error when you try to add this code, that’s probably why.  You can also try this same code but remove all of the quotes and it works.  (Thank you, Diana, for alerting me to this!)

<a href=”LINK”><img src=”IMAGE URL” border=”0″></a>

LINK is where you put the link to your profile, like:

<a href=””&gt;

IMAGE URL is where you put the URL for the image you just uploaded (and copied it’s URL into note pad):

<img src=”; border=”0″>

And the </a> at the end is important, it says to end the link after that image.

So your code will look something like this (below).  Click the “Save” button to save your code.

Now you’ll have a sidebar widget on your website something like this:

You might want to adjust the sizing/spacing of your icons.  To do that you can add this snippet into your image code:

<img src=”; border=”0″ width=”XXX” hspace=”XXX”>

In width=”XXX” you can tell it how wide to make the image.

In hspace=”XXX” you can tell it how many pixels of padding to put around the image.

Also, if you want to center your images, just add <center> at the very beginning of all your code, and then </center> at the very end of all your code.

For example:

And your final images will look something like this: