FlatulentFish All Kinds of Junk

Introduction

I was looking around for a way to dynamically display my del.icio.us links in a Drupal page and stumbled across the dishy project - it nicely wraps the del.icio.us JSON libraries to add all-javascript link handling to your web page. I then hacked one of the examples to get this whole thing to work - pretty slick stuff.

Installation

Installation is pretty straightforward:

• Download the dishy bundle from the previously mentioned site.
• Upload dishy.js to a convenient folder on your hosting site: I chose /dishy.
• Create a new page under drupal.
• Paste in the following code, making sure to update the dishy.owner variable to your del.icio.us user name.

That's it. You now have a nice dynamic link page - click on a term and all of the associated links are displayed on the page. No fuss, no muss.

I also created a URL alias and a main menu entry to point to the links page.

Comments are welcome - my CSS is pretty rusty, so I probably have a bunch of stuff in there I don't need. Have fun!

    <style type="text/css">
        #cloud{
            width:80%;
        }
        #cloud a {
            color:#6f9dbd;
        }
        #dishyfooter{
            border-top:1px solid #ccc;
            padding:.5em .5em 0 .5em;
            margin:.5em;
            clear:both;
            text-align:center;
        }
        .meta {
            font-size:.9em;
            margin: 0;
            margin-right: 0.5em;
        }
        .meta li{
            display:inline;
            padding-right:.5em;
            list-style: none;
        }
        div#cloud a{
            display:block;
            float:left;
            padding:.2em .5em;
            line-height:auto;
        }
        #dishyoutput {
            clear:both;
            list-style: none;
            margin-top: 2em;
            };
        #dishyoutput li {
            list-style: none;
        }
        li.xfolkentry {
            list-style: none;
        }
        .xfolkentry a.taggedlink {
            color: #027AC6;
            font-weight: bold;
        }
        .xfolkentry ul.meta li {
            list-style: none;   
        }
        .xfolkentry ul.meta a {
            color: #5895be;
            font-style: italic;
        }
    </style>
    <script type="text/javascript" src="/dishy/dishy.js"></script>
    <script type="text/javascript">

        // change properties
        dishy.owner = 'buzzdata';
        dishy.showAmount = false;

        window.onload = function(){
            dishy.callback = 'cloudinit';
            dishy.getTags();
        }

        function cloudinit(){
            var tags = document.createElement('div');
            tags.id = 'cloud';
            tags.innerHTML= dishy.tagsHTML; // from getTags()
            dishy.output = document.createElement('ul');
            dishy.output.id='dishyoutput';
            var f = document.getElementById('dishyfooter')
            f.parentNode.insertBefore(tags,f);
            f.parentNode.insertBefore(dishy.output,f);
            var links = tags.getElementsByTagName('a');
            for(var i=0;i<links.length;i++){
                links[i].onclick=function(){
                    showlinks(this);
                    return false;
                }
            }
        }
        function showlinks(o){
            var tag = o.href.match(/(\w+)$/)[1];    // get tag from URL
            dishy.callback = 'returnlinkdata';      // define callback to call when JSON has retrieved the data
            dishy.o = o;                            // store link in object
            dishy.getByTag(tag);                    // get data
        }
        function returnlinkdata(){
            dishy.output.innerHTML= dishy.tagHTML[dishy.currentTag];  // from getByTag()
        }  


    </script>
  <h3>Click one of the keywords in the "cloud" below to display associated links.</h3>
  <div id="dishycontent">
  <p id="dishyfooter"/>
  </div>


‹ Adventures with DrupalupDrupal Modules ›