Встраивание восхитительной JSON-ленты в сайт
Я хочу встроить свои восхитительные ссылки на мой веб-сайт, управляемый CMS. Я пытался понять инструкции на https://delicious.com/rss но не могу понять, что действительно нужно для получения ссылок, например, отсортированных по тегам на моем веб-сайте.
До апреля 2014 года работал с таким кодексом:
<script type="text/javascript" src="http://feeds.delicious.com/v2/js/fachschule_gartenbau/Teichbau_allgemein?title=&count=100&sort=date&extended"></script>
Теперь они говорят, что они изменили синтаксис в http://feeds.delicious.com/v2/json/ ...
Я пытался заменить "js" в моем коде на "json", но это не сработало. У кого-нибудь есть идея?
Фактический (и старый) код, например:
<script type="text/javascript" src="http://feeds.delicious.com/v2/js/fachschule_gartenbau/gemüse+gemüsebau?title=&count=100&sort=alpha"></script>
Ничего в голове.
Этот код не работает. Может быть проверен на http://www.fachschule-gartenbau.de/gemuese.htm
1 ответ
Немного опоздал на вечеринку, просто заметил, что облако тегов у меня тоже сломалось. Теперь вам нужно загрузить JSON самостоятельно, а затем создать из него список тегов (или облако тегов). В качестве альтернативы, вы, конечно, могли бы также создать что-то на PHP и т. Д. На стороне сервера, но я предполагаю, что вы хотите придерживаться клиентского решения на основе JavaScript.
Шаги:
- Скачать JSON.
- Парс JSON.
- Построить что-нибудь из этого.
Чтобы скачать JSON, я обычно использую XMLHttpRequest(), но это не сработает из-за межсайтовой защиты скриптов. Поэтому я просто прибег к вызову JSON API с помощью функции обратного вызова в HTML <script> тег (я использовал имя пользователя вкусно в этом примере):
<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> ';
}
document.getElementById("deliciousPlaceholder").innerHTML = out;
}
</script>
<script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousCloud"></script>
</body>
</html>