how to create your own social media buttons

Have you ever wondered how to create your own social media buttons with links to your different social sites? They are so incredibly easy.
I recently just created new social media buttons to go on the sidebar of my blog and I love how easy and simple they are to create.
1. Create your own custom image or download free social media buttons and upload them into a empty blog post. 

For example, you can use this site to have your own social media icons. They will show up as a folder in your downloads if you use a folder of social media buttons from a website, and I recommend you move the your file of images (or custom images) to wherever you keep your blogging materials, that way they are easy to access when you upload them.

You need to upload the images one by one from wherever you saved them via your image tab into a new draft post. They will look like this (not the right format, but we will change it later): 

Make sure you don't delete this page if you end up publishing these on your website! If you end up deleting them, the image address that is used to identify what your images are will not be able found and therefore your images will not show up. 

2. Adjust the order of the pins so that they are evenly spaced in a way that fits your preference.

For these specific social media buttons, I want to put them horizontally. Just drag and move them into the order that you prefer. If they don't look perfect (as mine don't at the moment), that's okay because when you add your social media link it will adjust the size of the image. The reason I started using Twitter instead of YouTube for this tutorial is so that you can see how when you put in the links for the images, it re-formats them in step 3: this is a common problem but it didn't occur for me when I actually made the ones found on my blog)

 3. Click on the image to add a link to your social media.

For some reason sometimes you have to click the image, then the link button and then sometimes you have to press the link button again for it to pop up.

In the link box, copy in the link to your social media. Go to your social media page and copy and paste the link of the location where you want people to go. For my purposes, I don't have twitter, so I'm going to put the link of Miranda Sings twitter on my button.

Do this for all of your social media buttons and for your email, just switch the link option to "email address" instead of "web address".

You can now see that the social media buttons are all evenly spaced because it automatically formatted them when I put in the links. But you can make anymore format adjustments after you have put in the links so that it is acceptable to your liking. 

4. Copy and paste the html code of your draft.

To get your html code, switch from the compose tab to the html view and then copy and paste. This is what my code looks like for my specific buttons.

This is why it is important to not delete your draft once you have published them on your blog: the websites that start with "https://4.bp.blogspot.com" are unique to the specific image you have used so if you delete the post those links are no longer existent and your html code will not register. Even if you reload them later, the link to your image has changed and your html code will not be able to identify in the image. 

So make sure you save the post and don't delete it as long as you have the social media buttons on your blog. 

5. Insert that code into a new sidebar gadget or footer gadget.
Click on the place where you want to insert your new gadget, in the layout section of your dashboard and click on the "HTML/JavaScript" option. Copy and paste that code when you are under "edit html" mode.
Then switch back over to "rich text" so you can see how your buttons turned out.
If it looks the way you want it too, click save and then "save arrangement" in the layout section of your blog. It will automatically publish them wherever you placed them. It may show up in more than one line in the gadget area, but when you actually look at your website, they will all be in one line depending on the size of your sidebar/footer.

For example, I put mine the footer of my layout and they can be seen when you view your blog. When you click on the images, they take you directly to the linked social media!
Another reason that you want to save the draft of your post is so that if there is a formatting problem: you can go back and fix it in the draft, or if you are an expert coder, you will know which code is messing up the formatting.

And there you have it! There is the finished product of your social media buttons, and they are extremely easy to create!