Freeola Home Get Dotted Domains Win Free Games Freeola Guides Freeola Customer Forum

Viewing Thread:

"Adding a "Live Title" to your web site, using a microsummary"

Wed 13/12/06 at 22:35
Regular
"It goes so quickly"
Posts: 4,083
Let the user know what’s new - via their bookmark’s Live Title.

The new Mozilla Firefox web browser continues to offer the user the chance to add a particular web site to a list that they can save for later, with a feature known as a bookmark. Such a bookmark is generally identified by a static piece of text (and maybe an icon), known as the bookmark title, which may read as the web sites name (e.g. "Freeola ISP").

However, with the introduction of the Live Title feature, a bookmark can come to life.

What is a Live Title

A Live Title is a bookmark for a particular web site that periodically updates the text associated with it. If a web site offers a Live Title, and a user bookmarks and selected to use it, the text that they see when viewing that bookmark will change from time to time, as set by the web sites microsummary.

Such an example of a Live Title may include:

- Latest competition winner (Freeola gameaday mentioned below).
- Latest news headline(s).
- Latest blog entry.
- The current stock price of your shares.
- Whether you are online or offline.

A Live Title is probably best described as a slimmed down alternative to a Live Bookmark, in that you don’t have to go to the lengths of creating and maintaining a full web feed to keep your visitors up to date with your new site content.

As a web site owner, you have the ability to set the Live Title, by creating your very own microsummary.

What is a microsummary

A microsummary is either a plain text file that contains the text that should appear in the bookmark (handwritten or server-side created), or a generator file, written in XML, that scans a web page and creates the text that should appear in the bookmark title on the fly.

Firefox will check for an updated microsummary every 30 minutes or so. Currently, Firefox is the only web browser to make use of a microsummary as a live title, but the feature may appear in other popular web browsers (such as Opera, Safari, and Internet Explorer) at a later date.

Which microsummary is right for me?

The end result between the two methods is the same; that a user will see your web site bookmark title updated every so often - but the behind the scenes process is quite different. This little article will guide you in the direction of creating either type, and applying them to your web site. But before that, lets see one in action.

Real world example, at freeola.com/gameaday

The Special Reserve Discount Network used to offer its customers the chance to win a game of their choice, every single day - and to this day Freeola continue the competition, with a slightly different prize. Every day, a winner is chosen, and displayed on the Freeola Gameaday home page.

For people who regularly enter the competition, a Live Title is available to them if they choose to bookmark the Freeola Gameaday home page, so that they can see each winner as they are announced within their web browsers bookmarks, rather than having to check the web site daily.

To make use of this Live Title, a user would simply have to go to the Freeola Gameaday web site, and use the bookmark this page (Ctrl+D) option within Firefox.

Usually when adding a bookmark, the name section of the bookmark dialog box will contain the title of the web site, which the user can either manually change, or leave it as it is.

In the case of a Live Title enabled bookmark dialog box, the user will see that the name section contains a drop down menu. Clicking this will display the Live Title option(s), and when selected, will allow the bookmark to be updated with the content from the microsummary.

Freeola have chosen to utilize a Server-side created microsummary for this purpose, but a Client-side microsummary generator option is also available to web site owners, and this tutorial will give you a basic grasp of how to do this for your own web site.

Server-side created microsummary

A site authored microsummary is one that is created and maintained on the web server of the web site in question, with the output being just the text you’d like to be displayed within the bookmark title.

This can be done in a number of ways, which may include using a PHP or CGI script to generate the microsummary, or by simply uploading a plain text (.txt) microsummary file yourself, each time you want to update it.

In the case of Freeola, the microsummary is a plain text file (.txt) that contains the date of the winner, the winners name, and their entry (such as "07/12/06, cjh, Chat Post"). This file is updated daily via a PHP script.

If you have the know-how, you should be able to quickly and easily create a microsummary using PHP or CGI, which should output just the text which you’d like to appear as the Live Title. This microsummary should not contain any HTML, or other mark-up, just plain text.

For example, if you wanted to create a Live Title for your most recent blog entry, you could set the PHP script to just output the blog entry title or heading, which would then appear in the users bookmark, and alert them to the new content.

If your blog entries were stored in a MySQL database, you could code a microsummary script to grab the latest headline only, and output that, allowing the microsummary to always contain the latest headline, without you having to change it manually.

Unfortunately, it is difficult to give PHP and CGI code examples of how to do this here, because of the many different ways a web site may be built. If you have no idea on how to use PHP or CGI, you should look at the Client-side microsummary generator segment below, or ask on the Freeola Web forum for any advice.

Client-side microsummary generator

If you don’t have the ability to create a server-side microsummary, you can instead create a microsummary generator, which will scan your web page and pick out the piece of text you would like to be your live title.

A microsummary generator is put together using three mark-up languages, known as XML, XSLT, and XPath, which can sound like a daunting task, but the majority of the code you’ll need is provided below.

It should be noted that a microsummary generator will consume more bandwidth than a server-side microsummary, because for the generator to function, it needs to download the entire web page each time it checks for an update, whereas a server-side microsummary only has to send out a small piece of text. If your web pages are large, or you expect your live title to be quite popular, you should look in to producing a server-side microsummary. This is especially true if you plan on using a live title for a web site hosted elsewhere which may have a monthly download limit.

Putting together a microsummary generator

As mentioned above, a microsummary generator will scan your web site and grab the piece of text you wish to appear as your live title. This is done using XPath, which can break down a web sites source code (HTML) in to easily digestible segments.

Like the example previously mentioned, if you have a web site blog, which you update every so often, that you’d like to use as your live title, then the latest blog entry heading makes a good candidate. What we’ll do here is try and capture that heading, to use as your live title.

Due to the nature of Firefox, an excellent XPath Checker add-on exists that can make the creation of a microsummary generator a lot easier. You should install it before continuing, as this will be the tool used to get the XPath data from your desired web page.

Our goal is to create a microsumamry that makes the most recent blog entry heading on a web site appear as our Live Title. Naturally, you’ll have to substitute your own information from your own web site.

To begin your microsummary generator, create a new XML file (which you can do in Windows Notepad), calling it for example, summary.xml, and copy and paste the following in to it, which is just generic code that is required (the <template> element appearing twice is not a mistake):


<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1" [B]name="[I]My latest blog entry[/I]"[/B]>
<template>
<transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
<output method="text"/>
<template match="/">


You should replace the text "My latest blog entry" within the name attribute to reflect the type of content you want to place within the Live Title, perhaps replacing the word "My" with your own name or web site title (for example, "John Smiths latest blog entry").

If you wish, you can use the <text> element to add a small pre-set piece of text, either before or after the generated content. For example, you may want your live title to always have your site name appear before the generated content, and so would need to add the following:


<text>[I]John Smiths Blog:[/I] </text>


… replacing the text "John Smiths Blog" with either your own, or the name of your web site (or any text of your choice). Note the space after the colon (:) and before the closing </text> element, which will ensure your pre-set text and generated text don’t bunch up, so you’ll see "John Smiths Blog: I got a new job" (space after colon) instead of "John Smiths Blog:I got a new job" (no space after colon).

If you do not want to define any pre-set text, then do not add the above <text> element, and ignore the continued references to it below.

The next piece of code will be the <value-of select=""/> element, and this will contain the XPath code that will reference your web page. This is where the XPath Checker add-on comes in handy.

Go to your web page, and highlight the piece of information that you would like to appear in your Live Title, then right-click and select View XPath. This will bring up a window that will display the XPath code you’ll need to place within the element <value-of select=""/>, which as shown from this screenshot example could be /html/body/h2[1], and so the <value-of select=""/> element may look like this:

<value-of select="[B]/html/body/h2[1][/B]"/>

This basically translates as saying "The text I want to appear in my live title is within the first <h2> element on the page, which is within the <body> element, which is within the <html> element of my web page".

If your HTML happens to contain an attribute, for example, id then the XPath may reference this instead, as shown here, and so your <value-of select=""/> code would look like this:

<value-of select="[B]id('latest')[/B]"/>

This basically translates as saying "The text I want to appear in my live title is within the HTML element which contains the attribute id that has the value of latest".

It doesn’t matter which you decide to use, but you may find assigning an id attribute in your HTML and using this as your XPath reference code (as shown above) will make things easier for you if you decided to alter your HTML web pages later on. If you do use an id attribute, make sure you only define it once on the page, and ensure that each time you add a new entry, you assign the id attribute to the piece of text you want to appear as your live title.

If you chose to add some pre-set <text>, the above examples would appear in the generator file in the order of <text> and <value-of select="" />, like so:


<text>[I]John Smiths Blog:[/I] </text>
<value-of select="id('latest')"/>


This is so the pre-set text appears first. As mentioned above, you can have the pre-set text appear after the generated text if you prefer, and to do this, you would just need to swap the two around, like so:


<value-of select="id('latest')"/>
<text>[I]: John Smiths Blog[/I]</text>


Finally, to close of your generator, copy and paste the following in to your file:


</template>
</transform>
</template>
</generator>


Which should leave you with a file that looks something like this:


<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1" [B]name="[I]John Smiths latest blog entry[/I]"[/B]>
<template>
<transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
<output method="text"/>
<template match="/">
[B]<text>[I]John Smiths Blog:[/I] </text>
<value-of select="[I]id('latest')[/I]"/>[/B]
</template>
</transform>
</template>
</generator>


… where the highlighted pieces of code should be changed to reflected your own web site and desired output, as shown above.

And there you should have your very own microsummary, ready to be used, all you have to do is upload it to your web site, and tell the web browser where it is.

Offering your Live Title to your web site visitors

Weather you’ve chosen to use a server-side or client-side generated microsummary, letting your web site visitors know that it is available for a particular web page is done in the same way, using the standard <link> HTML element. This element will need to be placed within the <head> element of the HTML web page that the live title refers to, and contain the attributes, rel, type, and href. The rel attribute will need to be set to [I]microsummary[/I], for example:



The type attribute will need to be set to either [I]text/plain[/I] if you’re using a server-side generator, or [I]application/x.microsummary+xml[/I] if you’re using a client-side XML microsummary generator, for example:


[B]Server-side:[/B]
<link rel="microsummary" [B]type="[I]text/plain[/I]"[/B]>

[B]Client-side:[/B]
<link rel="microsummary" [B]type="[I]application/x.microsummary+xml[/I]"[/B]>


Finally, the href attribute will need to contain the web address of your microsummary. If the microsummary is not in the same directory as the web page you’re adding the live title too, you’ll need to include the full web address to the microsummary file, for example:


<link rel="microsummary" type="text/plain" [B]href="[I]microsummary.php[/I]"[/B]>


You’re not limited to offering only a single microsummary; if you want to offer more, simply add a <link> element for each summary you have available, although the user will only be able to select one per bookmark.

And so, an example of a web page offering up a live title may look like:


<html>
<head>
<title>John Smiths Blog</title>

<link rel="microsummary" type="application/x.microsummary+xml" href="microsummary.xml.">

</head>
<body>
<h1>John Smiths Blog</h1>

<h2 [B]id="[I]latest[/I]"[/B]>I got a new job</h2>
<p>My blog entry about my new job</p>

<h2>I bought a pet cat</h2>
<p>My blog entry about my new cat</p>

</body>
</html>


And there you have it, a Live Title to keep your visitors up to date. If you need any help, or have a query, feel free to post it on the Freeola Web forum, and someone may be able to help you out.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.
There have been no replies to this thread yet.
Wed 13/12/06 at 22:35
Regular
"It goes so quickly"
Posts: 4,083
Let the user know what’s new - via their bookmark’s Live Title.

The new Mozilla Firefox web browser continues to offer the user the chance to add a particular web site to a list that they can save for later, with a feature known as a bookmark. Such a bookmark is generally identified by a static piece of text (and maybe an icon), known as the bookmark title, which may read as the web sites name (e.g. "Freeola ISP").

However, with the introduction of the Live Title feature, a bookmark can come to life.

What is a Live Title

A Live Title is a bookmark for a particular web site that periodically updates the text associated with it. If a web site offers a Live Title, and a user bookmarks and selected to use it, the text that they see when viewing that bookmark will change from time to time, as set by the web sites microsummary.

Such an example of a Live Title may include:

- Latest competition winner (Freeola gameaday mentioned below).
- Latest news headline(s).
- Latest blog entry.
- The current stock price of your shares.
- Whether you are online or offline.

A Live Title is probably best described as a slimmed down alternative to a Live Bookmark, in that you don’t have to go to the lengths of creating and maintaining a full web feed to keep your visitors up to date with your new site content.

As a web site owner, you have the ability to set the Live Title, by creating your very own microsummary.

What is a microsummary

A microsummary is either a plain text file that contains the text that should appear in the bookmark (handwritten or server-side created), or a generator file, written in XML, that scans a web page and creates the text that should appear in the bookmark title on the fly.

Firefox will check for an updated microsummary every 30 minutes or so. Currently, Firefox is the only web browser to make use of a microsummary as a live title, but the feature may appear in other popular web browsers (such as Opera, Safari, and Internet Explorer) at a later date.

Which microsummary is right for me?

The end result between the two methods is the same; that a user will see your web site bookmark title updated every so often - but the behind the scenes process is quite different. This little article will guide you in the direction of creating either type, and applying them to your web site. But before that, lets see one in action.

Real world example, at freeola.com/gameaday

The Special Reserve Discount Network used to offer its customers the chance to win a game of their choice, every single day - and to this day Freeola continue the competition, with a slightly different prize. Every day, a winner is chosen, and displayed on the Freeola Gameaday home page.

For people who regularly enter the competition, a Live Title is available to them if they choose to bookmark the Freeola Gameaday home page, so that they can see each winner as they are announced within their web browsers bookmarks, rather than having to check the web site daily.

To make use of this Live Title, a user would simply have to go to the Freeola Gameaday web site, and use the bookmark this page (Ctrl+D) option within Firefox.

Usually when adding a bookmark, the name section of the bookmark dialog box will contain the title of the web site, which the user can either manually change, or leave it as it is.

In the case of a Live Title enabled bookmark dialog box, the user will see that the name section contains a drop down menu. Clicking this will display the Live Title option(s), and when selected, will allow the bookmark to be updated with the content from the microsummary.

Freeola have chosen to utilize a Server-side created microsummary for this purpose, but a Client-side microsummary generator option is also available to web site owners, and this tutorial will give you a basic grasp of how to do this for your own web site.

Server-side created microsummary

A site authored microsummary is one that is created and maintained on the web server of the web site in question, with the output being just the text you’d like to be displayed within the bookmark title.

This can be done in a number of ways, which may include using a PHP or CGI script to generate the microsummary, or by simply uploading a plain text (.txt) microsummary file yourself, each time you want to update it.

In the case of Freeola, the microsummary is a plain text file (.txt) that contains the date of the winner, the winners name, and their entry (such as "07/12/06, cjh, Chat Post"). This file is updated daily via a PHP script.

If you have the know-how, you should be able to quickly and easily create a microsummary using PHP or CGI, which should output just the text which you’d like to appear as the Live Title. This microsummary should not contain any HTML, or other mark-up, just plain text.

For example, if you wanted to create a Live Title for your most recent blog entry, you could set the PHP script to just output the blog entry title or heading, which would then appear in the users bookmark, and alert them to the new content.

If your blog entries were stored in a MySQL database, you could code a microsummary script to grab the latest headline only, and output that, allowing the microsummary to always contain the latest headline, without you having to change it manually.

Unfortunately, it is difficult to give PHP and CGI code examples of how to do this here, because of the many different ways a web site may be built. If you have no idea on how to use PHP or CGI, you should look at the Client-side microsummary generator segment below, or ask on the Freeola Web forum for any advice.

Client-side microsummary generator

If you don’t have the ability to create a server-side microsummary, you can instead create a microsummary generator, which will scan your web page and pick out the piece of text you would like to be your live title.

A microsummary generator is put together using three mark-up languages, known as XML, XSLT, and XPath, which can sound like a daunting task, but the majority of the code you’ll need is provided below.

It should be noted that a microsummary generator will consume more bandwidth than a server-side microsummary, because for the generator to function, it needs to download the entire web page each time it checks for an update, whereas a server-side microsummary only has to send out a small piece of text. If your web pages are large, or you expect your live title to be quite popular, you should look in to producing a server-side microsummary. This is especially true if you plan on using a live title for a web site hosted elsewhere which may have a monthly download limit.

Putting together a microsummary generator

As mentioned above, a microsummary generator will scan your web site and grab the piece of text you wish to appear as your live title. This is done using XPath, which can break down a web sites source code (HTML) in to easily digestible segments.

Like the example previously mentioned, if you have a web site blog, which you update every so often, that you’d like to use as your live title, then the latest blog entry heading makes a good candidate. What we’ll do here is try and capture that heading, to use as your live title.

Due to the nature of Firefox, an excellent XPath Checker add-on exists that can make the creation of a microsummary generator a lot easier. You should install it before continuing, as this will be the tool used to get the XPath data from your desired web page.

Our goal is to create a microsumamry that makes the most recent blog entry heading on a web site appear as our Live Title. Naturally, you’ll have to substitute your own information from your own web site.

To begin your microsummary generator, create a new XML file (which you can do in Windows Notepad), calling it for example, summary.xml, and copy and paste the following in to it, which is just generic code that is required (the <template> element appearing twice is not a mistake):


<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1" [B]name="[I]My latest blog entry[/I]"[/B]>
<template>
<transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
<output method="text"/>
<template match="/">


You should replace the text "My latest blog entry" within the name attribute to reflect the type of content you want to place within the Live Title, perhaps replacing the word "My" with your own name or web site title (for example, "John Smiths latest blog entry").

If you wish, you can use the <text> element to add a small pre-set piece of text, either before or after the generated content. For example, you may want your live title to always have your site name appear before the generated content, and so would need to add the following:


<text>[I]John Smiths Blog:[/I] </text>


… replacing the text "John Smiths Blog" with either your own, or the name of your web site (or any text of your choice). Note the space after the colon (:) and before the closing </text> element, which will ensure your pre-set text and generated text don’t bunch up, so you’ll see "John Smiths Blog: I got a new job" (space after colon) instead of "John Smiths Blog:I got a new job" (no space after colon).

If you do not want to define any pre-set text, then do not add the above <text> element, and ignore the continued references to it below.

The next piece of code will be the <value-of select=""/> element, and this will contain the XPath code that will reference your web page. This is where the XPath Checker add-on comes in handy.

Go to your web page, and highlight the piece of information that you would like to appear in your Live Title, then right-click and select View XPath. This will bring up a window that will display the XPath code you’ll need to place within the element <value-of select=""/>, which as shown from this screenshot example could be /html/body/h2[1], and so the <value-of select=""/> element may look like this:

<value-of select="[B]/html/body/h2[1][/B]"/>

This basically translates as saying "The text I want to appear in my live title is within the first <h2> element on the page, which is within the <body> element, which is within the <html> element of my web page".

If your HTML happens to contain an attribute, for example, id then the XPath may reference this instead, as shown here, and so your <value-of select=""/> code would look like this:

<value-of select="[B]id('latest')[/B]"/>

This basically translates as saying "The text I want to appear in my live title is within the HTML element which contains the attribute id that has the value of latest".

It doesn’t matter which you decide to use, but you may find assigning an id attribute in your HTML and using this as your XPath reference code (as shown above) will make things easier for you if you decided to alter your HTML web pages later on. If you do use an id attribute, make sure you only define it once on the page, and ensure that each time you add a new entry, you assign the id attribute to the piece of text you want to appear as your live title.

If you chose to add some pre-set <text>, the above examples would appear in the generator file in the order of <text> and <value-of select="" />, like so:


<text>[I]John Smiths Blog:[/I] </text>
<value-of select="id('latest')"/>


This is so the pre-set text appears first. As mentioned above, you can have the pre-set text appear after the generated text if you prefer, and to do this, you would just need to swap the two around, like so:


<value-of select="id('latest')"/>
<text>[I]: John Smiths Blog[/I]</text>


Finally, to close of your generator, copy and paste the following in to your file:


</template>
</transform>
</template>
</generator>


Which should leave you with a file that looks something like this:


<?xml version="1.0" encoding="UTF-8"?>
<generator xmlns="http://www.mozilla.org/microsummaries/0.1" [B]name="[I]John Smiths latest blog entry[/I]"[/B]>
<template>
<transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
<output method="text"/>
<template match="/">
[B]<text>[I]John Smiths Blog:[/I] </text>
<value-of select="[I]id('latest')[/I]"/>[/B]
</template>
</transform>
</template>
</generator>


… where the highlighted pieces of code should be changed to reflected your own web site and desired output, as shown above.

And there you should have your very own microsummary, ready to be used, all you have to do is upload it to your web site, and tell the web browser where it is.

Offering your Live Title to your web site visitors

Weather you’ve chosen to use a server-side or client-side generated microsummary, letting your web site visitors know that it is available for a particular web page is done in the same way, using the standard <link> HTML element. This element will need to be placed within the <head> element of the HTML web page that the live title refers to, and contain the attributes, rel, type, and href. The rel attribute will need to be set to [I]microsummary[/I], for example:



The type attribute will need to be set to either [I]text/plain[/I] if you’re using a server-side generator, or [I]application/x.microsummary+xml[/I] if you’re using a client-side XML microsummary generator, for example:


[B]Server-side:[/B]
<link rel="microsummary" [B]type="[I]text/plain[/I]"[/B]>

[B]Client-side:[/B]
<link rel="microsummary" [B]type="[I]application/x.microsummary+xml[/I]"[/B]>


Finally, the href attribute will need to contain the web address of your microsummary. If the microsummary is not in the same directory as the web page you’re adding the live title too, you’ll need to include the full web address to the microsummary file, for example:


<link rel="microsummary" type="text/plain" [B]href="[I]microsummary.php[/I]"[/B]>


You’re not limited to offering only a single microsummary; if you want to offer more, simply add a <link> element for each summary you have available, although the user will only be able to select one per bookmark.

And so, an example of a web page offering up a live title may look like:


<html>
<head>
<title>John Smiths Blog</title>

<link rel="microsummary" type="application/x.microsummary+xml" href="microsummary.xml.">

</head>
<body>
<h1>John Smiths Blog</h1>

<h2 [B]id="[I]latest[/I]"[/B]>I got a new job</h2>
<p>My blog entry about my new job</p>

<h2>I bought a pet cat</h2>
<p>My blog entry about my new cat</p>

</body>
</html>


And there you have it, a Live Title to keep your visitors up to date. If you need any help, or have a query, feel free to post it on the Freeola Web forum, and someone may be able to help you out.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

Freeola & GetDotted are rated

Check out some of our customer testimonials below:

First Class!
I feel that your service on this occasion was absolutely first class - a model of excellence. After this, I hope to stay with Freeola for a long time!

View More Testimonials

Easy and free service!
I think it's fab that you provide an easy-to-follow service, and even better that it's free...!
Cerrie

View More Testimonials

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Tell us what you think!

Live Chat is offline

Live Chat is available:
9am to 6:30pm Monday to Friday (excluding bank holidays).

01376 55 60 60

Send us a ticket.

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.