Keep It Simple: Add custom social media icons

TypePad offers the Other Accounts feature to display icons which link to your social media accounts, like Facebook and Twitter. If you have an account not listed at Account > Other Accounts or if you want to use your own icons, you can quickly add your own social media icons to your blog's Navigation Bar, Blog Footer, or sidebar.

First, you'll need to find the social media icons you prefer to use. There are many free social media icons online which you can search for or grab the buttons directly from the website you want to link.

For example, Pinterest has an icon available in their Goodies section.

After you have found the icons you want to use, you can upload the icons to your TypePad account at Library > File Manager.

The image URLs will be similar to:

http://example.typepad.com/pineterest-icon.jpg
http://example.typepad.com/rss-icon.jpg
http://example.typepad.com/facebook-icon.jpg
http://example.typepad.com/twitter-icon.jpg

Add the image tags to the code to make the images display:

<img src="https://example.typepad.com/rss.png" />
<img src="https://example.typepad.com/pinterest.png" />
<img src="https://example.typepad.com/twitter.png" />
<img src="https://example.typepad.com/facebook.png" />


To add the icons to the Blog Footer, go to Design > Content and click the pencil icon next to the Blog Footer module. Using the Simple configuration, enter the image tag for the first icon into the Title field. In the corresponding URL field, enter the URL for the website you wish to link the icon. Repeat for each icon and click OK. Finally, click Save Changes to update your website.

Similarly, you can add the icons to the Navigation Bar.

If you want to display larger social media icons, you may want to add the icons to your blog's sidebar. After uploading the images and adding the image tag to the image URL, you'll also need to add the code for the link.

Start with the image URL:

http://example.typepad.com/pineterest-icon.jpg

Add the image tag:

<img src="https://example.typepad.com/pinterest.png" />

Add the link tag:

<a href="http://pinterest.com/username"><img src="https://example.typepad.com/pinterest-lg.png" /></a>

Replace "http://pinterest.com/username" with the actual URL for the image you wish to link.

The full code for our RSS, Pinterest, Facebook, and Twitter buttons is:

<a href="http://example.typepad.com/my-blog/atom.xml"><img src="https://example.typepad.com/rss-lg.png" /></a> <a href="http://pinterest.com/username"><img src="https://example.typepad.com/pinterest-lg.png" /></a> <a href="http://twitter.com/typepad"><img src="https://example.typepad.com/twitter-lg.png" /></a> <a href="http://www.facebook.com/pages/TypePad/5739054247"><img src="https://example.typepad.com/facebook.png-lg" /></a>

Replace the URLs in the example with the actual URLs for your accounts and images.

Additional information is available in the Knowledge Base on adding sidebar images.

Comments

[Account Deleted]

There is no "Design>content" page . Can you make more clear to me.

[Jen]

Depending on the Theme you have selected for your blog, you may not see the Content area.

The Chroma Theme, for instance, has a "Custom Sidebar" option, instead of a Content area. You can add social media icons to your sidebar at Design > Custom Sidebar but not to the Navigation Bar or Blog Footer when using the Chroma Theme for your blog.