ZombieGoddess Beauty: How to Add Social Media Icons to Your Blog for Blogger & Wordpress

August 26, 2016

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.

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. 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. They are going on Etsy soon.

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/AVvXsEh6JOWZ_V5WO64ee_XmFyPIqNUF0KnOeLdD5pALgHUZzWmSkPz3Cs1KBMZL8J2FYwY_vvtbW2EqpPrQlsnxHw1AkQSF1vP_e07mrq332lwGQP11AcWtJYMOfyFcBdzJmekRs3Qwmvd35wI/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 talking 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 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.

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.

Thanks for reading this post! I hope you enjoyed! If you have any questions or concerns please feel free to message me.