Easily Create & Install Custom Social Media Icons

I have gotten a lot of emails asking about creating or installing social media icons. After re-typing the same emails a thousand times, I figured I should probably just share it on the blog!
This "how to" will explain how you can create social media icons in any color and also how to install them on your blog.
First of all, decide which buttons you want to appear on your blog. Below are the most common buttons used by bloggers. For each button you want to create, right click the black image button and save to your desktop. Make sure you save them as .png files. This is VERY important.


Now, go to PicMonkey.com and click "Edit A Photo" at the top. Upload a blank white image. You can search "blank white" in Google Images to download one if you don't already have one saved. In Pic Monkey, Click on the menu option "Overlays". Then select "Your Own". Upload one of the black buttons that are saved on your desktop. Then use the color slider to change the button to your desired color. Go to "Basic Edits" in the left hand menu. Click on "Crop" and crop the image so that only your button remains. Save your new button as a .png and repeat all of these steps with the remaining buttons you wish to create.

Next, go to the photo hosting service you use. I have photobucket. Upload all of your new buttons. Once you are finished, head to your Blogger dashboard. (If you have Wordpress, I am not sure exactly where you place HTML code, but the codes below should still work for you regardless)
Click on "Layout". Now wherever you want your icons to go, click "Add A Gadget". Select the HTML/Javascript option. Once the box opens up, select the codes below that correspond to the buttons you created. Do not paste in the Header words (ie, Email, Facebook, etc). Those are just written so that you know which codes go to which buttons.

Email

<center><a href="mailto:YOUR EMAIL ADDRESS"><img src="THE DIRECT URL OF YOUR UPLOADED BUTTON" height="35" width="35" alt="Email Me" /></a>

Bloglovin, Facebook, Twitter, Instagram, Pinterest, etc.

<a title="Follow Me On Bloglovin" href="URL TO BLOGLOVIN PAGE"><img alt="Follow Me On Bloglovin" src="THE DIRECT URL OF YOUR UPLOADED BUTTON" height="35" width="35" border="0" /></a>

Ok, so let's start with the Email code. Place your email address where it says "YOUR EMAIL ADDRESS". Make sure there are no spaces between the : and your address & then between the last letter of your address and the ". Paste the direct image URL address to your email button that you uploaded where it says THE DIRECT URL OF YOUR UPLOADED BUTTON. Again, no spaces before or after the URL, in between the url and the ".
For Bloglovin, Twitter, Facebook, or any of the other buttons above, the second code will work. The code above is for Bloglovin, so if you use it for Twitter, just change the parts that say "Follow Me On Bloglovin" to "Follow Me On Twitter". And instead of using the URLs to your Bloglovin page, use the URL to your Twitter page.
Now if you want your icons to be bigger or smaller, change the height and width numbers. They are currently at "35". Just make sure that if you change them, you keep them equal so it doesn't distort your buttons. (i.e., height="50" width="50").
Want your buttons centered below a picture or something else? Place <center> before the first button code you use and </center> at the very end of the last code.
It's really very easy once you get the hang of it! If you have any questions, let me know (:


"Each day I rediscover what my body is capable of doing."
Check out more from Tamara: