How to Add Pretty Social Media Icons to Your Blog

16 Sep

I recently wrote a post about how I have joined a blogging workshop. Every week the participants have a writing assignment. This week’s assignment didn’t really apply to the kind of blog I have, so I made up my own. This situation kind of reminds me of high school, except this time I’m actually doing work and not just blowing it off. Mom and dad you can stop laughing now.

I love reading other blogs and admiring all the amazing design features that are out there. I especially love to see how people use and organize their social media icons. I think adding custom social media icons really adds to the overall feel of the blog, but I know that some bloggers don’t know how to find the icons or don’t know what html code they need to apply the feature to their blogs.

I am going to provide you all with detailed instructions on how to add pretty social media icons to your blog in a few easy steps. This is so easy that anyone (including myself) can do it. Here we go!

1. Find images of the icons you want to use.

I love iconfinder.com. This is an icon data base where designers share their artwork. You can search for icons based on sizes, you can change the background color for better visibility, and you can use the drop down menu to search for commercial friendly icons. You will want to use a commercial friendly icon if you make money from your site. This will save you a big headache in the future.

You can also do a google search for images. Try searching a term like “social media icons”. There will be a ton of images that pop up. There are always new and interesting social media icons, as designers are constantly updating their profiles.

Recommendation: Try to pick a social media icon that will enhance the design of your site. You want it to match a theme or a look that you have. You may even want to try a few out in order to find the right one.

Recommendation: If you are going to need icons for multiple social media websites, select group of icons with the same design. I personally think a blog looks more streamlined and professional when all the icons look the same.

2. Adding the social media icons to your blog.

  • Download the social media icon of your choice onto your computer.
  • Upload the icon onto wherever the pictures are for your blog. I use WordPress and this is how I do it: I go to my dashboard. On the left hand side menu under “Media” is “Add New”. Click on it. Then upload the image from your computer. Once the image is uploaded, you will see a lot of information about the image. Grab the URL for the image. Write it down. You will need it later.
  • Ready to write some html? I’m going to write the code for Twitter just as an example, but you can do this for any other social media site as well. Hang with me here. It’s not that bad.

The URL for your image should look something like this:

The URL for your Twitter account should look something like this:

http://www.twitter.com/yourtwittername

Use those two URLs in the following code:

<a href=”http://twitter.com/YourTwitterName&#8221; title=”Follow Me”><img src=”http://yourimageURL&#8221; alt=”Follow Me”></a>

Now, if you have WordPress, here is how you add that code to your blog. The directions for this are very similar for Blogger, except they have an html gadget.

  • Go to your dashboard.
  • On the left hand side menu under “Appearance” click on “Widgets”.
  • Find the Text/Arbitrary html widget and drag it to your sidebar. Open it up and add the html code you just wrote into the box. Click “Save”.
  • Go to your blog home page and marvel in your genius. (or rip out your hair because something doesn’t look right)

Because you did such a great job and followed this post all the way to the bottom, I am going to reward you with the html code for a Facebook icon as well.

<a href=”http://www.facebook.com/yourfacebookinfo&#8221; title=”Like me”><img src=”http://www.yoururl.com/yourimage.png”></a&gt;

Good luck and happy blogging!

Kludgy Mom

About these ads

40 Responses to “How to Add Pretty Social Media Icons to Your Blog”

  1. Mad Woman behind the Blog September 16, 2010 at 10:15 pm #

    Girl, you’re KILLING ME! This is what I was trying to figure out how to do ALL FRICKING DAY!

    But thank you. I know what I’ll be doing tomorrow. Sheesh.

  2. tracy September 16, 2010 at 10:24 pm #

    I can’t believe I’ve waited this long to check out your blog…..IDIOT! Your banner photos are gorgeous :)

    Looking forward to reading more of your posts ~ both your archives & all of your blogging tips!

    Did you wind up going self-hosted?

    • The Little Hen House September 16, 2010 at 10:31 pm #

      Hi!

      No, haven’t gone self-hosted yet. I’m working on getting a logo done first. I can’t decide if I want to stick with the design I have now or do something totally different.

      Thanks for the compliment on my banner. It kind of makes me think things are fine the way they are. I am pretty obsessed with design. I wish I could have a dozen different blogs. Sigh….

      Thanks so much for coming by. I’ll work on posting more tips. Not that I am even close to knowing what I am doing, of course. :)

      • tracy September 16, 2010 at 10:44 pm #

        your little “snap” (was that was it was called?), link-hover thingy is pretty fancy!

  3. Stephanie September 16, 2010 at 10:29 pm #

    Thank you so much I was just going crazy trying to update mine. Your post could not come at a better time!

    • The Little Hen House September 16, 2010 at 10:36 pm #

      Good luck! Let me know if the code doesn’t work. I was a little nervous putting it up here. :/

  4. tracy September 16, 2010 at 10:40 pm #

    But, I’m curious. I noticed your url was wordpress.com so I was typed in http://www.littlehenhouse.com to see if it was free & suggest that you purchase the domain & migrate your wordpress account over. And as I’m sure you are well aware, it brought me back to your site.

    I’m on wordpress, purchased the .com, and migrated my wordpress site over. Or was it the other way around. At any rate, if you type http://www.mamacreates.com, the url shows as http://www.mamacreates.com. When I type http://www.thelittlehenshouse.com, the url says http://www.thelittlehenhouse.wordpress.com, so maybe your migration went the wrong way? Feel free to tell me to shut it; I just knew I wanted my site to show as .com, not wordpress.com. :)

    • The Little Hen House September 16, 2010 at 10:49 pm #

      I’m so glad you mentioned this! I have my domain host sending traffic to wordpress.com, but I would LOVE to have it go the other way. I’m going to look into that tomorrow. Thank you so much!

      • mamacreates September 16, 2010 at 11:04 pm #

        I don’t remember how I did it, but I think I searched for “migration” or something of the sort on WordPress & found instructions.

        I wanted to give up blogger & start on wordpress, I wanted to change my name, and I wanted my own .com, and I didn’t want to lose my old content. I thought there was NO way I could pull all that off and was shocked as hell when it all worked. It was all about figuring out which one to migrate first, and luckily the instructions spelled it out for me. I have faith in you!

    • The Little Hen House September 17, 2010 at 2:42 pm #

      After some fiddling around, I managed to ditch the wordpress.com out of my url. It still comes up sometimes though. I’m hoping the gods of the internet will get everything straightened out. Thanks so much for your help!

  5. Stay at Home Babe September 17, 2010 at 1:56 am #

    I’m such a terrible blogger. I just write and hate the geek stuff. I always feel really proud when I accomplish the effect I want, but beyond that my eyes glaze over… I skimmed three-fourths of this post because I start hearing the Peanut’s teacher in my head :(.

    • The Little Hen House September 17, 2010 at 2:43 pm #

      I totally know how you feel. This kind of stuff is hard to read and like ten times harder to write. It took me forever!

      You are a smart cookie though. I know you can do it! (I can do it for you in like five minutes too xoxo)

    • mamacreates September 17, 2010 at 11:06 pm #

      *blushes*

      really, you have NO idea how impressed I was with myself that I got it all to work; I’m a one-trick pony :)

      • The Little Hen House September 19, 2010 at 10:37 pm #

        Ok. I just switched to Go Daddy. After the transfer goes through, domain should be fixed. Thank you for motivating me to finally fix this. I owe you!

  6. bdogmama September 17, 2010 at 7:06 am #

    Found your blog and I love it. I’m a sucker for beautiful design, useful content, AND you make me laugh!

  7. Maryline September 17, 2010 at 9:07 am #

    I so need to do all of this, thanks for the reminder and the great tips! ✭ You rocked it ✭
    You are such a versatile blogger, very impressed.

    • The Little Hen House September 17, 2010 at 2:56 pm #

      Thanks Maryline! ;)

      ps
      The links seem to be working fine. Is is possible that you thought the html code was a link? Let me know. I would hate for something not to be functioning properly!

  8. Lucky Dame September 17, 2010 at 9:24 am #

    That iconfinder is a cool site! Thanks for the how-to!!!!

    • The Little Hen House September 17, 2010 at 2:57 pm #

      I love that site. I wish I could use so many of them. I hope you find the how-to useful!

  9. Molly On Money September 17, 2010 at 9:43 am #

    Thanks so much for the advice. When I came to your site I was impressed with the design quality.
    I use the free wordpress templates and feel a bit contrained. I recently changed my template just to give me more options but I haven’t spent much time exploring it. I will be looking into more of your blogging advice!

    • The Little Hen House September 17, 2010 at 3:01 pm #

      I changed my theme a few times until I found one that worked for me. I still wish I had more options, but I’m content for now.

  10. Denise@TogetherWeSave September 17, 2010 at 12:07 pm #

    Thanks so much!!

  11. anothermomof2 September 17, 2010 at 12:44 pm #

    This is such a great article to post, I get questions about this quite frequently! Bloggers are often intimidated by a lot of what’s out there, so having easy to follow tutorials are so helpful!

    Do you already have your domain name? You should be able to go in under settings–>Domains and just add in your domain there.

  12. Ashley @ Just Another Mom of 2 September 17, 2010 at 12:57 pm #

    Oh oh, I read that the wrong way! Sorry! Here’s an article that should do what you want: http://help.godaddy.com/article/5182#nameservers

    • The Little Hen House September 17, 2010 at 3:08 pm #

      Thank you! That helped a lot. I think the URL is all straightened out now. Please let me know if you notice that it still isn’t right.

  13. Cori September 17, 2010 at 1:21 pm #

    BEAUTIFUL Blog!! Everyone on #b2sb2b was right! Great job!

    • The Little Hen House September 17, 2010 at 3:11 pm #

      Thanks Cori! I was actually on your site yesterday. I love the picture of you eating the pizza. You’re my kind of girl. ;)

  14. Mrs.Mayhem September 17, 2010 at 4:39 pm #

    Hey! Thanks so much! And my tech support (husband) thanks you, too!

  15. Mad Woman behind the Blog September 18, 2010 at 11:10 pm #

    Holy shit girl. I finally got to working these out! And guess what, I’m a smartie pants. I did the FB one all by myself!
    The rest looks like pure shit and the RSS feed thingie is wonky but I’m starting to get the hang of it. THANK GOD.
    To summarize, you are wicked smaht, I’m lucky to call you my friend and PLEASE write more of these!

    I have so much to learn, *sob*

  16. Lucky Dame September 20, 2010 at 10:37 am #

    Left you a blog award over at my blog!!! Happy Monday!

Trackbacks/Pingbacks

  1. Thursday Thirteen: building the blog! | A Diary of a Mad Woman - September 23, 2010

    […] 12  I know I mentioned her earlier this week but I had to share it again.  My new bestie wrote this great post that taught me how to make my own button.  Give love to Morgan:   http://thelittlehenhouse.wordpress.com/2010/09/16/how-to-add-pretty-social-media-icons-to-your-blog/ […]

  2. How to Add a Custom RSS Icon to Your Blog « The Little Hen House - September 25, 2010

    […] few weeks ago I wrote a post titled, “How to Add Pretty Social Media Icons to Your Blog.” It turns out, a lot of you bloggers out there like to exchange design tips. You know what? […]

  3. Falling In Love Again | Molly On Money - October 3, 2010

    […] ago I started reading the blog ‘The Little Hen House’.  She had a great post called How to Add Pretty Social Media Icons to Your Blog.  Now who doesn’t want pretty social media icons on their blog?  About a month ago I had […]

  4. How to Make a Blog Button with a Grab Box: A Tutorial « The Little Hen House - January 31, 2011

    […] HTML code) I like to share it. If you are visiting for the first time, I also have a tutorial about how to add custom social media icons to your blog as well as how to add custom feedburner/RSS […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: