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