3.21.2013

How to Add Social Media Buttons to Your Blog

I just recently added some social media buttons to my blog when I decided to clean up my sidebar. I know this isn't my usual kind of how to post but I figured this could be helpful to some of you. At least this way you won't have to waste so much time trying to figure it out like me. If you don't already have some on your blog and want some here's how I did it.
1. First of all you are going to need your image. I figured out my sidebar size and divided that by the amount of buttons I needed in a single line. 
2. I created my image in photoshop. I just used the shape tool and drew in the symbols for the button with my tablet. Or you can draw the circles yourself, like I did in the illustration above. Once you have your image, upload it to photobucket.
3. Open up the page to update your layout of your blog and add a gadget. Select HTML/Javascript.
This is the html code you will use. 
<a href="DirectLink"><img src="PageLink"/></a>

In the above code the yellow portion represents the web location of your image. When you open your photo in photobucket you can copy the direct link and paste it into the code.
The green portion represents the url address for the page you want the image to open. 

Do this for each of your buttons.

I know I don't know too much about all of this coding stuff but if this helps at least one person I'll be a happy girl.

xoxo erica

Oh and one of the new buttons I added is for bloglovin.
If you're not already, please stop by and feel free to follow me there.

And I always wanted to say thank you to everyone for your sweet comments yesterday. It's been about a week since William passed and hearing all of your comforting words really helped. 

12 comments:

  1. This is so helpful Erica! I spent forever going around in circles trying to figure this out. I want to update my blog haha :)

    Trendy Teal

    ReplyDelete
  2. Great tutorial! I had to google around for ages to sort out how to add buttons to my side bar- wish this post was around then. :)

    Happy Thursday!

    -Ashley
    http://lestylorouge.com

    ReplyDelete
  3. I just saw that you're on Glamour.com! So cool!

    http://www.glamour.com/beauty/blogs/girls-in-the-beauty-department/2013/03/paint-bobby-pins-with-nail-pol.html

    ~Sara

    ReplyDelete
  4. I wish I could have known about this when I was trying to design my blog. I got so frustrated and just let someone else do it. I'm not computer savvy!

    Amy
    Fashion and Beauty Finds

    ReplyDelete
  5. Great advice Erica, I've been wanting to add a decent Twitter button to my blog for a while but now I've finally got the best way of doing it.

    ReplyDelete
  6. I think this is a great post!! I know when I wanted to put them up it was so difficult finding something that worked. xo

    ReplyDelete
  7. Hi Erica, thanks for this excellent tech advice, your button illustrations are so cute.

    ReplyDelete
  8. HELLO! HOW'S IT GOING? :) I love the passion you have for your blog! I am following. I hope you can check out my site: http://theproverbs.net and FOLLOW. Also on bloglovin, facebook, instagram, twitter, tumblr and even lookbook if you want :3 <3

    NEW POST UP, YOU HAVE TO SEE IT :)

    Steven

    ReplyDelete
  9. Great post, so helpful, it can be confusing sometimes.
    Simona
    www.lakenmoon.blogspot.com

    ReplyDelete
  10. Thanks for this! I'm always confused about technical blogging things.

    ReplyDelete
  11. Lovely blog you got going on here! Thank you for sharing this with the rest of us! I would love to see you around my blog some time and maybe follow each other!
    Stay in touch!

    xx

    ReplyDelete

Follow Sea of Blooming Dreams