How to Add Social Media "Follow" Icons to Your Blog

I have had a few questions about how I added the "Follow Closet Cooking" buttons for rss, email, facebook and twitter to the top of my side bar so I thought that I would write a tutorial for it. To add the buttons you will need to play around with a bit of html in your template but it is pretty easy. I will target this tutorial more at users of blogger but it should interpret to other blogging applications easily.

1. Get the button images. There are a lot of free social media buttons out there with different looks and feels. A search with the terms "free social media icons" should bring up a lot of them.

2. Upload the button images. If you are using blogger, post a new article and use the "Add Image" tool to upload one of the buttons. Click on the Edit HTML button and you will see some HTML code there for the image. What you are looking for is the <img tag and more specifically the src="[image link]" part of it. Copy the link value between the "'s directly after the src= and save it for later. Repeat with all of the images and then you can discard that post. (For non blogger users, you can upload the images to where you normally upload your images and get the image links.)

3. Add the side bar gadget. Go to Layouts and Add Gadget to your side bar. Select a HTML/JavaScript gadget. Choose a title and paste the following code into the Content:

<div id="subscriptions">
<ul>
<li><a href="[Place your rss feeds link here]"><img alt="Follow [Place your site name here.] by RSS" title="Follow [Place your site name here.] by RSS" src="[Place link to the rss image here.]" /></a></li>
<li><a href="[Place email subscription link here.]"><img alt="Follow [Place your site name here.] by Email" title="Follow [Place your site name here.] by Email" src="[Place link to the email image here.]" /></a></li>
<li><a href="[Place your facebook feeds link here]"><img alt="Follow [Place your site name here.] on Facebook" title="Follow [Place your site name here.] on Facebook" src="[Place link to the facebook image here.]" /></a></li>
<li><a href="[Place your twitter link here]"><img alt="Follow [Place your site name here.] on Twitter" title="Follow [Place your site name here.] on Twitter" src="[Place link to the twitter image here.]" /></a></li>
</ul>
</div>

Each of the blue blocks in the above code needs to be replaced with your links to your rss feeds, facebook accounts, your buttons links and your sites name.

4. Make it look good. If you leave it here the buttons will likely be stacked on top of each other which is not what we want so we are going to have to add some styles to the html template. In blogger go to Layouts and then Edit HTML. Click on the Download Full Template link to make sure that you have a backup of your currently working template. You are going to want to copy the following css code into the template:

#subscription ul {list-style: none outside none;}
#subscriptions li {display:inline;}
#subscriptions img {border:none;padding:0 2px;}

The first line removes the bullet and the second makes the buttons line up beside each other rather than on top of each other and the third line removes the border and adds a bit of space between the buttons. (Feel free to change the amount of space to fit your site best.)

If you are not familiar with css and html: Look for either a </style> or ]]></b:skin> and insert the code just above it. Preview and save the template and then test the buttons to make sure that they work as expected.

Note: Not all blogger template will work the same and I make no guarantee that this will work on all of them.

I hope that someone finds this useful. Next up is adding the share and follow buttons to the bottom of your posts.