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

Как сделать ленту новостей и добавить на свою страницу?

Дали задание в универе, сделать простенький сайт с актуальной лентой новостей, как сделать ленту новостей на странице HTML, которая обновляется и желательно с соответствующей картинкой. По типу новостей на всяких сайтах ну вот например как здесь(https://hi-news.ru, https://xakep.ru).

upd: новости с других сайтов, ну пример я привел вот можно как нибудь получить новости с этого сайта https://hi-news.ru например и вывести на своей странице?

• Вопрос задан более трёх лет назад
• 442 просмотра

Комментировать
Решения вопроса 0
Ответы на вопрос 2

PHP + Python + JavaScript + ObjectiveC

Я так понимаю, что вы учитесь программированию? Если так, то ставьте конкретные задачи перед собой и все фразы будет проще. Даже гугл начнет относиться с уважением к вашим запросам и выдавать готовые решения.
Откуда собираетесь брать данные для статей? Со стороннего сайта?

Настраиваем NewsGrabber JC, HTML ленту новостей

Автор: Роман Чернышов Опубликовано: 18 марта 2011

Продолжение статьи по настройке NewsGrabber JC. Дополнение.
Первую основную часть вы можете прочитать тут: Интрукция по настройке NewsGrabber JC для Joomla

В качестве примера возьмем HTML ленту новостей с этого сайта — www.example.ru/poetry/34
При настройке ленты новостей для парсинга в режиме HTML мы проделываем все те же шаги, что и при настройке ленты RSS за исключением последнего десятого шага настройки, а именно настройка вкладки Обработчик.

И так во вкладке Обработчик необходимо выбрать режим работы парсера, т.е. как он будет обрабатывать ленту, как RSS поток или как HTML страницу. Для этого нужно выбрать вкладку HTML, Рис ниже:

1. Выбираем вкладку HTML и сохраняемся
2. Прописываем маску отображения ссылок которые нужно искать на странице с анонсами новостей, т.е. на странице http://www.example.ru/poetry/34 имеются новости с линками http://www.example.ru/poetry/163605, но в в коде страницы они прописаны относительно /poetry/163605, и нам необходимо научить парсер собирать такие ссылки и переходить по ним, чтобы в дальнейшем спарсить полную новость. И так, задаем маску такого линка — \/poetry\/\d+ в данном примере мы экранируем все слеши обратным слешем, так же экранируем спец. Символ: d+ , который обозначает что в ссылке могут стоять любые 6 цифр, и ничего кроме цифр и строго 6.. это делается для того, чтобы парсер не собирал вот такие линки http://www.example.ru/poetry/34/p2 или http://www.example.ru/poetry/34 ведущие не на полную новость а на другие страницы с анонсами.
3. Можно не задовать поля 2 и 4, а задать только поле 3, в случае если все ссылки на полную новость имеют одинаковый вид, например кнопка «далее», просто указываем парсеру, что он должен переходить только по ссылкам анкор которых – «далее», для этого в поле 3 пишем этот анкор и все.
4. Собственно префикс ссылки, дело в том как я и написал в пункте 2, ссылки имеют относительный вид /poetry/163605, и чтобы парсер знал полный урл ссылки мы указываем ему адрес сайта http://www.example.ru
5. Брать в качестве заголовка название ссылки или же нет, в случае если все ссылки по котором парсер попадает на страницу с полной новостью называются «далее» такой вариант некатит
6. В ином случае нам нужно указать шаблон заголовка новости, в коде страницы с полной новостью донара мы видим, что заголовок прописан в тегах соответственно шаблон будет выглядеть ]*>.+?

Далее все по схеме с RSS лентами, задаем конечную, начальную точку, сохраняемся, тестируем.

Статья представлена в рамках ознакомления с работой парсера.

CMS, HTML newsgrabber, граббер, парсер, парсер html

Похожие записи

• Интрукция по настройке NewsGrabber JC для Joomla(19)
• Граббер RSS(4)
• Парсер для сайта на движке Bitrix(с модулем iBlock)(0)
• Автоматизация процессов с помощью PantomJS(0)
• Парсинг сайтов любой сложности (обучаемый парсер-бот)(0)
• Парсинг данных (форумы, каталоги, сайты)(0)
• Консультации по парсингу сайтов(0)

Примеры Social Feed

Посмотрите, как работает Social Feed на реальных примерах. Оцените его возможности для своего сайта, какими бы ни были задачи.

Example 1. Masonry

Отличный пример виджета, в котором посты разного размера представлены в виде удобной и лаконичной сетки Masonry (Каменная кладка). Ненавязчивый синий акцентный цвет привлекает внимание пользователей к хэштэгам.

Example 2. Masonry Dark

Если вы хотите создать действительно стильный фид, используйте темную цветовую схему вместе с сеткой Masonry.

Example 3. Timeline

Нужно создать ленту новостей? Используйте раскладку List (Список) и посетители вебсайта не пропустят ни одного важного поста!

Example 4. Grid

Как привлечь внимание к вашим фото или видео из соцсетей? Теперь с помощью раскладки Grid (сетка) вы легко сможете создать фид, в котором будут собраны все мультимедиа.

Example 5. Masonry Colored

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

Перейти к созданию виджета
Быстро. Легко. Ни строчки кода.

Example 6. Carousel

Больше интерактивности для привлечения большего числа пользователей на ваш сайт. Используйте раскладку Carousel (Слайдер-карусель) и пусть посетители будут увлечены пролистыванием ленты.

Example 7. Slider

Раскладка Слайдер — отличный способ не просто создать новостную ленту, а сфокусировать абсолютно всё внимание пользователей на каждом из ваших постов — время насладится деталями!

Example 8. Small widget

Даже если вам кажется, что места для новостного фида совершенно не хватает на странице, это не так. Наш виджет автоматически оптимизирует свои размеры под заданные параметры и теперь даже пользователи сайта смогут увидеть ваши посты из соцсетей.

Example 9. Full Width Carousel

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

Example 10. Instagram Carousel

Showcase your Instagram posts as a full-size carousel, removing unnecessary details. Post text can be seen on hover.

Example 11. Instagram Feed

Продемонстрируйте свои посты в Instagram в виде полноразмерной карусели, не делая акцент на лишние детали. Текст поста можно увидеть при наведении курсора на картинку.

Example 12. Facebook Feed

Создавайте вариации из разных типов постов Facebook с помощью раскладки Masonry (каменная кладка).

Example 13. Facebook Carousel

Место на странице ограничено, но вы все равно хотите продемонстрировать свои посты из Facebook в свежей формате? Попробуйте раскладку Carousel — она сделает ваш сайт более интерактивным.

Example 14. Twitter Feed

Возможно, один из лучших способов разместить твиты на странице вашего веб-сайта — это Masonry Grid (Каменная кладка). Создайте стену твитов, от которой трудно отвлечься.

Как создать Новостную ленту?

Имхо — вопрос слишком общий, надо более конкретно Вам объяснить, что именно хотите сделать. В зависимости от этого выбор может быть очень разным. Начиная от простейших блогов типа wordpress или textpattern, и заканчивая сложными системами типа eZ Publish. А вообще, грубо говоря, новостная лента является обязательной составляющей фактически любого движка.

С уважением, Евгений.
На сайте с 05.09.2008
10 сентября 2008, 15:54

Ну например на сайте я запостил новость и туда можно добавлять коммент. Мне посоветовали Cutenews но как его установить? Прошу написать подробный FAQ куда какие файлы загружать, на каких прописывать сhemode 777 и тп

На сайте с 22.08.2007
10 сентября 2008, 15:57

Larsen:
Ну например на сайте я запостил новость и туда можно добавлять коммент. Мне посоветовали Cutenews но как его установить? Прошу написать подробный FAQ куда какие файлы загружать, на каких прописывать сhemode 777 и тп