在网站中嵌入美味的json feed

我想嵌入我的delicious链接到我的cms驱动的网站。我试图理解https://delicious.com/rss上的说明，但我无法理解什么是真正需要得到的链接，例如按标签在我的网站上排序。

直到2014年4月，它都在这样的代码下工作:

<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>

现在他们说他们把语法改成了http://feeds.delicious.com/v2/json/ ...

我试图用"json"代替我的代码中的"js"，但这不起作用。有人知道吗?

实际的(旧的)代码如下:

<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>

标题

这段代码不起作用。可在http://www.fachschule-gartenbau.de/gemuese.htm

查看

来晚了一点，刚刚注意到我的标签云也坏了。现在您必须自己下载JSON，然后从中构建标记列表(或标记云)。或者，你当然也可以在PHP等服务器端构建一些东西，但我假设你想坚持使用基于javascript的客户端解决方案。

步骤如下:

下载JSON。
解析JSON。
从它构建一些东西。

要下载JSON，我通常使用XMLHttpRequest()，但由于跨站点脚本保护，这在这里不起作用。所以我只是诉诸于调用JSON API与一个函数回调在HTML <script>标签(我已经使用用户名delicious在这个例子):

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

这个脚本标签将处理步骤1和2，然后将调用printDeliciousTags函数，并将JSON的内容作为参数，以便我们可以从中构建一些东西。

下面是一个非常基本的实现，它按字母顺序对标签进行排序，并将它们打印为无序列表:

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;

基本无序列表的完整HTML示例:

<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>

标签云的完整HTML示例:

<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>

相关内容

最新更新

热门标签：