Google AJAX Feed API and multiple feeds

Пару недель назад Google анонсировал AJAX Feed API, который позволяет загрузить и разместить на веб-странице анонсы новостей из любого открытого Atom- или RSS-канала, используя только JavaScript. Покажу, как доработать простой пример из документации к API и получить список новостей, отсортированных по дате, из нескольких лент.

В примере используются три ленты:

  • http://ajax.phpmagazine.net/atom.xml (AJAX Magazine)
  • http://www.oreillynet.com/pub/feed/20?format=rss2 (XML.com)
  • http://feeds.feedburner.com/ajaxian (Ajaxian)

Что получилось

Получился список отсортированных по дате новостей, выбранных из трех новостных лент, взятых с разных сайтов.

Пример кода


<html>
  <head>
  <script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>
  <script type="text/javascript">
  google.load("feeds", "1");
  var FA = new Array("http://ajax.phpmagazine.net/atom.xml",
   "http://www.oreillynet.com/pub/feed/20?format=rss2",
   "http://feeds.feedburner.com/ajaxian");

  function initialize() {
        var feedsArr = new Array();
        var numEntr = 5;
        var container = document.getElementById("feed");
        var cnt = FA.length;
    for (var k=0; k<FA.length; k++) {
    var feed = new google.feeds.Feed(FA[k]);
    feed.setNumEntries(numEntr);
    feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
    feed.load(function(result) {
      if (!result.error) {
        for (var i = 0; i < result.feed.entries.length; i++) {
          var entry = result.feed.entries[i];
          var attributes = ["title", "link", "publishedDate", "contentSnippet"];
          var ind = feedsArr.length;
          feedsArr[ind] = new Array();
          feedsArr[ind][0] = Date.parse(entry[attributes[2]]); // sort
          feedsArr[ind][1] = entry[attributes[1]]; // link
          feedsArr[ind][2] = entry[attributes[2]]; // publishedDate
          feedsArr[ind][3] = entry[attributes[3]]; // contentSnippet
          feedsArr[ind][4] = entry[attributes[0]]; // title
          feedsArr[ind][5] = result.feed.title; // site title
        }
      }

      cnt--;
      if (cnt == 0) {
        feedsArr.sort();
        feedsArr.reverse();
        for (var j = 0; j < feedsArr.length;  j++) {
          var aE = document.createElement("A");
          var h3 = document.createElement("H3");
          var p = document.createElement("P");
          var spanD = document.createElement("SPAN");
          aE.href=aE.title=feedsArr[j][1];
          aE.appendChild(document.createTextNode(feedsArr[j][4]));
          h3.appendChild(aE);
          spanD.appendChild(document.createTextNode(feedsArr[j][2]));
          spanD.appendChild(document.createTextNode(" ("+feedsArr[j][5]+")"));
          p.appendChild(document.createTextNode(feedsArr[j][3]));
          p.appendChild(spanD);
          container.appendChild(h3);
          container.appendChild(p);
        }
      }
    });
  }
  }
  google.setOnLoadCallback(initialize);
  </script>
  </head>
  <body>
    <div id="feed"></div>
  </body>
</html>

Комментарии к коду

Зеленым цветом выделены фрагменты кода из документации к API, которые остались без изменения, красным — то, что я добавил.
В массиве FA хранятся ссылки на Atom- или RSS-каналы. При переборе элементов этого массива, с помощью Google AJAX Feed API загружаются анонсы новостей в формате JSON и тут же отправляются в двумерный массив feedsArr. После обработки последнего элемента массива FA (обнуление переменной cnt) запускается сортировка полностью сформированного массива feedsArr.sort() и изменение порядка следования записей feedsArr.reverse() (чтобы более свежие выводились первыми).
После этого достаточно перебрать массив feedsArr и собрать HTML-код, например такой:


<h3>
  <a href="ссылка на новость" title="ссылка на новость">
    заголовок новости
  </a>
</h3>
<p>краткий анонс
  <span>дата публикации (сайт канала)</span>
</p>

Не забудьте получить API key и вписать его вместо "YOUR_KEY_HERE", перед тем, как использовать это у себя на сайте.

PS: написано буквально "на коленке", скрипт не очень сложный, чтобы разобраться в его работе без подробных комментариев.



Много комментариев (24) к “Google AJAX Feed API and multiple feeds”

  1. Kallisto :

    я наверное танкист…
    но:
    в ИЕ6 вылетела ошибка скрипта.
    в ФФ – ок.

    Потерялась где-то “(”.


  2. Баранов Андрей :

    Уже исправил, пока Вы писали комментарий.


  3. links for 2007-05-05 « past is dead :

    [...] » Google AJAX Feed API and multiple feeds – XHTML.RU (tags: webdev javascript ajax rss google) [...]


  4. Google Ajax Feed APi und Multiple Feeds at ogeeBloggin’ :

    [...] Yepp, darauf habe ich gewartet, das sich ein begnadeter JavaScript Frickler der Sache annimmt und den Code so umschreibt, das man mehrere Feeds in einem Output via Google Feeds API ansehen kann. AJAX Feed API and multiple feeds [...]


  5. Kallisto :

    Кто написал 2 предыдущих поста?


  6. Виталий :

    Спасибо за информацию.


  7. Alex :

    благодарю :)


  8. qwe :

    >> Кто написал 2 предыдущих поста?
    спам обычный, в поле урл. а релевантный коммент – награбленый, для отвода глаз.


  9. el :

    qwe, это не спам.
    Kallisto, эти “trackback”-и из других блогов.


  10. сотик :

    О, прикольно!
    не знал…


  11. интернет бизнес :

    интересно , а нет пхп версии ?
    чтоб не джаваскриптом выбырать новости а пых-пыхом ?


  12. PaulB :

    Как можно (ли) настроить количество выводимых новостей с каждого фида?


  13. Баранов Андрей :

    var numEntr = 5; // по 5 из каждой


  14. PaulB :

    Я использую класс FeedControl (http://code.google.com/apis/ajaxfeeds/documentation/reference.html#FeedControl) и у меня не получается изменить размер выборки с помощью документированного метода – setNumEntries(num). Выборка продолжает публиковаться, как и было по умолчанию, по 4 заметки. Кто-нибудь сталкивался с подобным? Поможете?


  15. btl :

    Интересно, надо будет попробовать.


  16. Илька :

    интересно , а нет пхп версии ?
    чтоб не джаваскриптом выбырать новости а пых-пыхом ?

    Для меня это тоже актуально, напишите пожалуйста!


  17. z00lus :

    полезное инфо.
    спасибо


  18. Светик :

    Вообще, честно говоря, комментарии тут гораздо прикольней самих постов. (Не в обиду автору, конечно :))


  19. z00lus :

    привел пример на php, кому интересно
    хотя додуматься до него много ума не надо, тк все есть в том же гугловом доке.)
    собственно пример


  20. Игорек :

    Даа…, в Москве погода такая , а у Вас еще как-то хватает сил писать… Да еще как! :)


  21. serfine :

    Да, на самом деле в этом что-то есть. А раньше я ведь был довольно наивен :) Ну что ж – времена изменились :)


  22. irina :

    Видела что-то подобное в англоязычном инете, в Рунете про такие вещи как-то не особо часто посты увидишь.


  23. Дим :

    Занятно! Надеюсь продолжение будет не менее интересным…


  24. Ярис :

    За статью сенкс, все по делу, достаточно много кто это уже использует



LiveRSS - каталог русскоязычных RSS-каналов

22 queries 0.196 seconds.