Ask HTMiLy (7): Social Networking Icons

With over 500 million active users on Facebook, 26 million Twitter users, chances are that you have an account. On my right-hand sidebar I've got a little button for each one of the social networking sites that I use, plus a handy RSS feed icon.  Each one of those buttons links to my profile page.

Want one for your blog? Luckily, it's very simple.

1. Create an HTML gadget.
2. To make a simple button, just use this code:

<a href="http://www.goodreads.com/user/show/1178469" target="_blank"><img src="http://i72.photobucket.com/albums/i177/namelocee/gr1_48.png" alt="Goodreads" border="0" /></a>

 Change this web address to your goodreads/facebook/twitter/rss feed page
Change this web address to the link where your button is saved 

The code above turns into this:



If you want to make your button centered in the sidebar, put<center> at the front of the code and </center> at the end of the code.

You'll notice that I have four buttons, and they are all in a square. To do that, I used a table. (I'm sure there are other ways to do this, but this was the one that worked flawlessly for me)

<center><table>
<tr> <td>GOODREADS CODE</td>      <td>RSS FEED CODE</td> </tr>
<tr> <td>FACEBOOK PAGE CODE</td>     <td>TWITTER CODE</td> </tr></table></center>

The <tr> signals a row, and <td> signals a cell. So, at the beginning of the row you have a <tr> then a <td> for the cell. At the end of the first code's cell, add a </td>. For the next cell start a <td> then add a </td> and </tr> to signal the end of the row.  Repeat for the second row. Add a <table at the beginning and a </table> at the end, and it should all line up perfectly.

Helpful HTML tip: When you are using code, always remember that each section of code has two parts, a beginning and an end. The beginning starts with a word or symbol inside <>. The end uses a backslash in front of the word or symbol </>. If you forget the beginning or end of the code, it won't work.