Продолжаем тему фидов в Blogger


Api блоггера/гугла позволяет позволяет манипулировать фидами с помощью технологии JSON (JavaScript Object Notation), следовательно вызывать и управлять ими там, где это необходимо.
Пользователи Blogger быстро смекнули, как это работает, и, как пример, Abu Farhan создал замечательный способ делать карты блога (TOC).

Сейчас посмотрим на ещё один момент использования фидов в Blogger, как json объектов.
Демо:

Вызов списка статей, привязанных к определённом тегу.

Выбери рубрикуи нажми на кнопку 



Реализация
.
Скрипт:
<script type="text/javascript">
<!--
function listEntries(json) {
  // Clear any information displayed under the "data" div.
  removeOldResults();
  var ul = document.createElement('ul');

  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }

    var li = document.createElement('li');
    var a = document.createElement('a');
    a.href = alturl;
    a.target = '_blank';

    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);

    ul.appendChild(li);
  }

  // Install the bullet list of blog posts.
  document.getElementById('data').appendChild(ul);

  // Re-enable the search button.
  var search_button = document.getElementById('search_button');
  search_button.removeAttribute('disabled');
}


function search(query) {
  // Delete any previous JSON script nodes.
  removeOldJSONScriptNodes();
  // Clear any old data to prepare to display the Loading... message.
  removeOldResults();

  // Show a "Loading..." indicator.
  var div = document.getElementById('data');
  var p = document.createElement('p');
  p.appendChild(document.createTextNode('Loading...'));
  div.appendChild(p);

  // Disable the search button.
  var search_button = document.getElementById('search_button');
  search_button.disabled = 'true';

  // Retrieve the JSON feed.
  var script = document.createElement('script');
  script.setAttribute('src', 'http://blogger.omg-linux.ru/feeds/posts/default/-/' + query + '?alt=json-in-script&callback=listEntries');
  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}


function removeOldJSONScriptNodes() {
  var jsonScript = document.getElementById('jsonScript');
  if (jsonScript) {
    jsonScript.parentNode.removeChild(jsonScript);
  }
}


function removeOldResults() {
  var div = document.getElementById('data');
  if (div.firstChild) {
    div.removeChild(div.firstChild);
  }
}

//-->
</script>
Обратите внимание на сегмент Retrieve the JSON feed.
Здесь присутствует строка ('src', 'http://blogger.omg-linux.ru/feeds/posts/default/-/' + query + '?alt=json-in-script&callback=listEntries');, в которой прописана ссылка на мой фид для тегов. Вместо самого тега сюда подставится параметр из формы ↓

Форма (с выбором тегов)
<form onsubmit="return false">
<p>
Выбери рубрику<select name="blog_name">
<option>html</option>
<option>jquery</option>
<option>js</option>
<option>яндекс</option>
<option>хитрости</option>
<option>виджеты</option>
</select>и нажми на кнопку&nbsp;

<button id = 'search_button' onclick="search(this.form.blog_name.options[this.form.blog_name.selectedIndex].text);">Жми</button>
</p>
</form>

Html:
<div id="data">
</div>

Документация по использованию JSON в Google Data Protocol.

1 комментарий:

  1. У меня вот такая карта сайта: http://www.active-travels.com/p/soderjanie-saita.html

    ОтветитьУдалить