Блог NunDesign

О Google Api пишут давно, но как-то мало наблюдаю, чтобы его использовали. Вместе с тем если покопаться, можно найти много простых, но интересных готовых решений для веб-мастеров; к примеру, посмотрим на варианты Google AJAX Feed API, с помощью которых можно у себя на сайте без каких либо сложностей формировать ленты читаемых блогов друзей в разных форматах, прям Google Reader на своём собственном сайте. Для начала следует получить свой API key, уникальный ключ (бесплатно). Для каждого сайта веб-мастера должен быть свой ключ, т.е. у одного веб-мастера может быть несколько ключей. Так же полезно начать с изучения доступной документации, разобрать предложенные готовые примеры. Я для эксперимента выбрала один пример – FeedControl, который позволяет сформировать ленточку фидов блогов, которые я читаю и подписана (подписка в Оперной RSS читалке, которая называется “Каналы новостей”). Пример моей тестовой ленты можно посмотреть здесь.

Сформировать такую ленту проще простого: нужно в хидер, прежде всего, добавить ссылку на скрипт с указанием полученного вами API ключа:

<script type="text/javascript" src="http://www.google.com/jsapi?key="YOUR-KEY"></script>

Здесь вместо YOUR-KEY вы ставите тот самый полученный код. Дальше, если на странице с документацией (ссылка выше) в что-то недопоняли со скриптом, можете воспользоваться визардом для построения ленты. Будут предложены простой вертикальный, динамический вертикальный и горизонтальный варианты. Я выбрала динамический вертикальный, у которого в первом блоке листается поочерёдно пост с аннотацией из всех указанных далее в скрипте лент, а графический маркер указывает, какой пост из какой ленты сейчас динамически высветился в верхнем блоке. Для того, что бы юзер мог сам указывать нужные ленты, ему отдаётся кусочек JavaScript`a, можно сказать, юзерский такой кусочек, с простеньким кодом, в котором он может плодить ленты, задавать титлы для лент, в простом случае из каждой ленты будут выгребаться четыре ссылки на последние четыре добавленных в блог поста. Для моей тестовой ленты юзерский кусок скрипта выглядит так:

<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'NunDesign',
url: 'http://blog.nundesign.com/feed'
},
{title: 'CompWoman',
url: 'http://feeds.feedburner.com/compwoman'
},
{title: 'SeoBaby',
url: 'http://www.seobaby.net/feed'
},
{title: 'SoftwareManiacs',
url: 'http://softwaremaniacs.org/blog/feed/atom/'
},
{title: 'Developers.Org.UA',
url: 'http://www.developers.org.ua/feed/'
},
{title: 'Blognot',
url: 'http://feeds.feedburner.com/Blognot'
},
{title: 'Bondariev',
url: 'http://bondariev.info/feed/'
},
{title: 'Ace',
url: 'http://feeds.feedburner.com/acekievua'
}];
var options = {
stacked : true,
horizontal : false,
title : "NunDesign`s Feeds Reader"
}new GFdynamicFeedControl(feeds, ‘feed-control’, options);
}
// Load the feeds API and set the onload callback.
google.load(’feeds’, ‘1′);
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>

Здесь в title: указывает заголовок блога, в url: – ссылку на фид блога. В квадратных скобках – вся лента. Если хочется разобраться дотошнее, ознакомьтесь с полным описанием класса google.feeds.FeedControl. Понадобится ещё и для того, чтобы разобраться с html и css представлением ленты – вебмастера конечно же захотят оформить ленту в стиле дизайна своего сайта или блога. Можно написать таблицу стилей для ленты с нуля (в блоке, где показана html разметка для формируемой ленты, вы найдёте все имена классов, которые понадобятся вам для оформления), но проще взять предоставляемый css файл чуть ниже по последней ссылке, и оттюнить его так, как вам хочется. В теле документа должен быть див с идентификатором контрола, в который и будет грузится настроенная лента, в обычном случае вот такой:

<div id="feedControl">Loading</div>

Там же в документации с примерами вы найдёте прикольные вариации для контрола – для поиска, к примеру, лент блогов по заданному в инпуте имени (findfeed), вот, посмотрите пример, как это работает. Ещё один симпатичный пример использует класс google.feeds.lookupFeed, в примере показано, как его можно использовать для реализации слайдшоу фоток из фликровского аккаунта.

Ещё одно симпатичное очень решение нашлось под названием PartnerBar Programming Guide. Технически настройка для своего сайта производится точно так же, как и для фидконтрола. Единственное что, в юзерской части скрипта кроме ссылок на последние 4 поста есть ссылка типа “читать больше”, и, кроме того, можно задавать количество блоков подленточек. Мой пример ПартнёрскогоБара можно посмотреть здесь. Если вы пару раз перезагрузите мою страницу с примером, вы увидите, что блоки грузятся в случайном порядке. В юзерской части JavaScript`a есть такая запись:

var options = {
headerTitle : "NunDesign Partners feed",
numEntries : 4,
randomSelectionCount : 10
}

Здесь numEntries : – количество ссылок на последние посты в блоках (у меня стоит 4), а randomSelectionCount : – количество блоков, которое выводится в <div id="partnerbar" class="partnerbar">Loading..</div>. Если вы вместо 10 зададите 1, то при каждой перезагрузке страницы будет выводиться, в случайном же порядке, лента со ссылками на последние посты одного из партнёров, которых вы укажите в скрипте. Оформление блоков вы тоже можете делать как вам нравится; можно написать свою таблицу стилей, обращаясь к именам идентификаторов и классов, можете использовать готовую таблицу стилей, запомнив себе в проект и отредактировав по вкусу (не забудьте на неё сослаться :)).
В общем, мне бы хотелось обсудить со знатоками тему разных готовых решений от Гугла, кто как отсетапал себе (если использует) те примеры, которые я рассмотрела здесь сегодня, кто какие полезные (другие) решения нашёл и может порекомендовать на посмотреть или даже попользовать мне. Итак, две страницы с лентами, полученными в ходеэксперимента:

• Лента блогов
• Лента блогов, другой код

Tags: Feed, feedcontrol, google, Google AJAX Feed API, google api, google code, google reader, RSS, tools

This entry was posted on Tuesday, March 11th, 2008 at 1:39 pm and is filed under tools, блогосфера. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.