OpenLinkz

I had a bunch of trouble toward the end of last week with my live stock quote widget that retrieves stock prices from Yahoo every 30 seconds throughout the day.

Having run into problems with the WidgetBox proxy service that allows widgets to retrieve data from other domains I had converted the widget into a Google Gadget. I then wrapped the Google Gadget within the WidgetBox widget so all those folks who were using the WidgetBox widget wouldn't be left with a non-functioning widget.

Last week, the Google Gadget began acting up. Using FireFox and Firebug, I was able to determine that the response from Yahoo in a simple CSV format was still functioning properly but the callback wasn't being executed within the gadget to actually read the response. I use the simple _IG_FetchContent function to execute the request and process the response.

In my experimenting, I discovered that using a Yahoo Pipe and rendering the output as JSON worked perfectly. Still, this seemed like too much overhead for such a simple request.

As it turns out, I had to make an adjustment to the URL at Yahoo that is used to request the stock price data. Where previously I used the following URL:

http://finance.yahoo.com/d/quotes.csv

Now I have to use this URL:

http://download.finance.yahoo.com/d/quotes.csv

If you type these URLs into your browser (with the requested symbols and request parameters), both of them would return the requested data. I can only think that some kind of redirection was taking place on the Yahoo site that made the Google Gadget function reject the response.

In summary, it seems these cross-domain calls can be awfully touchy. I apologize to any users who experienced an outage as a result of the problems in this widget. Hopefully, both Yahoo and Google will avoid making any changes for a while.

This post is to announce our newest widget, OpenAdSlider. This is a sliding panel that can contain an advertisement, banner ad, text links or any other message or image. The panel slides up from the bottom of the browser window and stops as soon as it is fully displayed. This means it does not float across the entire page getting in the way of your content.

This ad panel will not be blocked by pop-up blockers. It is a DIV within the page and, as such, it can house Google AdSense ads that are contextually in synch with your page content.

We have provided a free web-based wizard on the OpenLinkz homepage so you can generate the style sheet, HTML and Javascript necessary to implement the sliding ad panel. You can customize the height of the panel, the background color and the font color. You can plug in any ad code, HTML, Javascript or image code you wish by pasting it into a text box.

If you are worried about overdoing it with sliding ads, you can choose whether you want the ad to display on every page view or only on the first page view of the user's session. Indeed, that is how we have it configured on this blog. In either case, the user can easily close the panel and it will slide out of sight.

We have decided to provide this wizard free of charge. Most other sites require you to pay for a downloaded code generator. Costs range from around $20 all the way up to $125.

We think this sliding ad panel helps you get your advertising message displayed above the fold without being too obtrusive. The sliding action immediately draws the user's eye to the ad content. Try it on the OpenLinkz homepage and see what you think!

I recently wrote about WidgetBox breaking my live stock quote widget by disallowing data in CSV text format when using their proxied XML-HTTP request functionality. (See "WidgetBox tightens up AJAX interface")

As an alternative, I set up a Yahoo! pipe to supply the data in RSS format, which seemed to work well.

The problem is when a person stays on the page hosting the widget in order to watch the quotes update throughput the day. After half an hour or so, the widget stops working. There appears to be some kind of strange caching going on that prevents any data from being returned. I tried the usual work-around: appending in the query string a key/value pair containing a random number but to no avail.

My eventual solution was to create a Google gadget with the same logic that retrieved data from the original source in CSV text format. This gadget was then embedded inside the WidgetBox widget.

With a little fooling around, I was able to pass the user configuration data through the WidgetBox widget to the Google widget and, once again, things seem to be working fine.

The bottom line is that RSS just does not seem to lend itself to continuous data retrieval for applications like real-time quotes. It is hard to be sure exactly where the problem lies but either WidgetBox or Yahoo! or both treat RSS as an information feed, not a raw data feed. As such, the assumption is that one wouldn't want to continuously retrieve an RSS feed as I have been trying to do.

So far, it appears the Google libraries offer more flexibility than the WidgetBox approach but at the cost of more programming effort. For those with good Javascript expertise, however, programming gadgets should not be too hard.

Google's (GOOG) press release describing the expansion of a beta program for what are being called Gadget Ads has showed that "widgets" are now a mature enough technology to become a serious component in Google's ad platform.

The widgets are just Google Gadgets with some commands added to the API to support tracking user clicks. Currently, the ads are being placed on sites the old-fashioned way, based on site content and advertising agreements. There is not yet a context-sensitive engine behind the ad serving function.

For now, Google is running an expanded beta with a limited number of large advertisers but the expectation is that the technology will migrate to the AdSense platform soon. The interactive nature of the Gadget Ads is said to significantly improve click-through rates.

Advertisers are hopeful that certain ads will be sufficiently fun or useful that users will want to put these widgets/Gadgets on their own pages. Advertisers are looking at Gadget Ads as having the added benefit that it simplifies the infrastructure of viral marketing.

In any case, Google has again shown inspiration in re-purposing its Gadget format for ads and will, no doubt, rake in the dollars as the ads proliferate.

Related content: see my article at the Trade Radar blog where I discuss in more detail the business implications.

I have provided a new Stock Research widget at Widgetbox. I named it Stock Linkz because it provides the same functionality as the StockLinkz Javascript widget that can be embedded in your web pages. This new variation allows a user to enter a stock ticker symbol in order to search for information. This new widget is not implemented as a pop-up menu, it is always visible.

The widget consists of a simple drop-down menu and text box. Enter a ticker symbol and select from the drop-down various stock research activities. View charts, search blogs, Google, Yahoo Finance, MSN Money or EDGAR SEC filings. The widget pops up results in a new window.

A cool feature of this widget is that it can be sized for sidebars (vertical) or as a top-of-page search facility (horizontal).

Click here to check out the Stock Linkz widget now.

I have put together a collection of stock market related widgets at WidgetBox. This post suggests a use for the whole bunch.

First, I'd like to list the widgets:

1. LiveStockCharts
2. LiveStockQuotes
3. Articles from SeekingAlpha.com
4. Stock Market Update RSS feed from Briefing.com

What I have done for myself is create a stock market monitoring center by assembling these widgets on several panels and embedding the panels onto an HTML page.

I pre-program the LiveStockQuotes to display major stock market averages and my favorite stocks of interest. I have four sets of LiveStockCharts on the page that I can use to monitor the price action of multiple stocks at the same time.

Every once in a while I hit the Refresh button on the Market Update RSS feed from Briefing.com to get an idea of what's driving the market at the moment. With the Refresh button, the widget displays the newest updates but I don't have to re-load the whole HTML page.

I keep the SeekingAlpha widget on the page so that I have ready access to the latest articles and opinions on stocks I might be interested in.

Currently, I have this Market Monitor configured as a simple HTML page on my desktop that I keep up all day so I can check the market whenever I get a spare minute. Here is a link to an example: view Live StockCenter. Enter your own ticker symbols and try out all the charts and analysis tools that are included.

This is probably my best widget so far. It will display stock quote data including current price, change in price since previous trading day and percent change for one or more stocks, ETFs or indices. It updates throughout the trading day (US markets only) at 30 second intervals.

You can set this up so that it automatically displays your whole portfolio. You can set it up so it displays all major indices. Or you can set it up so that you can enter the ticker symbols of those equities you are interested in at that moment.

There is a simple form in which you or other users can enter a list of ticker symbols, separated by commas. The data is displayed in a tabular format. You can set up the widget so the form is hidden and only the stocks you entered at initialization can be displayed.

This widget is a bit wide at about 260 pixels but it offers lots of flexibility and is one of the few quote widgets that updates continuously. Data is obtained from Yahoo. Index data is up the minute, all other data is delayed by 15 minutes.

Check out the LiveStockQuote widget now at WidgetBox.com

I have developed a new stock chart widget. It is available at WidgetBox.com and is called LiveStockChart. It allows a user to enter a ticker symbol and then displays a small chart from Yahoo. The cool thing about it, however, is that it updates every 30 seconds. You can
visually track the price performance of a stock or ETF all day long (or as long as US markets are open). It also provides a link to the stock's profile at Yahoo Finance.

LiveStockChart's small size allows it to fit into a sidebar and its sticky characteristics may be just what you need to keep your users on your site.

Check out LiveStockChart at WidgetBox.

If you want the code to directly embed in your pages, get the code in a TXT file.

I have rolled out another widget that will be good for the financial bloggers. It allows the reader to enter a ticker symbol for a stock or ETF and retrieve a list of recent articles from SeekingAlpha.com.

You can find it at WidgetBox at the following URL: NewsFromSeekingAlpha.

I have been experimenting with widgets at the WidgetBox.com site and I have created two new ones.

The first one is a small search box that invokes a custom search at Rollyo for News and Current Events. It searches a number of news sites for stories based on the search term you entered. It's called News from Rollyo and you can get it or try it out by clicking on this link which will take you directly to the page at WidgetBox.

The second one provides local traffic alerts and road conditions based on data from Yahoo! You can get it or play with it by clicking this link.

Both of these widgets can be used in the sidebar of your blog or anywhere else you would like to place them.

Examples of OpenLinkz have so far been shown on light colored backgrounds. Suppose you have a dark color scheme on your pages? No problem.

The OpenLinkz widget can be configured to provide different styles for the appearance of links. There are three options:

(1) You can adjust the border underneath the link. It can be solid or dashed.
(2) You can adjust the color of the border under the link.
(3) You can adjust the color of the link when you hover over it.

Some examples are shown below against a dark blue background.

Here is how it was done: At the very bottom of the page, just before the /BODY tag, paste the following Javascript code snippet:

<script type="'text/javascript'">initializeOpenLinkz('','red', 'blue');</script>

Note that the first parameter was left blank; ie, two single quotes with nothing in between. This means accept the default value which is 'dashed'.

Here is a cheat sheet:

#	Parameters	Possible Values
1	Bottom Border	'', 'dashed', 'solid', 'none'
2	Border Color	'', color names such as 'red', 'blue', etc. and numeric colors such as '#e6e6e6 or '#000000'
3	Background Color	same as Parameter #2

OK, so you took a look at OpenLinkz and decided there is just too much typing involved. Should you use the ANCHOR tag or the SPAN tag? What's with all this stuff in the "onmousever" event? And for that matter, why fool around with "onmouseover" at all?

You'll be glad to know that we've taken OpenLinkz to a new level of simplicity. Here are the improvements.

First, you don't have to add the script at the end of your page to initialize OpenLinkz.

Second, if you don't want to use ANCHOR tags, you don't have to. Since SPAN and ANCHOR tags work pretty much the same, OpenLinkz lets you use either one. But if you want to be simple, just use the SPAN tag. OpenLinkz will underline it with a dashed line so readers will know it is clickable.

Third, if you don't want to designate search terms, you don't have to. This means you can leave out the "onmouseover" function call to openLinkz(this, ...). As long as there is a reasonable search term within the opening and closing parts of the tag, OpenLinkz will figure it out. Here is an example:

<span class="techLink">AJAX</span>

Here is how it looks in a sentence: AJAX is driving the development of Web 2.0

It can't get much simpler than that.

Let's look at a couple of other examples. Here is a sentence that uses links to general news and to stock market tools.

<span class="newsLink">Options backdating</span> is even affecting Apple (<span class="stockLink">APPL</span>)

Here is how this looks: Options backdating is even affecting Apple (AAPL).

Use this cheat sheet to make sure you are following the basic rules for setting up the OpenLinkz widget and getting it to work on your pages. Once you have the initialization stuff done (see the prior post on Enabling OpenLinkz for more details), there are just a few things to keep in mind: use the right tags, set up the onmouseover event properly and spell the class name correctly.

Load the Code

To load the javascript file at run-time, paste into the HEAD section of your HTML page the following code snippet:

<script type='text/javascript' src='http://openlinkz.com/scripts/openlinkz.js'></script>"

Tags

• Use either an ANCHOR tag or a SPAN tag

Events

• Set up the "onmouseover" event:
• onmouseover="openLinkz(this, 'first search term', 'second search term');"
• Be careful with the quotes.


• 
  Or leave it out altogether and let OpenLinkz supply a default (see the OpenLinkz Simplified post).

Class name

• Supply the tag with the appropriate CLASS name (class="xxxxLink") as shown in the table below.
• Remember, class names are case sensitive.

OpenLinkz Theme	tag Class
stock market	stockLink
technology	techLink
news and current events	newsLink

Link Styles

Here are the input parameters to the initializeOpenLinkz() function that you can use to modify the appearance of links (see the Changing the Appearance of Links post).

• Parameter #1: Bottom Border, possible values: '', 'dashed', 'solid', 'none'


• Parameter #2: Border Color, possible values: '', color names such as 'red', 'blue', etc. and numeric colors such as '#e6e6e6 or '#000000'


• Parameter #3, Background Color, possible values: same as Parameter #2

Enabling OpenLinkz in your pages

It is very easy to install the OpenLinkz widget in your web page or blog. The script file needs to be loaded. When the page loads, the functionality will be automatically initialized. The following code snippets show you how to do it.

To load the javascript file at run-time, paste into the HEAD section of your HTML page the following code snippet:
<script type='text/javascript' src='http://openlinkz.com/scripts/openlinkz.js'></script>

If you are using Blogger or one of the other XML-based blogging applications, you may find that the code snippet above causes an error. In that case, try pasting into the HEAD section of your XML template the following code snippet:
<script type='text/javascript' src='http://openlinkz.com/scripts/openlinkz.js'/>

Using OpenLinkz

Please read the post OpenLinkz Simplified to see all the tips on how you can streamline your HTML by leaving out any reference to the OpenLinkz functionality.

To take full advantage of the power of the OpenLinkz widget, however, you need to call a javascript function named openLinkz from the onmouseover event of either an ANCHOR tag or a SPAN tag. The openLinkz function is flexible. It can take one, two or three parameters.

(1) The word 'this' (with no quotes) must always be the first parameter.
(2) The primary search word must always be the second parameter. In the case of a stockLink, this must be the symbol for the stock.
(3) The third parameter is optional. It can be any search term that enhances the search experience. In the stockLink example, you could pass the company name in this parameter to enhance the search capability. This where you can really fine tune the search.

Note that the tag must have the correct class in order to work properly. At this time it can be either "stockLink", "newsLink" or "techLink". Be careful: it is case sensitive and must be spelled exactly as shown. This is the one thing that must always be included in your tag in order for the OpenLinkz widget to work.

An example of using StockLinkz (OpenLinkz for the stock market) with an anchor tag and the stock symbol:
Microsoft (<a href="javascript:void(0);" onmouseover="openLinkz(this, 'MSFT');" class="stockLink">MSFT</a>)

Here's how the example above looks: Microsoft (MSFT)

There may be situations where you are using a classname for your anchor tags already in order to give links a particular look or style. No problem. In this case, you can implement OpenLinkz using a span tag and your links will remain just as you like them. An example of using TechLinkz with a span tag and two search terms:
<span onmouseover="openLinkz(this, 'AJAX', 'Internet')" class="techLink">AJAX</span>

Here's how the example above looks in a sentence: AJAX is driving the growth of Web 2.0

You can download the OpenLinkz Javascript file in zip format. Unzip and paste the code directly into your pages or install the Javascript file on your own web server. Get it now!

Be sure to review the other posts on setting up the OpenLinkz widget, especially OpenLinkz Simplified and OpenLinkz Cheat Sheet.