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

Как сделать ленту новостей на сайте html

  • автор:

Как добавить 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-ленту этих сайтов. Для того чтобы не отставать от моды, проведём ещё одну модернизацию нашего сайта и добавим в него всего одну строчку кода:

Добавление новостей в HTML [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.

Закрыт 6 лет назад .

Создаю сайт на чистом HTML (css), не подскажете пожалуйста, как автоматизировать добавление новостей на сайт, не используя различных движков?

Grundy's user avatar

Можно в Microsoft Office составлять страницы и сохранять их в формате HTML и делать это мир лучше.

voroninman's user avatar

Существует классная технология асинхронного программирования ajax) Есть хороший фреймворк jQuery) Ну так вот можно создать html файл «news.html», где размещать новости в контейнерах с классом «new». В вашей, например, главной странице сайта в теге head подключаете jQuеry и будущий скрипт новостей, где будет размещена функция вывода новостей на страницу:

где ‘#newslist’ — идентификатор блока, в который будут выводиться все новостные блоки с классом ‘.new’ из документа ‘/news.html’.

И вызов функции:

Действует эта схема так: загружается ваш документ, когда парсер браузера закончит с DОМ, то заработает наш скрипт. Сначала он закачает в ваш браузер страницу новостей в фоновом режиме, затем найдёт в нём новостные блоки и вставит их в блок вывода новостей колонкой.

A Simple Way to Add Free News Content to Your Website

A challenge that many website owners face is how to supply continuously fresh content for new and repeat visitors to peruse.

It can be a very time-consuming task to manually upload regular updates. Fortunately, there is an easy way to showcase free, readily available news content on a wide variety of topics.

We will examine a quick and effective method of incorporating RSS (Really Simple Syndication) coding in order to add news content to any site. First, let’s look at what RSS is, and how it works.

RSS is an online coding solution that delivers automatic updates for Web content. Say, for instance, you add an RSS code for international news to your website from a popular source, such as CNN, Reuters, or the BBC. Visitors would be able to access new content links as often as the source updated their news feed. In other words, you get the benefit of presenting the very latest desired information online, with no effort on your part.

Due perhaps to a misguided perception that it is difficult to add the necessary coding to make RSS work within a website’s framework, it remains an extremely underutilized resource.

A typical RSS newsfeed (this one from the BBC) looks like:

When the XML document is updated by the BBC, the new information is automatically displayed on any website that has incorporated the above URL to obtain World News.

You can find RSS feeds all over the Web; just look for the small orange icon with a dot and two waves above it. The very latest data is available on diverse subjects ranging from international news, to financial updates, to reports on innovations in the food and drink industry, to the latest updates on plants and gardening.

So, now that we have a better understanding about RSS and what it can do, let’s move on to finding out how to incorporate the correct coding into a website in order to gain the noted benefits.

Google Feed API

Google has developed an exceedingly convenient method to display RSS feed data, via their Feed API feature. Using this technique, you can showcase any newsfeed by incorporating some simple Javascript lines into a web page.

To begin utilizing the Feed API, insert the following script into the Head section of your web page, beneath the meta tag area and just in front of the closing Head tag:

Then, insert the following code into the desired area of the web page:

After uploading the web page to the Internet, you should see the following addition:

The width of the four-stack vertical dynamic newsfeed is set at 440px by default, but it can be adjusted based on the size constraints of the given area within the page, or the HTML table, in which it is placed.

The newsfeed pointer rotates continuously between the news items, displaying a link and short summary for each.

Feed Customization

You can manually change the coding variables in the following expression:

As noted, you can raise or lower the set width of the display. The margins can also be adjusted. If, for example, you want to create more space at the top of the newfeed box, the ‘margin-top’ expression can be upped to 20px, or higher.

Changing News Sources

The newsfeed can also be updated to accommodate a new source very easily.

Say that you got tired of the BBC feeds, and instead wanted to incorporate news from CNN. The required adjustment would be made to the following line:

The CNN RSS code would be substituted so that the line looked like:

A similar adjustment to display an international newsfeed from Reuters would entail the following change:

Conclusion

As this brief tutorial demonstrates, it is both quick and easy to incorporate a newsfeed into your site. The above coding can be inserted into the home page, or any interior page.

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

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

Давайте изучим быстрый и эффективный способ внедрения 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/ .

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

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

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