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

Buy me a coffeeBuy me a coffee

29 Comments

  1. […] XOMISSE : She has a whole page of tutorials for the beginner blogger. The instructions are very clear and easy to follow. Thanks Ellie, you helped me get my social media buttons up and running with your add social media buttons post. […]

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

  3. 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

  4. 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

  5. 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

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

  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 🙂

  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.

  11. 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.

Sorry, comments are closed!