Closet Cooking Logo

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.

23 comments:

Beth M said...

Ah! Thank you for that... I searched all around one day looking for a widget to do it for me and couldn't find one. The coding doesn't look so bad though! Thanks!

Alisha @ Unusual Passions said...

Wow I didn't know it was so complicated! I wonder if this would work for Wordpress.
Thanks for the help.

Cool Lassi(e) said...

I will certainly find it useful. Thanks!

Grumpy and HoneyB said...

Awesome Kevin! I did it! Thank you so much :)

Chic 'n Cheap Living said...

Thank you for sharing Kevin - I had been thinking of adding these!

For step 4, does it matter where you insert the #subscriptions code?

giz said...

This was completely useful Kevin. You've done a good job explaining it too. Thanks for posting this.

Kevin said...

Chic 'n Cheap Living: Anywhere within either a <style>insert here</style> or <b:skin><![CDATAinsert here]]></b:skin> tag. The line above the tag closing is fine.

Valerie said...

Thanks, Kevin. I tried looking everywhere for a simple explanation. This was very easy to follow. :)

Pam said...

Thanks for this!!!

S. said...

Thanks so much for this! I got this to work for me in wordpress by creating a TEXT Widget (found under "appearance" -> widgets in the dashboard) and entering the HTML into it! You can't edit the CSS in wordpress without purchasing an upgrade, but I found that if I deleted the < li > tags (and the closing tags) they lined up in a row for me. Thanks so much for this!

Sara @ The Little Bite
http://thelittlebite.wordpress.com/

Avanika [YumsiliciousBakes] said...

Thanks so much for this, Kevin!

JuicyIcons.com said...

A very informative post, we often get asked similar questions about Social Media icons all the time.
We have lots of free social media icons here:
http://www.juicyicons.com/category/Social-Media
Thanks,
Andrew.J.

Julia, the Thanksgiving Girl said...

Oh THANK YOU for this!!!!!!

Jeanette said...

Thank you for sharing this information, it is so helpful!

Wild C said...

Thanks, for a great, well-explained tutorial! And recipes too ;)

Christine said...

Hey! I used your tutorial and LOVED it so much I posted a link to it on my blog {hope that was ok!??} I found it to be SO EASY and NEWBIE friendly! THANK YOU SO MUCH! Love your blog by the way...AND I'm your newest follower! :)

Elizabeth said...

Hi Kevin - I've been meaning to do this for a while, but never really had a chance until today. Thanks for the tutorial! You're site's looking great, as always...I'm always astounded by the sheer number of recipes you post!

Alida @ Alida's Kitchen said...

This is so helpful...I've been searching for a solution for days and finally found your post. Thank you so much!

Ashley Urke | Domestic Fashionista said...

Thank you this worked perfectly!

Style Maniac said...

Thank you thank you thank you!!! I have been searching for an easy way to do this for years now and your instructions did the trick! What a genius idea -- and so simple -- to get the html of the images from a blog post, rather than messing with Photobucket.

As it turns out, by some miracle Blogger allowed me to line up the icons side by side in the post, so I didn't even have to mess with CSS to make the formatting pretty. After I copied that code into the HTML gadget, I simply switched over to "Rich Text" mode (still in the gadget), then one at a time highlighted each image, clicked on the LINK icon and pasted in the url. Voila! Finally I have a pretty row of social media icons. Merci!

Kevin said...

Style Maniac: They look good! Glad that this was helpful!

Lauren | Seventeenth and Irving said...

I actually read your blog regularly for the recipes, but when I did a Google search for how to do this, your post came up! How wonderful to consider you an expert in both subjects. This tutorial worked perfectly. Thanks, Kevin!

Jerry King said...

Really helpful..
Thnx for sharing..!!!!

Post a Comment