0
blogging

How To Add Clickable Social Media Icons to your Blog Banner

imagemapfeature copy

I get asked about my blog header a lot. And I love sharing knowledge and helping out other bloggers,so I decided to put together a tutorial on how I customized it and added clickable social media icons to it.

You don’t need a lot of geeky knowledge to do it either.

Here’s how…

First, create your banner and include the social media icons images you want to use. There are many free social media icons you can download online or you can purchase them from designers or even make your own.

If you don’t know what size to make your banner, the easiest way to find out is to:

Right click on your existing website banner.
Click – Open image in new tab. The full-size image will appear in a new tab.
Copy and paste that image into a picture program like Paint.
To get a clean, white background just SELECT ALL and DELETE.

You should now have a clean white background at the exact size you need your banner.
Save that white background as a jpeg.
Next, open up that new image in your picture program – Photoshop or PicMonkey and design your new header. 

I use Photoshop to make all my graphics but you can use any picture program.

Make your banner clickable…

Once you have your banner the way you want it. Save it.

Now go to one of my favorite FREE graphics tool on the web -> Image Map Tool.

You will see a screen like this. Upload the image you just made.

How to Add Clickable Social Media Icons to your Website Banner Using Image Map Tool

Click Start Mapping, then Continue and it will bring you to a screen like this.

Right Click – select Create Rect

screenshots_Page_11

This will bring up a pop-up box where you can select which area you want to be clickable.

The first icon here is Pinterest. So drag the points to the ends of each button. Now in the pop-up box, where it says MAP URL, enter in your link.

Next, click on the Events tab. You want the link to open up in a new tab or page. Select _blank in the first option.

screenshots_Page_2

SAVE. Do this for each icon.

Once you are done mapping all of your icons, Right click and select GET CODE.

That will bring you to a screen where you will be able to copy the HTML code to put on your site. The second box will have your code.

Now notice this little message here in red? This means that this is just your temporary image URL unless you subscribe to the image-map site.

How to Add Clickable Social Media Icons to your Website Banner Using Image Map Tool

 

I want to host my own image and not have to rely on the site. So in order to do this, upload your new banner to your own image hosting site, whether that be in your Word Press Media Library or Photobucket or wherever else you have your blog photos.

I uploaded mine to my Media Library in Word Press.

screenshots_Page_3 copy

This is my image in my media library. The red arrow is pointing to the IMAGE URL on my own site. This is what I need to replace in the HTML code.

How to Add Clickable Social Media Icons to your Website Banner Using Image Map Tool

You can’t edit the code in this box. So select all the code and paste it into your header or widget on your website where you want it to display. Where you put in the header code depends on your layout and your blogging platform – (Blogger vs WordPress).

Now you can replace the image source with your own. Replace the URL in quotes after “src=“. I highlighted it above.

And now you have your very own customized banner with clickable social media icons!

If you aren’t familiar with HTML and don’t feel comfortable replacing the code, you can always subscribe to the Image Map Tool website and use the original code. I just chose not to do that.

Check out my signature below. I made that that clickable as well! You can do so many things with this.

Hope this tutorial has helped!

More From Story of Five

You Might Also Like

28 Comments

  • Reply
    Melinda ~ Marshmallow Mudpie
    January 21, 2014 at 9:56 am

    Awesome! Thanks so much for posting this! 🙂

  • Reply
    anung
    January 21, 2014 at 1:44 pm

    Hi, i followed your instructions, but its not working at all, i mean ater i’ve pasted the html code, the images do appear, but the links don’t appear at all..help!!

    • Reply
      Melanie
      January 21, 2014 at 4:51 pm

      I just looked at your site. Did you get it to work? I can click the buttons at the top, is this where you added them?

  • Reply
    Diane @ Vintage Zest
    January 21, 2014 at 4:21 pm

    This is awesome! I was JUST going to post this on my “Stumped on Sunday” series this week because I had no idea how to do this. Thanks so much and I’m off to try my own! 🙂

    • Reply
      Diane @ Vintage Zest
      January 21, 2014 at 8:26 pm

      I just did mine! Check it out: http://www.vintagezest.com !

      • Reply
        Melanie
        January 21, 2014 at 9:51 pm

        Diane, that looks fantastic!

  • Reply
    Kimberley Tobin
    January 21, 2014 at 6:08 pm

    Awesome tutorial!! Thanks so much for making it so easy to understand!

    • Reply
      Melanie
      January 21, 2014 at 9:51 pm

      Glad you found it helpful Kimberley!

  • Reply
    Tuesday Mashup | Traveling With T
    January 21, 2014 at 9:05 pm

    […] Mommy Mentionables has the info on how to make ad CLICKABLE social media icons to your website banner (and I must say that this is such a good idea!) […]

  • Reply
    Trish
    February 6, 2014 at 11:25 am

    Hi Melanie, trying to follow your instructions – problem with uploading to image library. Do you upload the image source from (image map) and then where does the code go?

    • Reply
      Melanie
      February 8, 2014 at 9:00 pm

      Hi Trish! Sorry I am just seeing your comment. Did you get it to work? The image you upload to your library is just the banner that you made with the icons and anything else you want in it. All that does it put it on your server and gives you the image URL for that specific image. That is what you use and replace in the Image-map code that you got from the website. Let me know if that still doesn’t make sense.
      If you are talking about the actual code, that depends on your theme, whether your on WordPress, Blogger etc. You would put it where your header goes. Some WP themes have a separate header section that you can customize. I know that Blogger has it’s own as well.

  • Reply
    Angela Johnson
    February 15, 2014 at 9:17 pm

    THANK YOU for your post! Yours was the only one I could find that used the new image-maps layout. I have a problem though- I did everything you posted, but all my links head to FB with the exception of my email which takes me to Pinterest?????? The icons I made are flowers- not the watercolor ones currently up. Here is my html:

    • Reply
      Melanie
      February 16, 2014 at 9:42 am

      Angela, your link didn’t come through. Let me take a look at your blog. Sometimes when that happens it’s because your icons are overlapping, did any part of the squares (when you were setting it up) overlap the other? If so, that might be why.

      • Reply
        angela johnson
        February 16, 2014 at 12:57 pm

        They did not overlap. They are not on the site right now since I couldn’t get them to work.

        • Reply
          angela johnson
          February 16, 2014 at 12:58 pm

          My HTML won’t post, but it has all the links, etc in it??

  • Reply
    Anna Luisa
    April 23, 2014 at 11:43 pm

    Great! Thank you so much for sharing! This is such a big help! 🙂

  • Reply
    Kayla @ TheEclecticElement
    April 28, 2014 at 3:27 pm

    This is a fantastic post!! I’ve been trying to figure out how to add clickable social media icons in my banner for quite awhile now 🙂

    My only question-I’ve gotten as far as making everything and getting the HTML. I attempted to open a HTML/Javascript widget in Blogger and pasted the code in, but when saved it doesn’t show up. Any suggestions?

  • Reply
    A Moms Rambles
    May 20, 2014 at 11:11 pm

    OMG!!! You don’t know how long I have been searching for a post on how to do this!! You just saved me HOURS of searching through HTML code, not to mention the headaches that go with it!!! THANK YOU!!!!!!!!!!!!

  • Reply
    Cecilia Losada
    May 26, 2014 at 9:10 am

    Hello!!! your post is amazing, im from Spain!!
    I made all you explain, but i have a doubt, i have the map image, but i dont understand how do i upload mi image on Photobucket, and then make it on Blogger, sorry my english!!
    What i must do?? copy htlm code on photobucket? only the image? i dont understand!!
    Thanks!!

  • Reply
    The Best of Pinterest: Blogging Tutorials | Classy Cathleen
    October 12, 2014 at 9:24 pm

    […] Thoughts Advertising and Affiliate Services for Bloggers to Use on Their Blogs on Bloggers Bazaar How to add Clickable Social Media Icons to your Blog Banner on Mommy Mentionables DIY Photo Light Box on Flax and Twine How to Create a Custom Pinterest […]

  • Reply
    monica
    November 8, 2014 at 6:53 pm

    I’m just starting my blog and I absolutely love your tutorial! I would have never known about image-maps without your instructions. I’m on the blogger platform, so I had to do a little html code magic to be able to apply the banner, but it all worked out. I love the note that you added about using your own personal photo library rather than rely on image-maps.

    This is so helpful! Thank you thank you thank you!

  • Reply
    Deborah @ Mommy Crusader
    January 18, 2015 at 6:46 pm

    Thank you! I think I have it working now on my site(http://mommycrusader.com). Here is my question. The buttons don’t seem to work on mobile. I tried your site on mobile, and they work on yours. Did you have to do anything different on mobile to make it work?

    Thank You.

  • Reply
    Kelly Crawford
    February 6, 2015 at 8:24 am

    Melanie,

    Thank you for this. I can’t wait to try it! I’m adding the sharing icon/images to my header and I have one question: where do you get the text font to create your buttons? The “p” and “f”, each with their brand style? Do you know what I’m asking?

  • Reply
    Carolyn Lucento
    June 14, 2015 at 2:31 pm

    This article is incredibly helpful. You are good at de-mystifying this geek stuff for someone like me!

  • Reply
    Blog Design + Resources - Chelsey Thornton - Beauty + Lifestyle
    January 19, 2016 at 10:46 pm

    […] How to add clickable social media icons to your banner. […]

  • Reply
    Elizabeth
    February 20, 2016 at 8:48 pm

    You are awesome! Followed your step-by-step instructions and was able to ‘give life’ to my blog banner. Thanks again!

    • Reply
      Melanie
      May 11, 2016 at 4:19 am

      I just checked it out and it looks great!!

  • Reply
    Chandra
    December 6, 2016 at 12:33 am

    very much easy and helpful. You made my work easy. Thank you

Leave a Reply