How to add social media buttons to your blog using images with hover effect

Todays tutorial is all about how to add social media buttons to your blog, both on Blogger and WordPress. Social Media Buttons are a great way of adding links to your favourite social networking sites without cluttering it up your blog with a load of text links. Personally, I love social media icons – they get peoples attention, save space, look professional and work with your branding. This tutorial will go through how to add them to your blog and how to add a cool hover effect. This also works for adding a link and hover effect to any image. Please note that hover effect does not work on wordpress.com blogs, only on blogger and self hosted wordpress sites.

Add Social Media Buttons to your Blog – The Steps

  1. First up, you’ll need some buttons. A quick Google search will return a huge selection (make sure you check policies & copyright before using them). I have a tutorial here for making your own or you could check my blog design shop for some cute social media icons.
  2. Once you have the buttons, you’ll need to upload them to an external hosting site, such as Photobucket. You can then get the direct image link for the code
  3. This isn’t necessary but if you want to add a lot of buttons, you may find it easier to add the code below to a code editor before putting it on your blog. Download TextWrangler for Mac or Notedpad++ for PC. Open the program, add the code below and carefully one by one fill in your details. It’s important that you use the images direct url.
  4. Paste the code to a HTML gadget on blogger or a Text widget on wordpress. If you want your buttons to sit together nicely, make sure there are no spaces between each buttons code. Example of this below. Ensure that your URL’s are correct and save.

Add Social Media Buttons to your Blog – The Code

One Set of Buttons – No Hover Effect

If you have one set of social media icons and don’t want a hover effect, use the following code. Add the URL of the site (Twitter, Facebook, etc), a description and the Direct URL of the Image, which you’ll get on your image hosting site. You can also use this code to link an image on your blog. The target="blank" bit tells the browser to open the link in a new tab.

<a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a>

Add Hover Over Effect

If you want your icons to change when the mouse rolls over them, then use this code. Similarly to above, you’ll want to change the site URL, description and direct image URL.

<a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE">
<img src="DIRECT URL OF IMAGE" border="0" onmouseover="this.src='DIRECT URL OF SECOND  IMAGE WHEN HOVERED OVER'" onmouseout="this.src='DIRECT URL OF IMAGE'" /></a>

Adding Multiple Buttons? No Spaces

Add the code one after another without any spaces! Like shown below, notice that there are no spaces between the closing a tag, and the opening of the next a tag (example – </a><a href...).

<a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a><a href="WEBSITE URL HERE 2" target="blank" title="DESCRIPTION OF LINK/WEBSITE 2"> <img src="DIRECT URL OF IMAGE 2" border="0" /></a><a href="WEBSITE URL HERE 3" target="blank" title="DESCRIPTION OF LINK/WEBSITE 3"> <img src="DIRECT URL OF IMAGE 3" border="0" /></a>

Want them centered?

To centre the social media buttons, simply add <div id="socialmediabuttons"> before the code and </div> after it, like so…

 <div id="socialmediabuttons"> <a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a><a href="WEBSITE URL HERE 2" target="blank" title="DESCRIPTION OF LINK/WEBSITE 2"> <img src="DIRECT URL OF IMAGE 2" border="0" /></a><a href="WEBSITE URL HERE 3" target="blank" title="DESCRIPTION OF LINK/WEBSITE 3"> <img src="DIRECT URL OF IMAGE 3" border="0" /></a> </div> 

Then add the following to your CSS. For Blogger users, this is before </b:skin> or in the CSS area of the Template Designer. For WordPress users, this is your style.css file.

 #socialmediabuttons {text-align: center; margin: 0 auto; display:block;} 

Want them on left or right?

To align the social media buttons to the left or to the right, simply add <div id="socialmediabuttons"> before the code and </div> after it, like so…

 <div id="socialmediabuttons"> <a href="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="DIRECT URL OF IMAGE" border="0" /></a><a href="WEBSITE URL HERE 2" target="blank" title="DESCRIPTION OF LINK/WEBSITE 2"> <img src="DIRECT URL OF IMAGE 2" border="0" /></a><a href="WEBSITE URL HERE 3" target="blank" title="DESCRIPTION OF LINK/WEBSITE 3"> <img src="DIRECT URL OF IMAGE 3" border="0" /></a> </div> 

Then add the following to your CSS. For Blogger users, this is before </b:skin> or in the CSS area of the Template Designer. For WordPress users, this is your style.css file.

 #socialmediabuttons {text-align: right; float: right; margin: 0 auto; display:block;} 

or

 #socialmediabuttons {text-align: left; float: left; margin: 0 auto; display:block;} 

Related Posts

More Hover Over Effects for Social Media Icons, Images, Headers, etc
Add social media links or buttons below each blog post
How to promote your blog using social media
How to rearrange your post header and footer โ€“ labels, author, date
How to add a hover over Pin It Button to your Blog
how to add multiple types of navigation to your blog

Post last updated:

29 responses to “How to add social media buttons to your blog using images with hover effect”

  1. Oh thank you, I’ve been looking for something similar last week but couldn’t find any explanation about adding your own image. Definitely going to add buttons to my blog this weekend, thanks!

    1. Happy to help. Can’t wait to see them ๐Ÿ™‚ x

  2. Paula

    Thank you sooooo much. You made this so easy (after I decided to take the leap). The tutorial and icons are a great help to a newbie.

    I do have one question. I have two rows of icons. I’d like to have the bottom row offset from the first so that it looks like it’s kind of a zig zag pattern with the top row. I’m guessing I’d enter the code before the first icon of the second row? Also what snippet of code would I need to enter? I know I’d have to play with the number, but if you could give me an idea of the code, that would be greatly appreciated.

    1. Awh Im so sorry for the delay, I wrote back to you but it hadn’t saved, silly me. Very sorry! Thank you, I’m glad you found it useful. If you notice my social media icons, they are kind of staggered. I just have them centered but because there are more on the second row, they created a stagger themselves. You could use the following before and after your code.

      <div id="socialmediabuttons1"> ... FIRST ROW BUTTON CODE HERE </div><div id="socialmediabuttons2"> ... SECOND ROW BUTTON CODE HERE </div>

      and then in your CSS, add the following, changing the number to suit your layout

      #socialmediabuttons1 { padding-left: NUMBERpx; }
      #socialmediabuttons2 { padding-left: NUMBERpx; }

      Hope this helps, sorry again about the delay xx

  3. Darryl

    Hi, I can’t get the hover effect to work.

    Is the second direct url meant to link to a different colour button?

    Assuming this is the case, when I put in the code in the text widget (wordpress) and click save, it automatically removes this part:

    (onmouseover=”this.src=’DIRECT URL OF SECOND IMAGE WHEN HOVERED OVER’” onmouseout=”this.src=’DIRECT URL OF IMAGE’”

    Any ideas?

    Many thanks friend.

    Darryl

    1. Hello, unfortunately the hover effect no longer works on WordPress without upgrading to premium features in order to access the CSS. Very sorry about this. If you really want the hover effect, you have 3 options – upgrading to access the css, moving to self hosted wordpress.org or moving to blogger.com but that would be a big decision. You can read more about blogging platforms here – http://xomisse.com/blogging-platfrom-wordpress-vs-blogger/ if you are interested in the differences between them. Apologies again x

  4. Thank you for your tips and buttons. I have been trying to put your silver sparkle glitter buttons in an HTML/Java script gadget on my sidebar, but nothing appears except the title I gave them all (I’m social). I did put the images on Photobucket. Is there something I’m forgetting? Thank you!

    1. Hi lovely, you need to use the direct image url not the url of the page. You’ll see over on the right on this page, in the share box it says “direct”. Use this code which looks like http://i1051.photobucket.com/albums/s423/MsBubu/buttons_08_zps802409db.png instead of http://s1051.photobucket.com/user/MsBubu/media/buttons_08_zps802409db.png.html?sort=3&o=8. Hope this helps ๐Ÿ™‚ x

  5. very nice post keep it up, and keep sharing

  6. Hi,

    Thank you so much for your tutorials. There are super helpful. I am trying to put social media icons on my sticky navigation bar. I am trying to have them centered on the same vertical line as my pages on the right side of the window.

    For some reason, the icons go further out the window. How can I place them exactly like my pages but on the other side???

    Many Thanks,

    1. Adding icons are tricky because of the size compared to text so make sure to get a balance there. Wrap the navigation and the social media icons in separate divs, then position them using the div id.

  7. I added the icons (centered) following all of yours steps but somehow when I click the image of the icon it does not open. There opens a page on my blog saying: Sorry, the page you were looking for in this blog does not exist…
    What did I do wrong???

    1. Make sure the links (WEBSITE URL HERE) are correct, copy the URL and open in a different tab to make sue they are linking to the correct site.

  8. Hi,

    First I’d just like to say that you’re posts are amazing and so useful. I only found your blog yesterday but it has been so helpful.

    I’m a complete beginner when it comes to code, I just copy and paste where I’m told to. I added the sticky navigation bar to my blog yesterday and am trying to add my social media icons to the left of my pages which I would like to have centred. I can get my pages centred and my icons on the left but not the same line. My social media icons go on the line underneath which looks odd and makes my navigation bar quite wide. Am I doing something wrong? Also, how do I indent the icons so they aren’t right at the edge? (like how your icons are)

    Thank you for your help
    Jade

    1. Hello Jade. Make sure the navigation list isn’t set to 100% or is too wide that it runs into the social icons, otherwise they will move to the next line. Add padding to the lists on the right and left so they are indented slightly.

  9. I’ve been using your tutorials for the last couple of days now to give me blog a facelift and they’ve been absolutely fantastic! It looks way better than it did before and your instructions are really easy to follow. Thanks for all your help ๐Ÿ™‚

    1. Thank you Ciara, so glad you like them!

  10. HI ELAINE!

    Thank you so much for your tutorials. I’ve been using your blog as reference for all my coding needs. I used this tutorial to add social media icons on my blog with the hover effect. I just want to ask how you increase the space between each icon. Hope you could help me.

    1. Hello, you can use padding: 0px 10px; to add space to the left and right of the icon.

  11. Hi, I was wondering if you would be able to do the coding for me if I were to create the buttons myself?

    1. Hello, yes of course! You can put the tweak order through here.

  12. This is a great post! I always love seeing the new ways people code to make their blog more interactive and this is one of them! Thanks for sharing this because now I’m going to have to try it out on my own blog! (:

    Single Vegas Girl
    http://singlevegasgirl.blogspot.com

  13. Hello,

    I am stuck! I cant reduce the spacing between my social media icons on my navigation bar? Can you help please?

    Your tutorials are amazing ๐Ÿ™‚

    Thank you

    1. Hi Rhiannon, thank you. Try #socialmediabuttons a {padding: .6em .5em;} and alter the second value .5 if you want to alter the space.

      Also, you should move the social icon ul out of the text link ul as shown here. I would also recommend removing the center tags wrapped around them as they are now depreciated. There’s information on that here.

      1. Thank so much for the help

  14. Your tutorial are so useful! I’ve been trying to figure out how to add space between each icon but can’t work it out. Can you help?

    1. Thanks Claire, you can use #socialmediabuttons a {padding: 0 5px;} to add spacing ๐Ÿ™‚

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up youโ€™ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.