Простой widget для блога с помощью Google Feed API

Рубрика: Development, Google, JavaScript/Ajax | 3 October 2007, 18:19 | Vadim Voituk

Покажу на небольшом примере каким образом можно с помощью Google Feed API быстро написать widget “Последние статьи” к своему сайту/блогу.

RSS или Atom по сути является XML-форматом достаточно простой структуры, потому разбор такого документа средствами встроенного в баузер JavaScript ничего сложного из себя не представляет.
Сложнее приходится с загрузкой RSS feed-а ввиду того, что загружать данные посредством Ajax можно только с того домена, с которого был загружен сам JavaScript скрипт.
Вот тут на помощь приходит Google Feed API -с его помощью из JavaScript на странице можно получить доступ к любому RSS-потоку, проиндексированному Google Feedfetcher (эдакий Google Bot только для RSS), а ввиду повального использования Google Reader – можно смело утверждать что таким образом доступен любой RSS-фид.

Для того, чтоб использовать Google Feed API на своем сайте необходимо получить API KEY.
После получения API KEY дописываем в <head> блок нашей страницы такой код:
[html]

<script src="lastpost.js" type="text/javascript"></script>
      <script type="text/javascript">
      google.load("feeds", "1")
      google.setOnLoadCallback(function() {
        showLastPostWidget('lastpost_id', "http://voituk.kiev.ua/feed/", 10)
      });
</script>

[/html]
В том месте, где нужно вывести последние статьи с блога дописываем:
[html]

<div id="lastpost_id">Loading...</div>

[/html]
Осталось разобраться что же делает функия lastpost.js и функция showLastPostWidget:
[js]

function showLastPostWidget(id, url, count) {
       var feed = new google.feeds.Feed(url)
       feed.setNumEntries(count)
       feed.includeHistoricalEntries()
       feed.load(function(res) {
         if (res.error) return;
         var container = document.getElementById(id);
         container.innerHTML = '';
         if (!container) return;
         for (var i = 0; i <res.feed.entries.length; i++) {
           var entry = res.feed.entries[i]
           var a = document.createElement("a")
           a.href=entry.link
           a.appendChild(document.createTextNode(entry.title))
           var div = document.createElement("div")
           div.appendChild(a)
           container.appendChild(div)
        }
      })
     }

[/js]
Как видно из кода она загружает последние count feed-ов из указанного url, и добавляет их внутрь контейнера, id которого указывается первым параметром.

Все просто, понятно – и ни строчки серверного кода.

Стоит только добавить что внешний вид блока последних заметок легко регулируется стилями.
Например:
[css]#lastpost_id div {
margin: 1px;
background-color: #EBEBEB;
}[/css]

Этот widget приведен скорее как демострация возможностей Google FEED API, но и в таком виде ничего не мешает использовать его на своем сайте/блоге.

Действующий пример можно увидеть здесь или на этом сайте в правой колонке.

Комментариев: 6

6 Responses to “Простой widget для блога с помощью Google Feed API”

Комментарии:

  1. vadim

    Кстати “Случайная статья” справа в “шапке” этого блога сделано тоже с помощью Google Feeds API.

  2. Скакунов Александр

    Прикольно!
    Не думал, что всё так просто.

  3. vadim

    Если например не так интересно отображение списка последних постов, то путем замены url feed-а можно отображать например последние статьи с друженственных сайтов, последние закладки в del.icio.us, shared feed-ы из Google Reader или данные с других аналогичных сервисов.
    Например мои закладки в del.icio.us : http://del.icio.us/rss/voituk

  4. Yuriy

    полезно, спасибо, надо будет поиграться :)

  5. liza

    Спасиб, полезная фича!

  6. Dorian

    Спасибо, интересная статья.

    Взял себе на заметку.

    В целом подход вызывает одобрение, так как я сам считаю что следует минимизировать кол-во серверного кода (по возможности конечно).

Leave a Reply