BLOGGING TIP: How to add social media icons to your blog

social media tutorial

I’ve recently received a few emails from some of my readers askingΒ how I added the social media icons and my description picture on my blog, so I decided to post a tutorial explaining the process. It’s pretty easy once you get familiar with it, and you can apply the exact same process to add other buttons/pictures and make your site look more personal. Everything you see on my blog has been made by me; I don’t necessarily like the idea of spending money on it, plus I enjoy experimenting and doing it myself. I’m by no means a computer savvy girl, so if I figure this one out, you can as well! πŸ™‚

Let’s get started then.

step 1follow the arrow

First, you need to find social media icons that you want to use. It always looks better if you choose colors or designs that flow with your blog theme. Just google “free social media icons” and a million different options will show up.Β Download the icons and save them to a folder where you will be able to easily find them.

Here you have some free sources that I personally like:


Next, open a new post, select “add media” and upload your social media icon. This is just like adding a photo. My example will be for a facebook button, but you will need to repeat the same process for the other social media you would like to include as well.

social media tutorial 1

social media tutorial 2

social media tutorial 3

social media tutorial 4

social media tutorial 5


Now go to your social media profile, in my case my facebook page (which you should Like to make this girl happy, btw ;P), and copy the web address. Then go back to your post and click the icon image to edit it. A window will open, and you should paste your web address where prompted for a Link URL.

The same window also features an advanced settings tab. Use this tab to modify the size of your buttonΒ as you desire.

social media tutorial 6

social media tutorial 7

social media tutorial 8

social media tutorial 9


Repeat the aforementioned steps with your other social media profiles. Once completed, it’s time to copy the HTML code from the text tab. What a relief you don’t have to code that yourself, huh? But if anyone asks, just say you did and hold your head high! πŸ˜‰

Save your post as a draft in case you want to modify it in the future.

social media tutorial 10

social media tutorial 11


Next, go to Appearance > Widgets and scroll all the way down until you find the text widget. Drag it up to the sidebar box and place it wherever you want your social media buttons to appear. You can add a title above the icons if you’d like with a little description such as “Follow me”.

social media tutorial 12

social media tutorial 13

social media tutorial 14

social media tutorial 15


Lastly, open up the text widget box and paste your HTML code. Save it, and voilΓ ! Your blog has now awesome social media buttons on it! Make sure your web links work properly when you click on the icons.

social media tutorial 16

social media tutorial 17


final result

social media tutorial 18

Isn’t it easier than you expected? Go ahead and try it out! πŸ™‚



62 thoughts on “BLOGGING TIP: How to add social media icons to your blog

  1. Pingback: Get some of your time backYou By My Side | You By My Side

  2. Hi! Thank you for this very informative and helpful post!!! ❀ ❀ I will be sure to try this out as your blog is gorgeously put together! =)

      • Totally did! I added some icons to my page. Thank you again!!!! ❀
        Oh, do you know how to make an icon of your name signature at the end of each post? I've always wanted to put my name in a girly signature font, any help would be great!! Thanks, again!

      • Yay! They look fantastic!
        I made my signature using Photoshop, but before I had access to it, I used the online editor named PicMonkey. There are some free fonts you can use! I can try to design one for you and send it to your email address.:)

  3. Pingback: Social Media Icons |

  4. Pingback: This ‘N That Thursday | 2 Brown Dawgs Blog

Leave a Reply

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

You are commenting using your 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