Embedding a Delicious JSON-Feed in a Website

Question

Embedding a Delicious JSON-Feed in a Website

921 Views Asked by user3611184 At 07 May 2014 at 08:07

I want to embed my delicious.com Links into my CMS-driven Website. I tried to understand the instructions on https://delicious.com/rss but i cannot understand what is really needed to get the links e.g. sorted by tag on my website.

Until April 2014 it worked with such an Code:

<script type="text/javascript" src="http://feeds.delicious.com/v2/js/fachschule_gartenbau/Teichbau_allgemein?title=&amp;count=100&amp;sort=date&amp;extended"></script>

Now they say that they changed the syntax into http://feeds.delicious.com/v2/json/ ...

I was trying to replace the "js" in my code with "json" but this didn't work. Has anybody an idea?

The actual (and old) code is for example:

<script type="text/javascript" src="http://feeds.delicious.com/v2/js/fachschule_gartenbau/gemüse+gemüsebau?title=&amp;count=100&amp;sort=alpha"></script>

Nothing in the head.

This code doesn't work. Can be inspected on http://www.fachschule-gartenbau.de/gemuese.htm

Original Q&A

There are 1 best solutions below

**puzzle** · Answer 1 · 2015-01-31T11:32:44.273000

A bit late to the party, just noticed that the tag cloud was broken for me as well. You now have to download the JSON yourself, then build your tag list (or tag cloud) from it. Alternatively, you could of course also build something in PHP etc. server-side, but I'm assuming that you want to stick with a client-side JavaScript-based solution.

The steps are:

Download JSON.
Parse JSON.
Build something from it.

To download the JSON, I'd normally use an XMLHttpRequest(), but that won't work here due to cross-site scripting protections. So I just resorted to calling the JSON API with a function callback in an HTML <script> tag (I've used the username delicious in this example):

<script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousTags"></script>

This script tag will take care of steps 1 and 2 and will then call the printDeliciousTags function with the contents of the JSON as parameter so we can build something from it.

Here's a very basic implementation that sorts the tags alphabetically and print them as an unordered list:

var username = "delicious";
var ignoreFiletypes = true;
var minCount = 1;
var tagURLPrefix = "http://delicious.com/" + username + "/";

function printDeliciousTags(tags)
{
    var out = "";
    var visibleTags;

    // find all tags matching our min count and exclude filetypes as needed
    visibleTags = [];
    maxCount = 0;
    for (tag in tags) {
        if (tags.hasOwnProperty(tag)) {
            if (tags[tag] > maxCount) {
                maxCount = tags[tag];
            }
            if (
                tags[tag] >= minCount && 
                (!ignoreFiletypes || tag.indexOf(":") == -1)
            ) {
                visibleTags[visibleTags.length] = tag;
            }
        }
    }

    // sort the tags alphabetically (case-insensitive)
    visibleTags.sort(function (a, b) {
        return a.toLowerCase().localeCompare(b.toLowerCase());
    });

    // print the tags
    out += '<ul>';
    for (var i = 0; i < visibleTags.length; i++) {
        var tag;
        tag = visibleTags[i];
        out += '<li><a href="' + tagURLPrefix + tag + '">';
        out += tag + ' (' + tags[tag] + ' bookmarks)';
        out += '</a></li>';
    }
    out += '</ul>';
    document.getElementById("deliciousPlaceholder").innerHTML = out;

Complete HTML example for a basic unordered list:

<html>
    <head>
    <title>Delicious JavaScript Tag API Replacement (Basic List)</title>
    </head>
    <body>
        <div id="deliciousPlaceholder"></div>
        <script type="text/javascript">
            var username = "delicious";
            var ignoreFiletypes = true;
            var minCount = 1;
            var tagURLPrefix = "http://delicious.com/" + username + "/";

            function printDeliciousTags(tags)
            {
                var out = "";
                var visibleTags;

                // find all tags matching our min count and exclude filetypes as needed
                visibleTags = [];
                maxCount = 0;
                for (tag in tags) {
                    if (tags.hasOwnProperty(tag)) {
                        if (tags[tag] > maxCount) {
                            maxCount = tags[tag];
                        }
                        if (
                            tags[tag] >= minCount && 
                            (!ignoreFiletypes || tag.indexOf(":") == -1)
                        ) {
                            visibleTags[visibleTags.length] = tag;
                        }
                    }
                }

                // sort the tags alphabetically (case-insensitive)
                visibleTags.sort(function (a, b) {
                    return a.toLowerCase().localeCompare(b.toLowerCase());
                });

                // print the tags
                out += '<ul>';
                for (var i = 0; i < visibleTags.length; i++) {
                    var tag;
                    tag = visibleTags[i];
                    out += '<li><a href="' + tagURLPrefix + tag + '">';
                    out += tag + ' (' + tags[tag] + ' bookmarks)';
                    out += '</a></li>';
                }
                out += '</ul>';
                document.getElementById("deliciousPlaceholder").innerHTML = out;
            }
        </script>
        <script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousTags"></script>
    </body>
</html>

Complete HTML example for a tag cloud:

<html>
    <head>
    <title>Delicious JavaScript Tag API Replacement (Tag Cloud)</title>
    </head>
    <body>
        <div id="deliciousPlaceholder"></div>
        <script type="text/javascript">
            var username = "delicious";
            var minFont = 14;
            var maxFont = 36;
            var ignoreFiletypes = true;
            var minCount = 1;
            var tagURLPrefix = "http://delicious.com/" + username + "/";

            function printDeliciousCloud(tags)
            {
                var out = "";
                var maxCount;
                var factor;
                var offset;
                var visibleTags;

                // find all tags matching our min count and exclude filetypes as needed
                visibleTags = [];
                maxCount = 0;
                for (tag in tags) {
                    if (tags.hasOwnProperty(tag)) {
                        if (tags[tag] > maxCount) {
                            maxCount = tags[tag];
                        }
                        if (
                            tags[tag] >= minCount && 
                            (!ignoreFiletypes || tag.indexOf(":") == -1)
                        ) {
                            visibleTags[visibleTags.length] = tag;
                        }
                    }
                }

                // sort the tags alphabetically (case-insensitive)
                visibleTags.sort(function (a, b) {
                    return a.toLowerCase().localeCompare(b.toLowerCase());
                });

                // the tag cloud looks nicer if we use a logarithmic function, so fit
                // one to our configured font sizes and min count
                factor = (minFont - maxFont) / (Math.log(minCount) - Math.log(maxCount));
                offset = maxFont - (factor * Math.log(maxCount));

                // print the tag cloud
                for (var i = 0; i < visibleTags.length; i++) {
                    var size;
                    var style;
                    var tag;
                    tag = visibleTags[i];
                    size = offset + (factor *  Math.log(tags[tag]));
                    style = 'text-decoration:none; color:#73adff; font-size:' + size + 'px;';
                    out += '<a href="' + tagURLPrefix + tag + '" style="' + style + '" title="' + tags[tag] + ' bookmarks">';
                    out += tag;
                    out += '</a>&nbsp; ';
                }
                document.getElementById("deliciousPlaceholder").innerHTML = out;
            }


        </script>
        <script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousCloud"></script>
    </body>
</html>

Embedding a Delicious JSON-Feed in a Website

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JSON

Related Questions in RSS

Related Questions in FEED

Related Questions in DELICIOUS-API

Trending Questions

Popular # Hahtags

Popular Questions