Простой 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, но и в таком виде ничего не мешает использовать его на своем сайте/блоге.
Действующий пример можно увидеть здесь или на этом сайте в правой колонке.
Tweet
Кстати “Случайная статья” справа в “шапке” этого блога сделано тоже с помощью Google Feeds API.
Прикольно!
Не думал, что всё так просто.
Если например не так интересно отображение списка последних постов, то путем замены url feed-а можно отображать например последние статьи с друженственных сайтов, последние закладки в del.icio.us, shared feed-ы из Google Reader или данные с других аналогичных сервисов.
Например мои закладки в del.icio.us : http://del.icio.us/rss/voituk
полезно, спасибо, надо будет поиграться :)
Спасиб, полезная фича!
Спасибо, интересная статья.
Взял себе на заметку.
В целом подход вызывает одобрение, так как я сам считаю что следует минимизировать кол-во серверного кода (по возможности конечно).