Покажу на небольшом примере, каким образом можно с помощью «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://www.seoded.com/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». Но и в таком виде ничего не мешает использовать его на своём сайте/блоге.
Действующий пример можно увидеть здесь или на этом сайте в левой колонке.
Автор: Вадим Войтюк.
Комментарии:
vadim
October 3rd, 2007 at 6:53 pm
Кстати “Случайная статья” справа в “шапке” этого блога сделано тоже с помощью Google Feeds API.
Скакунов Александр
October 4th, 2007 at 10:45 am
Прикольно!
Не думал, что всё так просто.
vadim
October 4th, 2007 at 10:49 am
Если например не так интересно отображение списка последних постов, то путем замены url feed-а можно отображать например последние статьи с друженственных сайтов, последние закладки в del.icio.us, shared feed-ы из Google Reader или данные с других аналогичных сервисов.
Например мои закладки в del.icio.us : http://del.icio.us/rss/voituk
Yuriy
October 4th, 2007 at 12:51 pm
полезно, спасибо, надо будет поиграться :)
liza
October 10th, 2007 at 4:42 am
Спасиб, полезная фича!
Dorian
November 4th, 2008 at 3:26 pm
Спасибо, интересная статья.
Взял себе на заметку.
В целом подход вызывает одобрение, так как я сам считаю что следует минимизировать кол-во серверного кода (по возможности конечно).
Интересное...
Комментариев нет:
Отправить комментарий