Typepad 101: Adding social media icons to your blog's sidebar

You may already be familiar with the Other Accounts module - it pulls the profiles you have listed in Accounts > Other Accounts into a little grouping of links in your blog's sidebar. You can even use your own custom icons with CSS if you'd like.

Many of you have asked how to use your own custom icons and link to URLs that aren't in Other Accounts (a "home" link, for instance). Just follow these steps:

1. You'll need an icon set that includes all of the services you want to link. There are about one zillion sets like this available, the key is finding one that you like and complements your blog's design. Google lists millions of results for free social media icon set, so there's no shortage of options! Download and unzip the set on your computer, making sure to check it has all of the icons you need.

2. Next, upload your icons to your File Manager. You can create a folder for the icons or just upload them to the blog's folder. Upload all of the icons and they'll be ready for the next step.

3. In a new broswer tab, go to Blogs > Design > Content and select the Embed your own HTML module from the module listing and click "Add this module."

Embed your own HTML module

4. Give the module a label. It won't show on your blog, it's just used for reference on the Content page.

5. Next comes the HTML. The first part is the URL you're linking to, which looks like this:

<a href="https://twitter.com/#!/typepad">

You'll switch out the twitter.com URL with the full URL for the site you're linking to.

Then comes the code to embed your image file, like this:

<img src="https://example.typepad.com/icons/twitter.gif"  title="Follow me on Twitter!" alt ="Follow me on Twitter!" />

This time, switch out the URL with the image you want to link. To get that, go back to your File Manager and click on the image. That will open it in a new browser window. Copy the URL from there and use that for the embed code above.

The title and alt tags are used to give people info about the link they're about to click, so be sure to label those appropriately.

Finally, you'll need to close the link with an </a> tag.

The completed code will look like this:

<a href="https://twitter.com/#!/typepad"><img src="https://example.typepad.com/icons/twitter.gif"  title="Follow me on Twitter!" alt ="Follow me on Twitter!" /></a>

6. Continue adding in your HTML for the rest of the icons. If you place all of the code in one module, the images will be grouped together in a row. Your module code should look something like this:

7. Save on the Content page and view your blog. You should see the images in the sidebar in a nice little grouping, similiar to this:

That's it! It seems like a lot of steps but once you get the hang of it, adding images to your sidebar is a snap. We have more details here.