GirlsWhoCreate: How To Add Social Media Icons to Your Blog | For Blogger & Wordpress

Having links to all of your social media pages front and center on your blog is very important. It let's readers know what pages are really your's and links them directly so they don't have to go searching. And when the code is right they can be linked to your social media without ever leaving your blog!

Today I'm going to show you a code that works for both blogger and wordpress blogs. Any blog that allows you to add HTML gadgets really. I'll show you how to add regular buttons and buttons with a hover effect.

This code is fairly easy to edit and add it to your blog. It is also very easy to add more buttons once you've already posted it.

First we have to edit the code to your images and site links. Then I'll show your how to add it to Blogger then Wordpress.

1. THE CODE

That's all the code you'll need. You just have to add it over and over, one after another, for each button. All you have to do it edit it right for each button.

2. EDITING THE CODE

So you need social media icon images. You can get some on Etsy or you can check out Carrie Loves post for some cool free ones. I made mine with photoshop.

Once you have your images you need a URL for them for the code. You can get this code by uploading the images to Photobucket or another photo hosting site. Or you can get the code straight from Blogger or Wordpress.

To Get the URL From Blogger/Wordpress

1. Open a new post page. Click add an image and select all of your social media icons.

2. Go into the HTML section of the post and look for a code like this:

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisH4D7lolR9vhybijJ96yGeo7_BkgQFdXhPeBfUdqdkbx92fjLYXn05zfvZ2WXjAelEyzybCq1mzH14K7RsxLQBVr4XUp1_RfkDOEE-Mg12nmadL3FJDGPfA5OpSzTJn3TmUyNWHUCbUk/s1600/Etsy.png"

There will be a line of this for each image and the URL will be different for each image. You need the URL of each image for the code. Copy the URL in between the " " This is the Image URL.

Now that you have the image URL it's time to edit the code. Here's the code again.

For each button replace the YOUR IMG URL HERE with the correct button image URL. And replace YOUR SOCIAL LINK HERE for your site. Make sure the " " are still there.

You can also change the img alt to fit the site. I copied this code from the top of my social icons so this is the one for my YouTube channel.

Repeat the code as many time as your need. It should look something like this.

You need them to be one after another so there aren't any weird spaces in between the images.

Also make sure your do not delete or change Target="_blank"> This code makes the site linked open in a new tab instead of taking the reader away from your blog.

Centering the Buttons

To center the code all you have to do is add a Center command before and after the code.

Center commend for HTML is

It should look like this:

Aligning the Buttons to the Right

To align the icons to the right you do the same as the center command but a bit of a different code.

Align Right Commend for HTML is

It should look like this:

The code is automatically aligned to the left so there is no need to extra code if your would like it to align to the left.

3. ADDING THE CODE TO YOUR BLOG

Now that you've got the code all edited it's time to add it to your blog.

Blogger

1. Go to Dashboard>Layout>Choose Where You want your buttons and Click Add a Gadget

2. Click "HTML/JavaScript"

3. Copy and paste your finished code. I suggest writing it in a post or page and just never publish it or writing it in word document.

4. Click "Save" Go to your blog and check your button and make sure you like them and that they work properly.

Wordpress

1. Go to Appearance>Widgets

2. Choose where you want it to go and Add a Text widget.

3. Paste your finished code in the box and click "Save"

4. View your blog and make sure all the links work.

And now you have cute social media buttons! If the buttons do not show up correctly double check that your placed the image URLs in the correct places and that you didn't delete any of the little bits in the code.

HOW TO ADD A HOVER EFFECT

It is the same editing and uploading processes but a different code.

1. THE CODE

That's all the code you'll need. You just have to add it over and over, one after another, for each button. All you have to do it edit it right for each button

2. EDITING THE CODE

To Get the URL From Blogger/Wordpress

1. Open a new post page. Click add an image and select all of your social media icons.

2. Go into the HTML section of the post and look for the section of code like this:

There will be a line of this for each image and the URL will be different for each image. You need the URL of each image for the code. Copy the URL in between the " " This is the Image URL.

Remember you need two Images for each button. One Base Image, the image you want when the mouse is not on the image, and one hover image for when the mouse is on the button.

Now that you have the image URL it's time to edit the code. Here's the code again.

For each button replace the IMG URL HERE with the correct button image URL. And replace YOUR SOCIAL LINK HERE for your site. Make sure the " " are still there.

You can also change the img alt to fit the site. I copied this code from the top of my social icons code so this is the one for my YouTube channel.

Repeat the code as many time as your need. It should look something like this.

You need them to be one after another so there aren't any weird spaces in between the images.

Also make sure you do not delete or change Target="_blank"> This code makes the site linked open in a new tab instead of taking the reader away from your blog.

Add them the same as above and you have cute social media buttons with a hover. If the hover does not work properly or the buttons do not show up correctly double check that your placed the image URLs in the correct places and that you didn't delete any of the little bits in the code.

And there you have it. Cute social media buttons that you have complete control over and no third party logos.

If you have any questions please leave them in the comments below. I'll help any way I can.

As I said if there aren't working make sure your didn't remove or change anything but the all caps text in between the " " and that all the " are still there. If it's still not working double check the Image URLs. A little may have been left off when you copied it and put it into place.

Please don't hesitate to ask any questions in the comments or by email! girlswhoblogrt@gmail.com

xoxo, Cassie

P.S. If you are still overwhelmed by coding it, I can code it for you! I charge $3 for the single buttons and $5 for the hover version! I can also make you custom buttons if you can't find any online you like! Email me at zombiegoddessxi@gmail.com

About The Author

Cassie // ZombieGoddess Beauty

My name is Cassie. I write a beauty, geek & lifestyle, a little bit of everything blog. I'm a nerdy gamer with a lipstick addiction & a true makeup obsession. I created GirlsWhoBlog to retweet great blog posts and share other bloggers content! I am so excited that it is now a fully fledged blog!

FOLLOW CASSIE