MyLibrary for webmasters

With the addition of some simple HTML code, you can include MyLibrary content into your HTML pages. For example, add the following snippet to any HTML file and an unordered hotlinked list of dictionaries from MyLibrary will appear on your page.

<script type = 'text/javascript'
         src = 'http://infomotions.com/sandbox/mylibrary/js/?termid=37'>
</script>

Read on for details.

MyLibrary terms

The content of MyLibrary is organized using sets of "terms". These terms bring similar information resources together under a single heading. Example terms include dictionaries, newspapers, literature, etc.

Each term is associated with a number -- a termid. By substituting a different value for termid, in red above, you are able to insert different sets of information resources into your page(s). Here is a list of all the terms presently in the system, a brief description of each term, and its associated termid:

Therefore, the following HTML snippet will include a list of cooking resources (termid=90) into your page.

<script type = 'text/javascript'
         src = 'http://infomotions.com/sandbox/mylibrary/js/?termid=90'>
</script>

Likewise, this snippet will include a list of Internet indexes (termid=39).

<script type = 'text/javascript'
         src = 'http://infomotions.com/sandbox/mylibrary/js/?termid=39'>
</script>

To see this in action load http://infomotions.com/sandbox/mylibrary/js-example-01.html, and view the source code. Not too difficult.

Styling your lists

By adding div elements and style attributes to your HTML, you can style the lists and position them on the page. For example, this snippet will create a list of literature resources on the right-hand side of the page and enclose it in a box:

<div style='float:         right;
            padding-left:  1em;
            padding-right: 1em;
            width:         15%;
            font-size:     small;
            border:        1px solid #778;
            margin:        1em;'>
	<script type = 'text/javascript'
	         src = 'http://infomotions.com/sandbox/mylibrary/js/?termid=52'>
	</script>
</div>

You can add a little header inside the box to give the list a bit of context, and you can stylize the list itself so it uses the screen real-estate more efficiently:

<div style='float:         right;
            padding-left:  1em;
            padding-right: 1em;
            width:         15%;
            font-size:     small;
            border:        1px solid #778;
            margin:        1em;'>
        <h3>Literature resources</h3>
        <div style='margin-left: -2em'>
        	<script type = 'text/javascript'
                     src = 'http://infomotions.com/sandbox/mylibrary/js/?termid=52'>
        	</script>
        </div>
</div>

To see how this is rendered, view the source of http://infomotions.com/sandbox/mylibrary/js-example-02.html.

Using something like the snippet above is the recommended practice since it seems to be pretty efficient and unobtrusive.

That's all. Have fun with it.

If you have any questions, just ask, and if you implement this technique, then don't hesitate to drop me a line. I would like to create a short list of examples found on the 'Net.