24 October 2012

Adding social media icons using the code for clickable image

24 October 2012
Including social icons or follow buttons on your blog is pretty much standard these days and you can find a lot of free social media icons sets on the net.

In this post, I'll just share with you a few quick and easy steps on how to add your own social media icons on your blog.

Facebook iconTwitter iconPinterest iconGoogle+ iconGoodreads iconTumblr iconLinkedIn iconRSS iconEmail icon

How to add social media icons


1. Find a free social media icon set that you like. Simply type in "free social media icons set" or "free social media buttons" in Google and you'll find tons of options. You can choose to download a set or you can pick and choose from several styles. Download the set/icons that you like and save it/them in your computer.

If you like the dark round icons I posted above, you can download them by right-clicking on the icon and selecting Save image as.

2. Upload your social media icons into an image hosting site (e.g., photobucket, tinyurl) and copy down the image url of each icon.

An alternative to using an image hosting site is uploading them into your blog by creating a new post, inserting (or uploading) the images into the post, and saving the post as a draft. You can then copy the image url of each icon by right-clicking on the image and selecting Copy image url. Save the image url's in a text file so you can retrieve them later. Click on Close to keep your post as a draft.

3. Go to Layout and click Add a Gadget. Select HTML/Javascript. Copy the code below for each social media icon, replacing the text in RED with your own url and custom text.

<a href="YOUR SOCIAL MEDIA URL" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="YOUR SOCIAL ICON IMAGE URL" width="50" alt="Facebook" title="Follow me on Facebook"  /></a>

You'll need this code for each social media icon, so if, say, you want to put your Facebook, Twitter, and Pinterest links, your code will look something like this:

<a href="YOUR FACEBOOK URL" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="YOUR FACEBOOK ICON IMAGE URL" width="50" alt="Facebook" title="Follow me on Facebook" /></a> <a href="YOUR TWITTER URL" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="YOUR TWITTER ICON IMAGE URL" width="50" alt="Twitter"  title="Follow me on Twitter" /></a> <a href="YOUR PINTEREST URL" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="YOUR PINTEREST ICON IMAGE URL" width="50" alt="Pinterest" title="Follow me on Pinterest" /></a>

To adjust the space between each icon, you can experiment with the margin measurements (blue text).

To adjust the size of your icon, edit the width (pink text).

If you want the icons aligned a certain way, simply add <p align="center"> before the code, and </p> after the code. You can replace center with left or right, depending on what you want. See example below:

<p align="center">
<a href="YOUR FACEBOOK URL" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="YOUR FACEBOOK ICON IMAGE URL" width="50" alt="Facebook" title="Follow me on Facebook" /></a> <a href="YOUR TWITTER URL" target="blank" imageanchor="1" style="margin-left: 0.2em; margin-right: 0.2em;"><img border="0" src="YOUR TWITTER ICON IMAGE URL" width="50" alt="Twitter"  title="Follow me on Twitter" /></a>
</p>

4. When you're done adding the code and tweaking it, click Save and you're done! :)


Other uses for this code


Clickable images - This is basically the code for clickable images. If you want to maybe add a photo or badge that would redirect to a specific link, you can use this code. If you want an image in your post to go to a specific link instead of the image url, just go to the HTML option and edit the link right after href. 

<a href="EDIT THIS URL"><img src="IMAGE URL" /></a>

Text on hover - You can use the alt and title code you see here if you want to show a line of text when you hover over an image. The difference between alt and title code can be a bit confusing. Here's a link that can explain it better than I can. :P

<a href="MY SPECIFIC URL"><img src="IMAGE URL" alt="TEXT" title="TEXT" /></a>


And there you have it. I use this code A LOT because it's pretty basic and simple. I use it for the header, the page tabs, and for the badges on my sidebar on White Sky Project. ;)

Got any tips or questions? :)

9 comments:

  1. I was so determined not to get yet another WP plugin for this, so you've helped me a ton. Many thanks, this was a really useful tutorial.

    ReplyDelete
  2. This was really helpful! Thank you so much!

    ReplyDelete
  3. I have trouble coding my email so that people can directly email me when they click on the icon? Thank you!

    ReplyDelete
    Replies
    1. Hi Jackie! In the href part, instead of a URL, put in mailto:YOUREMAILADDRESS. Example: href="mailto:leah@whiteskyproject.com"

      Although this opens their default email program (say, Outlook for pc users).

      Let me know if it works! :)

      Delete
  4. Thank you so much for the tutorial Leah !! My blog looks so much cleaner now !

    ReplyDelete
  5. This was so helpful!!! Thank you!

    ReplyDelete
  6. Thank you Leah!! this blog post is sooooo useful!! i finally can get the badges I like!! Thank you!! Thank you~~~~

    ReplyDelete
  7. Thank you Ms. Leah for this very helpful tutorial I'm looking for more html tutorials from you. :) Btw, are you from Philippines? :) Here's my blogspot link. https://www.miathetruth.blogspot.com

    ReplyDelete
  8. This was extremely helpful!! Thank you so much!!!

    ReplyDelete

Thanks for dropping by! :)

© 2014 Color It YOU - Blog Design and Tips. Powered by Blogger.
Legal terms and disclaimers here.