How To Make Social Media Buttons

Tutorial, How to make social media icons, blogger, blogging, html,
I have been asked on a number of occasions how to create social media buttons for a Blogger blog.  Basically you can turn any image into a link to a website very easily just by using an image of your choice and a bit of HTML code.  I have written about this before on my "How To Make A Blog Badge" tutorial but you only need part of that code.  Let's get down to basics.






First things first

  1. Find an image you would like to represent your link.  If you are looking for specific icons then a quick search for "free social media icons" is a great place to start.
  2. Download the images (sometimes called a "pack") to your computer.  Unzip the pack it if necessary (if you right click on the folder that you have downloaded you will see an option to unzip.  You then save the images in a folder on your computer).
  3. Upload the images to an online photo storage (I use Photobucket).  Make a note of the direct link.

Coding

This is the basic HTML for your social media icon.  Insert your own links where prompted by the bold text.
<a href="WEB LINK HERE" target="_blank"><img src="DIRECT IMAGE LINK HERE" /></a>

  • The WEB LINK is the web address (URL) you would like your reader to visit when they click on the image
  • The DIRECT IMAGE LINK is the link you noted earlier when uploading your image to your online photo storage account.


Display it on your blog

  • Open Blogger > Dashboard > Layout
  • In your sidebar click the "Add A Gadget" link
  • Choose "HTML/JavaScript" from the selection in the pop-up box
  • Give this gadget a title
  • Copy your code and paste it into the gadget
  • Repeat for each social media icon in the same gadget
  • Save
  • Drag into place in the sidebar

Advanced coding

This is the advanced HTML for your social media icon.  Insert your own links where prompted by the bold text.
<a href="WEB LINK HERE" title="DESCRIBE YOUR LINK HERE" target="_blank"><img src="DIRECT IMAGE LINK HERE" width="IMAGE WIDTH HERE" height="IMAGE HEIGHT HERE" /></a>

  • The title is the text that appears when visitors to your blog hover their cursor over the image
  • target="_blank" allows the link to be opened in a new tab/window so that your reader does not leave your blog
  • Width and Height determine the size of the image (in pixels) which means you don't have to consider resizing.  A good size to use is 50 x 50

Hints And Tips

  • You can use any image, even ones you have taken yourself overlaid with text.  Be creative.
  • Use the tags <center> and </center> at the beginning and end (respectively) of your social media icon code to balance the code in the middle of the gadget
  • Use the tag <br /> to create a new line (line break) if you have more icons to display than the width of your sidebar, eg:
twitter icon code, facebook icon code, pinterest icon code
<br />
google plus icon code, email icon code, rss feed icon code
  • To create an email icon code your code needs to read:
<a href="mailto:YOUR EMAIL ADDRESS HERE"><img src="DIRECT IMAGE LINK HERE" /></a>


Let me know how you get on...

Feel free to ask me any questions and I'll post the usual troubleshooting as replies to comments or as edits in this post.  This post is also linked from my Ask A Blogger Geek website