Давайте изучим быстрый и эффективный способ внедрения RSS (Really Simple Syndication) кода для публикации новостей на любой сайт. Для начала, давайте узнаем, что же такое RSS, и как это работает.
RSS представляет собой готовое решение, позволяющее в автоматическом режиме получать обновления веб-контента. Давайте предположим, что вы добавили RSS-код для международных новостей из популярного источника на ваш сайт. Например, CNN, Reuters или BBC. У посетителей будет доступ к ссылкам на новый контент каждый раз, когда источник будет обновлять свою новостную ленту. Другими словами, вы получите преимущество отображения самых последних новостей абсолютно без усилий.
В результате, скорее всего, неправильного понимания самой технологии, возникает мнение, что RSS достаточно сложно адаптировать под конкретную платформу, и для этого требуются безграничные знания в области разработки.
Обычная RSS-рассылка (конкретно эта представлена источником BBC) выглядит так:
http://feeds.bbci.co.uk/news/world/rss.xmlКогда XML-документ обновляется источником (BBC), новая информация автоматически отображается на любом веб-сайте, в который был встроен RSS-адрес.
Вы можете найти RSS-рассылки почти на всех новостных сайтах, вам нужно лишь отыскать маленькую оранжевую иконку с точечкой и двумя волнами. Самые свежие данные из абсолютно различных сфер – от международных новостей до финансовой статистики и докладах об инновационной активности – все это доступно посредством RSS-рассылок.
Итак, теперь мы гораздо лучше понимаем предназначение RSS и то, каким образом эта технология работает. Теперь давайте научимся встраивать эту технологию в веб-сайты для того, чтобы получить выгоду.
API Google Feed
Google разработала весьма удобный способ отображения данных из RSS-рассылки, и реализуется это посредством специального API Feed. Используя данную разработку, вы сможете отображать любую новостную рассылку. И для этого вам понадобится внедрить всего пару строк кода javascript в страницу.
Для того чтобы начать использование API Feed, вставьте следующий скрипт в шапку страницы, под мета-тэгами и перед закрытием тэга head:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
#feedControl {
margin-top : 10px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 12px;
color: #9CADD0;
}
</style>
<script type="text/javascript">
function load() {
var feed ="http://feeds.bbci.co.uk/news/world/rss.xml";
new GFdynamicFeedControl(feed, "feedControl");
}
google.load("feeds", "1");
google.setonloadCallback(load);
</script>Затем, вставьте следующий код в желаемую область веб-страницы:
<div id="body">
<div id="feedControl">Loading...</div>
</div>После загрузки веб-страницы в интернет, у вас появится следующее добавление:
Ширина вертикального динамического 4-строчного блока по умолчанию равна 440 пикселей, но его можно отобразить в любых размерах на странице, либо в HTML-таблице, в которой он будет заключен.
Указатель новостной ленты постоянно переключается между пунктами новостей, отображая ссылку на источник и краткое содержание каждой записи.
Оформление ленты
Вы можете собственноручно изменить переменные в следующем выражении:
#feedControl {
margin-top : 10px;
margin-left: auto;
margin-right: auto;
width : 440px;Как было указано, у вас есть возможность изменять ширину блока. Также можно отобразить поля. Если вы, к примеру, хотите создать больше пространства сверху блока с лентой, то можно выражение margin-top выставить на 20 или более пикселей.
Изменяем источники новостей
Также ленту новостей очень просто перестроить на другой источник.
Допустим, что вы устали от новостей BBC, и вместо этого источника хотите отображать новости CNN. Тогда нужно внести следующее изменение в определенную строку кода:
var feed =”http://feeds.bbci.co.uk/news/world/rss.xml“;Чтобы отобразить RSS-ленту с CNN, нужно использовать следующий код:
var feed =”http://rss.cnn.com/rss/edition_world.rss“;Если же вы захотите отображать новости с нашего сайта, то строка будет следующей:
var feed =”http://www.coolwebmasters.com/rss.xml“;Завершение
Как показано в нашем сегодняшнем кратком руководстве, вы можете быстро и просто встроить новостную ленту в собственный сайт. Вышеприведенный код может быть вставлен в любую страницу.
Как только вы научитесь интегрировать API Feed в ваш сайт, ознакомьтесь с другими доступными опциями здесь: https://developers.google.com/feed/.
