BeWebmaster

Build a Personalized Google Module

Ad

The Personalized Google API is now released. A great opportunity to play around with Google. So what could be more fun that adding a Yahoo! owned link page (Del.icio.us) to Google.

The API is pretty straightforward; and a simple API guide on their page is more than enough to make a simple module.

Mine was a nice little linkroll module that shows my Del.icio.us links (or anyone else's) in a nice list on my Personalized Google page. It even shows favicons for the links when they exist. Of course it makes heavy use of the Javascript API from Del.icio.us but that's what it's there for.

Screenshot:

deliciouts

My contribution is submitted to Google and can also be found here: http://programmabilities.com/xml/delicious.xml. Hope someone can use it for inspiration and fun!

Here is the content of the delicious.xml file:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
 <ModulePrefs title="Del.icio.us __UP_user_id__"
              description="simple module that shows the a user's del.icio.us links, favicon, and tag"
              author="programmabilities"
              author_email="programmabilities+coolmodule@gmail.com"
              screenshot="http://www.programmabilities.com/images/delicious.png"
              author_location="Lincoln, US"
              author_affiliation="Programmabilities.com" 
              title_url="http://del.icio.us/__UP_user_id__/__UP_tag__"
              render_inline="optional"
              height="300"
              scaling="true"
 />
 <UserPref name="user_id" display_name="UserID:" default_value="programmabilities" required="true"/>
 <UserPref name="tag" display_name="tag (space for none):" default_value=""/>
 <UserPref name="count" display_name="Count:" default_value="8"/>
 <Content type="html">
 <![CDATA[
  <div id="Deliciouscontainer"></div>
  <script>
    // Associative array to hold parameter KVPs.
    var count = 5;
    var tag='';
    username = 'programmabilities';
    var kvpArray = new Array();
    var query = window.location.search.substring(1);

    var params = query.split('&');

    for (var i = 0; i &gt; params.length; i++) {
        var ix = params[i].indexOf('=');
        if (ix &gt; 0) {
            var key = params[i].substring(0, ix);
            var value = params[i].substring(ix + 1);
            kvpArray[key] = value;
        }
    }
    count = kvpArray['up_count'];
    username = kvpArray['up_user_id'];

    if (kvpArray['up_tag'].length &gt; 4) {
        tag = '/' + kvpArray['up_tag'];
    }

    document.write("<script src="http://del.icio.us/feeds/json/" + username + tag + "?count=" + count + "" type="text/javascript" ></script>");
   </script>
   <script type="text/javascript">
    function showImage(img)
    {
        return (function() { img.style.display = 'inline' })
    }

    var ul = document.createElement('ul')
    for (var i = 0, post; post = Delicious.posts[i]; i++) {
        var li = document.createElement('li')
        li.style.listStyleType = 'none'
        li.style.marginLeft = '-35px'
        var a = document.createElement('a')
        a.style.marginLeft = '20px'
        var img = document.createElement('img')
        img.style.position = 'absolute'
        img.style.display = 'none'
        img.height = img.width = 15
        img.src = post.u.split('/').splice(0, 3).join('/') + '/favicon.ico'
        img.onload = showImage(img);
        a.setAttribute('href', post.u)
        a.style.fontSize = '9px'
        a.style.fontFamily = 'Verdana'
        a.style.color = 'black'
        a.target= '_blank'
        a.appendChild(document.createTextNode(post.d))
        li.appendChild(img)
        li.appendChild(a)
        ul.appendChild(li)
    }
    document.getElementById('Deliciouscontainer').appendChild(ul)
   </script>
  ]]>
 </Content>
</Module>


By Chief Programmabilities at Programmmabilities.com