Today’s 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.
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.
Heads up! This post is no longer being updated, so some details may be out of date.
The steps – adding social media buttons to your blog
- 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.
- 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
- 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.
- 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.
The code – adding social media buttons to your blog
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;} That’s it – you’ve now got buttons promoting your social media platforms on your site!
