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!

Get New Posts By Email

Enter your email to get new posts about Motherhood, Parenting Tips, Homemade Beauty Recipes, Kids Activity Ideas, Crafts and more...


If you like what you just read please click to send a quick vote for me on Top Mommy Blogs- The best mommy blog directory featuring top mom bloggers
Read comments below or add a new one... your comment will be visible after approval.

Comments

  1. says

    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!!

    • says

      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?
      Melanie recently posted…How To Add Clickable Social Media Icons to your Blog BannerMy Profile

  2. says

    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! :)
    Diane @ Vintage Zest recently posted…Do Tell Tuesday #7 with Features & Co-Host!My Profile

  3. Trish says

    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?

    • says

      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.
      Melanie recently posted…Homemade Finger Paint Recipe – Ducky Dish Brush Toddler Art ActivityMy Profile

  4. says

    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:

    • says

      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.

  5. says

    Great! Thank you so much for sharing! This is such a big help! :)
    Anna Luisa recently posted…Celeteque Dermoscience Acne Solutions Oil Control Toner: ReviewMy Profile

  6. says

    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?

  7. says

    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!!!!!!!!!!!!
    A Moms Rambles recently posted…Free Animal Stickers from the New York AquariumMy Profile

  8. says

    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!!

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge