Keep It Simple: Add custom social media icons

October 05, 2011

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="http://example.typepad.com/rss.png" />
<img src="http://example.typepad.com/pinterest.png" />
<img src="http://example.typepad.com/twitter.png" />
<img src="http://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="http://example.typepad.com/pinterest.png" />

Add the link tag:

<a href="http://pinterest.com/username"><img src="http://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="http://example.typepad.com/rss-lg.png" /></a> <a href="http://pinterest.com/username"><img src="http://example.typepad.com/pinterest-lg.png" /></a> <a href="http://twitter.com/typepad"><img src="http://example.typepad.com/twitter-lg.png" /></a> <a href="http://www.facebook.com/pages/TypePad/5739054247"><img src="http://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 powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.