Как вставить rss ленту на сайт html
Перейти к содержимому

Как вставить rss ленту на сайт html

  • автор:

Простой способ добавления бесплатного новостного контента на свой сайт

Все владельцы веб-сайтов сталкиваются с проблемой необходимости регулярного пополнения своего веб-сайта свежим контентом. Если загружать весь этот контент вручную, это может отнимать значительные объемы времени. К счастью, существуют методы отображения новостей из абсолютно различных областей постоянно и абсолютно бесплатно.

Давайте изучим быстрый и эффективный способ внедрения RSS (Really Simple Syndication) кода для публикации новостей на любой сайт. Для начала, давайте узнаем, что же такое RSS, и как это работает.

Простой способ добавления бесплатного новостного контента на свой сайт

RSS представляет собой готовое решение, позволяющее в автоматическом режиме получать обновления веб-контента. Давайте предположим, что вы добавили RSS-код для международных новостей из популярного источника на ваш сайт. Например, CNN, Reuters или BBC. У посетителей будет доступ к ссылкам на новый контент каждый раз, когда источник будет обновлять свою новостную ленту. Другими словами, вы получите преимущество отображения самых последних новостей абсолютно без усилий.

В результате, скорее всего, неправильного понимания самой технологии, возникает мнение, что RSS достаточно сложно адаптировать под конкретную платформу, и для этого требуются безграничные знания в области разработки.

Обычная RSS-рассылка (конкретно эта представлена источником BBC) выглядит так:

Когда XML-документ обновляется источником (BBC), новая информация автоматически отображается на любом веб-сайте, в который был встроен RSS-адрес.

Вы можете найти RSS-рассылки почти на всех новостных сайтах, вам нужно лишь отыскать маленькую оранжевую иконку с точечкой и двумя волнами. Самые свежие данные из абсолютно различных сфер – от международных новостей до финансовой статистики и докладах об инновационной активности – все это доступно посредством RSS-рассылок.

Итак, теперь мы гораздо лучше понимаем предназначение RSS и то, каким образом эта технология работает. Теперь давайте научимся встраивать эту технологию в веб-сайты для того, чтобы получить выгоду.

API Google Feed

Google разработала весьма удобный способ отображения данных из RSS-рассылки, и реализуется это посредством специального API Feed. Используя данную разработку, вы сможете отображать любую новостную рассылку. И для этого вам понадобится внедрить всего пару строк кода javascript в страницу.

Для того чтобы начать использование API Feed, вставьте следующий скрипт в шапку страницы, под мета-тэгами и перед закрытием тэга head:

Затем, вставьте следующий код в желаемую область веб-страницы:

После загрузки веб-страницы в интернет, у вас появится следующее добавление:

Простой способ добавления бесплатного новостного контента на свой сайт

Ширина вертикального динамического 4-строчного блока по умолчанию равна 440 пикселей, но его можно отобразить в любых размерах на странице, либо в HTML-таблице, в которой он будет заключен.

Указатель новостной ленты постоянно переключается между пунктами новостей, отображая ссылку на источник и краткое содержание каждой записи.

Оформление ленты

Вы можете собственноручно изменить переменные в следующем выражении:

Как было указано, у вас есть возможность изменять ширину блока. Также можно отобразить поля. Если вы, к примеру, хотите создать больше пространства сверху блока с лентой, то можно выражение margin-top выставить на 20 или более пикселей.

Изменяем источники новостей

Также ленту новостей очень просто перестроить на другой источник.

Допустим, что вы устали от новостей BBC, и вместо этого источника хотите отображать новости CNN. Тогда нужно внести следующее изменение в определенную строку кода:

Чтобы отобразить RSS-ленту с CNN, нужно использовать следующий код:

Если же вы захотите отображать новости с нашего сайта, то строка будет следующей:

Как показано в нашем сегодняшнем кратком руководстве, вы можете быстро и просто встроить новостную ленту в собственный сайт. Вышеприведенный код может быть вставлен в любую страницу.

Как только вы научитесь интегрировать API Feed в ваш сайт, ознакомьтесь с другими доступными опциями здесь: https://developers.google.com/feed/ .

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Как подключить к сайту RSS-ленту #2295

Вы можете вывести на своем сайте ленту статей со стороннего новостного ресурса.

Такую ленту можно вывести как на отдельной странице, так и в дополнительных блоках страниц.

Для этого Вам необходимо будет получить адрес RSS-канала нужной Вам ленты новостей и следовать инструкции.

Шаг 1

Для начала скопируйте адрес нужного Вам RSS-канала (например, http://megagroup.ru/news?rss=1 или http://news.yandex.ru/index.rss — или rss любой иной нужной Вам новостной ленты).

Затем перейдите на сайт https://www.rssdog.com/ и вставьте в поле «URL RSS канала» скопированный адрес.

42621041_7407_5d7602cb84079.png

Шаг 2

При необходимости Вы можете задать дополнительные настройки. Мы перечислим основные из доступных:

  • Find and display only items containing keyword — тут Вы можете перечислить ключевые слова, по которым публикации должны попадать в ленту.
  • Max items — максимальное количество публикаций в ленте (0 — выводятся все).
  • Descriptions — выберите «Show», если хотите, чтобы в ленте выводились описания статей. Выберите «Hide», если хотите, чтобы выводились только заголовки без описаний.
  • Limit description to — укажите количество символов, выводимых в описании к статье в ленте (0 — описание выводится целиком).
  • Table width — задайте ширину блока с лентой.
  • Show Publish Date — отметьте галочку, если хотите, чтобы в ленте выводились даты публикации статей.

42621041_7409_5d7604c222ea3.png

Прочие параметры задайте на свое усмотрение или оставьте значения по умолчанию.

Обратите внимание!

  • В блоке «Colors» Вы можете задать цвета для таблицы rss-ленты (границ, фонов и текста).

42621041_7410_5d7605649000d.png

Шаг 3

После того как Вы введете адрес канала и зададите настройки, нажмите кнопку «Make The Code».

42621041_7411_5d7605a1233af.png

Шаг 4

В блоке «Using it» (отобразится под настройками) скопируйте значение из поля с HTML-кодом.

42621041_7412_5d7605ec0ad62.png

Шаг 5

Далее перейдите в систему управления.

Если новости нужно отображать на отдельной странице — перейдите к редактированию страницы, нажав на название странице в списке и выбрав в раскрывшемся меню пункт «Редактировать содержимое» (рекомендуем в этих целях использовать текстовые страницы).

phpjhlm0n

Шаг 6

Затем перейдите к редактированию текста страницы на вкладке «Содержимое».

phpQ7A1Ew

Обратите внимание!

  • Если Вы планируете разместить ленту в общих блоках страницы (т.е. лента в этом случае будет отображаться на всех страницах сайта) — перейдите к вкладке «Общие блоки», выберите нужный блок и перейдите к редактированию его содержимого.

php3Ebhh8

Шаг 7

И в рабочей области открывшегося текстового редактора нажмите на кнопку редактирования HTML-кода.

php3Wx971

Шаг 8

Теперь вставьте скопированный ранее код в HTML-код страницы и сохраните изменения.

42621041_7413_5d76064f6e465.png

Мы занимаемся разработкой веб-сайтов для России и зарубежных рынков с 1997 года. Наша команда – более пятисот сотрудников в разных странах и городах.

Понимание потребностей онлайн-бизнеса, опыт взаимодействия с тысячами клиентов, высокая квалификация персонала, собственные «ноу-хау» и хороший объём заказов позволяют веб-студии Мегагрупп.ру предлагать услуги высокого качества по удивительно низким и «вкусным» ценам.

Как добавить RSS ленту на сайт

Имеющаяся на сайте RSS-лента даёт возможность оперативно транслировать новости и обновления читателям. Формат этот несколько устаревший, но аудитория пользователей всё ещё большая. Возможность организации RSS-лент заложена во многие популярные движки, такие как WordPress, Joomla, Drupal и многие другие. Где-то эта возможность является штатной, а где-то реализуется с помощью плагинов. Рассматривать процесс установки плагинов не имеет особого смысла, поэтому мы попробуем разобраться, как организовать RSS-ленту своими силами, не используя плагины.

RSS-лента для статического сайта на html

Для начала мы рассмотрим ручной способ, позволяющий реализовать трансляцию новостей на любом сайте, даже на статичном, построенном на голых html-страницах. Данный функционал будем создавать с помощью простого кода, который размещается в файле rss.xml в корне сайта:

При необходимости, в данном коде можно указать язык ленты, что необходимо при её регистрации в некоторых каталогах RSS-лент, а также добавить дополнительные элементы.

Представленный код обновляется в ручном режиме. То есть, для внесения изменений необходимо открыть файл rss.xml и вписать в него новые данные. Нужно несколько новостей? Тогда редактируемый файл с лентой должен содержать в себе несколько конструкций следующего вида:

Каждая такая конструкция – это отдельная новость, которая располагается между тегами item. По мере добавления новостей, старые записи можно удалять. Количество записей может быть любым, но прописывать больше 10 последних новостей не стоит – вряд ли кому-то понадобятся устаревшие записи.

Автоматизируем создание RSS-ленты

Предположим, что наш сайт создан на самописной CMS, либо на CMS, у которой RSS-лента отсутствует. В этом случае необходимо разобраться в структуре базы MySql, используемой для хранения данных, и выяснить, как производится хранение данных о заголовках страниц, их адресах и содержимом страниц с новостями. Разобравшись со структурой базы, необходимо несколько модернизировать файл с RSS-лентой. Для начала, дадим ему другое расширение, чтобы в нём мог исполняться php-код, необходимый для работы с базой MySql. В противном случае наша RSS-лента не заработает. Необходимо переработать и внутреннее содержимое файла:

  • Реализуем подключение к базе данных;
  • Делаем выборку нужных данных, установив ограничение на 10 последних записей;
  • Выводим в цикле содержимое полученных переменных;

С первым пунктом всё понятно – нам нужно выполнить подключение к базе данных для забора оттуда информации. Второй пункт тоже понятен – нам нужно получить 10 дат, 10 id ссылок на страницы с новостями, 10 заголовков новостей и 10 тел новостей. В третьем тексте мы последовательно выводим всё то, что мы публиковали между тегами item в ручном формате нашей RSS-ленты. Таким образом, разобравшись в структуре базы данных, мы можем организовать RSS-ленту для любого ресурса. Такой подход хорош тем, что мы не касаемся исходного кода CMS и не создаём дополнительных нагрузок на хостинг – этим грешат некоторые плагины, нагружающие сайты километрами ненужного кода. Кроме того, наша методика позволит избавиться от возможных ошибок в функциональности действующего сайта на этапе внедрения RSS-ленты. Максимум, что может произойти, так это получение не тех данных, что нужны для формирования ленты на нашем сайте.

Теперь рассмотрим сам код:

Первые строки данного кода схожи с вышеописанным ручным кодом и содержат в себе общую информацию о нашей новостной ленте – это название, описание и полный адрес ленты. Даты последнего обновления ленты нет, но её можно реализовать, модернизировав исходный код. Далее производится выборка необходимых данных из MySql-базы и запускается цикл формирования RSS-ленты.

С датой новости, её текстом и заголовком всё понятно – они выводятся из переменных $title , $text и $date . Что касается ссылки на полную новость, то здесь берётся её id, после чего мы можем сформировать полную ссылку, опираясь на структуру формирования ссылок на нашем сайте. Например, ссылки могут иметь вид http://site.ru/news.php?id=48 . Здесь мы описываем лишь общий принцип формирования ссылок, поэтому при практической реализации в вышеуказанный код необходимо внести соответствующие изменения.

Как только формирование файла rss.php будет готово, мы можем заливать его на хостинг и приступать к тестированию.

Полезные советы
Заходя на некоторые сайты, мы можем видеть в адресной строке браузера прямую ссылку на RSS-ленту этих сайтов. Для того чтобы не отставать от моды, проведём ещё одну модернизацию нашего сайта и добавим в него всего одну строчку кода:

Как установить RSS фид новостей себе на сайт

RSS каналы в настоящее время используются повсеместно, на них подписываются, их используют в качестве обмена новостями между сайтами, а также их парсят различные роботы, например, ЯППБ (поиск по блогам Яндекса).

Каждый уважающий себя сайт, который имеет регулярно обновляемый контент (это могут быть новости, статьи, фотографии, дневники и т.д.), просто обязан иметь RSS фиды, так как люди, заинтересованные в свежей информации на сайте, первым делом ищут, как подписаться на эти самые обновления. К тому же, имея RSS на своем сайте, можно регистрировать его в различных, специально предназначенных для этого, каталогах и, таким образом, получать обратные ссылки и главное — траффик!

То, что рсс потоки важны, мы выяснили, теперь разберемся, как установить на свой сайт (например, прикрепить к новостям) этот самый RSS, если сам движок сайта не делает этого автоматически.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *