Monday, June 30, 2008
Web sites can display an increasing variety of icons in a browser's address bar by including special tags in the HEAD area of the HTML document. You may have noticed that the main EditMe sites have light bulb favicons. A favicon is an icon image associated with a web site. Almost all modern browsers will display your favicon in the toolbar or favorites/bookmarks menu. It's an easy and effective way to add branding and visual appeal to your site. You may also notice that this site displays an RSS icon in the toolbar (or elsewhere, depending on your browser). You can link to your site's built in RSS feed to display such an icon for visitors and encourage them to subscribe to the site's feed. And just for wikis, a new "Edit This Page" icon is gaining traction. This article shows you how to add all three of these to your EditMe site.
Favicons can be confusing and frustrating due to a lack of standardization around this commonly used web feature. While most modern browsers support icons in a variety of image formats using a standard LINK tag in the head, Internet Explorer requires it's own file and link format. Since half the web uses Internet Explorer, it's best to stick to the ICO format. ICO files also have the benefit of being able to contain multiple image size, allowing for a 16x16 icon in the address bar and a 32x32 icon for use in a desktop shortcut.
1. To create an ICO file, create a 32x32 square image using the graphics editor of your choice. You can then upload this image into one of the many free ICO generators on the web. Simply Google for favicon generator.
2. Once you've got your .ico file, upload it to your site as an attachment. Copy the image URL from the Attachments screen once you've uploaded it - right-click on the link to your ico file and choose Copy Link Location or Copy Shortcut (depending on your browser).
3. The final step is to add a link to your .ico file in your site's Layout. Go to Site Settings -> Look & Feel -> Layouts and select the Edit action for the Current Default layout. Find the <head> tag and paste the following just beneath it. You'll notice there are two links - one for Internet Explorer and another for every other browser. Just be sure the path to your .ico file is correct!
<link rel="icon" type="image/ico" href="/files/HomeOld/favicon.ico"/>
<link rel="shortcut icon" href="/files/HomeOld/favicon.ico"/>
Save your layout, go to your Home page and refresh.... and voila. Favicon goodness.
You knew that every EditMe contains an RSS feed, right? Well, EditMe has been remiss in adding a link to this feed in the standard layouts. Such a link will display an RSS icon in the address bar of all modern browsers, and allow visitors to easily find and subscribe to the site's feed. Although RSS links will be added to all the layouts as part of the next release, you can add yours easily. Simply edit the Layout again like you did for the Favicon instructions above and add the following:
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
That's all there is to it! Remember that this will show the "public" feed, so this link will not contain updates of any pages that require a login to view.
Many of the web's wiki providers have teamed up to create a standard for an "Edit This Page" button 
displayed by the browser. While the standard has been widely implemented (EditMe will include it in all layouts with the next release), it will take some time for the browser makers to support this feature. Until then, there's a Firefox extension that implements the feature. It's a great way to easily edit any page of your EditMe site whether or not you want to display a big Edit This Page button on every page. See universaleditbutton.org for more about the new standard.
The following code, if pasted into the <head> section of your layout, will prompt the Firefox extension to display the Edit icon only if you have editing access to the page:
<link editme="if page.canEdit" rel="alternate"
type="application/x-wiki" title="Edit This Page"
href="/_Edit?page-id={page.id}"/>
If you want to show the button to prompt a user who is not logged in to edit a page that requires login, include this in addition to the above:
<link editme="if !user.isLoggedIn && !page.canEdit ;; parse href"
rel="alternate" type="application/x-wiki" title="Log In to Edit This Page"
href="/_Login?redirect=%2F_Edit%3Fpage-id%3D{page.name}"/>
With the wide wiki adoption of this standard, we hope to see it supported by default in future browser releases.
