Many (but not all) Web 2.0 sites provide little badges or widgets to insert in your own blog and thereby link to those sites. Additionally, we are spoilt for choice with all those designer-made eye-candy badges, like a cute little blue bird asking your readers to follow you on Twitter. After coming across Ben Godfrey‘s site, I decided I wanted to take the same simple yet visual, compact, and general approach: a list of site names, together with their favicons, linking to my accounts on those sites. Ben uses some CSS magic which I couldn’t understand, but after some trials and errors, I found a way to replicate his approach.
Using WordPress’s text widget, which allows to put any plain text or HTML in the sidebar, it’s a breeze to make such a list. The HTML code
<ul><li> <a href="http://bibsonomy.org/user/michelw" title="papers"><img src="http://bibsonomy.org/favicon.ico" style="vertical-align:middle" > Bibsonomy</a> </li><li> <a href="http://www.linkedin.com/in/michelwermelinger" title="contacts"><img src="http://www.linkedin.com/favicon.ico" style="vertical-align:middle" > LinkedIn</a> </li></ul>
will generate this list:
The only problem is if the site doesn’t have a favicon file. The best is to use Google to obtain the favicon for a given domain, because it will return a default globe icon if no favicon can be found. In the HTML code above, simply use as image source src="http://www.google.com/s2/favicons?domain=bibsonomy.org" or similar.
Csaba Nagy, the CSMR 2012 webmaster, suggested a more standards-compliant service than Google: g.etfv.co will get the icon even if it’s given in a
link>tag and not in a favicon.ico file. For the above example,src="http://g.etfv.co/http://bibsonomy.org/user/michelw"will do the trick. However, the service doesn’t automatically resize the icon. You can do that using thewidthattribute of theimgtag.