Bibliolinks explained

In an earlier post I presented bibliolinks, a new blogger tool based on Google AJAX Search API. Now it’s time to explain how to install it in your Blogger blogs. You’ll have to modify your template in obscure and contorted ways, so be prepared and backup it before it’s too late! One more thing: this procedure works with my own template, on Firefox 2. I will not be held responsible of anything if you are not me, fiddling with my own template on my own setup. Even if you were me (and I am me, unless…) I wouldn’t bet on any accountability.

Aren’t you scared yet? Ready? There we go. First of all, you have to register for a Google AJAX Search API key here. Got it? Save it somewhere! (You can always regenerate it later; the key is calculated from the URL you input, in this case, you blog’s address.)

Now, edit your template and add this snippet just before your closing </head> tag:

<link href='' rel='stylesheet' type='text/css'/>

We are not even close to finish yet! Save your template, click on the Expand Widget Templates box and look for some place to drop this code snippet:

<a class='bibliolink' expr:name='"bibliolink" +' style='display:none;cursor:pointer;'>Bibliolink <span>&#9658;</span></a>

This should be located somewhere inside your post footer container (on my template, it’s a <div class='post-footer'> tag). I decided to put it inside an empty element denoting a third line of content for post footers, exactly here:

<p class='post-footer-line post-footer-line-3'/>

YMMV, of course. Now, only one more step: you have to provide a link for two scripts. The best place to do so is just before the closing </body> tag. This is the first script, for Google AJAX Search functions:

<script src=';v=1.0&key=YOUR_KEY_HERE' type='text/javascript'/>

Don’t forget to substitute YOUR_KEY_HERE by your own API key. Immediately next to that script, add this one:

<script language='Javascript' src='' type='text/javascript'/>

Here you should use your own hosting for the code, since I’m using my own Google Page. Here is a link to an uncompressed (and, for now, uncommented) version of the code.

And that’s all for now!


Lots of links in your posts? Would you like something that provides your readers with prompt access to all links in your posts, together with clipped content? Something like an automatic bibliography for your blog? You’ve come to the right place!

Bibliolinks is a tool which, by means of some right out nasty manipulation of DOM and a tiny little speck of magic powder in the form of Google AJAX Search API, allow readers to have access to a compilation of all links in a post. It’s alpha quality, so don’t expect to have an easily deployed widget soon. In fact, you should not expect it at all, since the level of slicing and dicing necessary for Blogger templates in order to display bibliolinks is rather high, and I don’t see that diminishing any time soon.

I’ll post an installation tutorial and some code as soon as I find some time to refine the implementation. Meanwhile, enjoy them! (Or crash your browser, whichever comes first.)

How to blog in more than one language

The Spanish blogosphere looks weak. But language is accidental, automatic translation is ubiquitous, and the relative importance of content creator language is shrinking day in day out. However, when considering translation issues like those illustrated in the last post, perhaps some human intervention is in order to bridge the gap between semantic worlds.

To assist in this task, I have prepared a Blogger widget that allows writing posts in more than one language, discriminating among them and enabling the reader a clear view of her preferred content. To the user, the scheme resembles somewhat server-side content negotiation, but in a DOM-manipulating, Web-two-dot-zeroish way.

Some usage notes:

  1. First of all, you have to add the widget to your blog. There is a button next to the language selection combo to do just that. Not in Blogger? No problemo. Just download the script langsupport.js, and deploy it to your favorite location (it can be included in your template code, or anywhere in the HTML of your pages with a <script> tag, it is not too heavy, moreso if you use JS Minifier on it). You should at least remove the sentence with the comment Only needed when code is running inside a Blogger widget to make it work successfully outside Blogger.
  2. If not hosted on Blogger, you should also provide an anchoring point for Javascript to know where to insert the language selector combo. It should look like this:
    <span id="__langSupport__"></span>
  3. Denote language dependant HTML content with the lang attribute, using ISO 639-1 language names (there is no obligation to do so; however, the default language feature will malfunction). For instance:
    <p lang="en">This paragraph is in English.</p>
    <p lang="es">Este párrafo está en español.</p>
  4. Enjoy!

Things to keep in mind:

  • Unmarked HTML elements (those without lang attribute) will be left untouched.
  • A tag marked with a language which is not currently displayed will hide all its contents, even if some inside tag is marked with the currently displayed language. To avoid trouble, do not nest tags with different lang attributes.
  • If there are no lang attributes in the document, the combo selector will not appear.
  • The first language selected depends on default system locale. Therefore, if there is not content in that language on the page, the default language is selected (English, or ‘en’); if there is no content marked as the default language, the first one available (in lexicographical order) is chosen.
  • Unfortunately, the browser’s preferred language configuration is not exposed to the Javascript engine, AFAIK, so that setting cannot influence the default language here (it is only used for content negotiation with specifically configured servers): the default operating system locale is used instead.
  • This has been tested with Firefox 2. Never mind if IE also groks it.