Blogger не для чайников: FeedEk - как разместить на странице содержимое любого фида

FeedEk - один из немногих feed-трансляторов, который умеет отображать не только текстовое содержимое rss/atom ленты, но и и графические элементы. То есть на веб-странице можно получить точные данные с любого фида.
Все это хорошо подходит для отображения новостей с других сайтов, общей ленты комментариев где-нибудь целиком на странице или виджете, ну или что-то, что придумаете сами =).
Одним словом, FeedEk - скрипт-парсер неиндексируемого поисковиками содержимого любого фида.

Вот так выглядит страница с содержимым, полученным из фида моего блога:

Полностью действие скрипта можно оценить на тестовом блоге.

Установка:
1) Библиотека jQuery
2) Внешний хостинг, например, DropBox
3) Скачать скрипт со стилями и прописать в <head></head>↓
Скрипт:

<script type="text/javascript" src="FeedEk.js"></script>

Стили:

<link media="print" rel="stylesheet" href="FeedEk.css" type="text/css" charset="utf-8" />

Где:

#divRss // настройки всего блока с фидом
.ItemTitle // настройки заголовков статей в фиде
.ItemTitle a // настройки заголовков-ссылок на статьи в фиде
.ItemTitle a:hover // настройки при касании машью заголовков-ссылок на статьи в фиде
.ItemContent // настройки содержимого статей в фиде
.ItemDate //настройка отображения даты статей в фиде

Содержимое файла стилей должно быть примерно таким (настраивается по вкусу):

#divRss{ width:650px; padding: 0px 3px 3px 5px; background-color:#FFF; 
border:0px solid #D3CAD7; margin-top:3px; }

.ItemTitle{ font-weight:bold; margin:5px 0px 0px 0px; padding-top:3px; }
.ItemTitle a{ color:#4EBAFF; text-decoration:none }
.ItemTitle a:hover{ text-decoration:underline }
.ItemContent{ padding:1px 3px 3px 3px; border-bottom:1px solid #D3CAD7; color:#3E3E3E; }
.ItemDate{ font-size:11px; color:#AAA; }

4) Скрипт настроек (тоже в head или на прямо на страницу, либо в виджет)

<script type="text/javascript">
$(document).ready(function(){
   $('#divRss').FeedEk({
   FeedUrl : 'http://feeds.feedburner.com/omg-linux/blogger?format=xml',
   MaxCount : 5,
   ShowDesc : true,
   ShowPubDate: true
  });
  
});
</script>

Где:

$('#divRss') //id для элемента div (смотри ниже)
FeedUrl // ссылка на rss или atom ленту; в данном случае использовался xml вывод с FeedBurner
MaxCount // выводимое количество постов
ShowDesc // показывать содержимое поста - да/true, нет/false
ShowPubDate // показывать дату публикации

5) Html-код, через который будет подключаться скрипт и выводить содержимое фида на странице:

<div id="divRss"></div>

FeedEk.

FeedEk - как разместить на странице содержимое любого фида

2 комментария: