Add Social Media Icons To Blog

Ever wonder how to add social media icons to your Blogger blog? Or maybe your WordPress site?

HOW TO ADD SOCIAL ICONS TO BLOGGER: 
If you're using Blogger, you'll need to host your images somewhere else first.

There are numerous free image hosting sites online -- a popular one is Photobucket, for one, it allows you to upload transparent .png files & keeps them that way! Most social media icons that you buy online have a transparent background which is really important if you are planning to use your icons on a colored, textured, or patterned background!

After you have uploaded your images elsewhere, you'll need to copy each direct link and paste it into the code below to correspond with your social media link.

////////////////////////////////////////////////////////////////////////////////////////

Here's the handy little code to add your icons to Blogger!

Use an HTML/Javascript gadget & place it in the sidebar or wherever you want your icons placed on your blog!

You'll need to replace 'REPLACE WITH CORRECT URL' with your social media link...our's looks like this...

<!--FACEBOOK-->
<a title="Follow On Facebook" href="http://www.facebook.com/ellothemes" target="_blank"><img src="INSERT URL FOR ICON IMAGE HERE"></a>

And then replace, "INSERT URL FOR ICON IMAGE HERE" with the direct link you copied for the image!

Keep the <center> </center> at the top and the bottom of the code to keep it centered! If you don't want it to be centered, just remove these :)

///////////////////////////////////////////////////////////////////////////////////////

<center>

<!--TWITTER-->
<a title="Follow On Twitter" href="REPLACE WITH CORRECT URL" target="_blank"><img src="INSERT URL FOR ICON IMAGE HERE"></a>

<!--FACEBOOK-->
<a title="Follow On Facebook" href="REPLACE WITH CORRECT URL" target="_blank"><img src="INSERT URL FOR ICON IMAGE HERE"></a>

<!--INSTAGRAM-->
<a title="Follow On Instagram" href="REPLACE WITH CORRECT URL" target="_blank"><img src="INSERT URL FOR ICON IMAGE HERE"></a>

<!--EMAIL-->
<a title="Contact" href="mailto:REPLACE WITH EMAIL"><img src="INSERT URL FOR ICON IMAGE HERE"></a>

</center>

///////////////////////////////////////////////////////////////////////////////////

HOW TO ADD SOCIAL ICONS TO WORDPRESS:
For WordPress, you can host the images with your WordPress hosting or upload them to a free image hosting site just like with Blogger!

Then, add a Text widget (these allow HTML code!) into the sidebar of your WordPress.org site & follow the steps above for adding in your icon set!

You can make your own icons, or buy a set of the many available online! Take a look at our icon sets on Etsy!

ADDING AN EMAIL LINK:
When adding an email link to your website, make sure to add "mailto:" in front of your email address for it to work correctly when clicked! :)