Делаем классную ленту изображений с автопрокруткой. Cвоя новостная лента на PHP

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

Wikipedia

На многих сайтах можно увидеть кнопки или , что означает, что на этом сайте доступна лента новостей в формате RSS. Читателям сайта такой сервис удобен, поскольку при помощи Rss-агрегаторов, например, Yandex.Lenta или Kanban.ru можно собрать собственную новостную ленту и читать новости с разных сайтов в одном месте или получать их на свой e-mail при помощи сервиса Rss2Email . Подробнее об RSS читайте, например, в Компьтерре .

В этой статье речь пойдет не об использовании RSS-лент и агрегаторов, а о том, как быстро сделать новостную ленту на сайте при помощи программы RSS.PHP и MySql.

Начальные условия

Итак, у вас есть сайт, на котором есть поддержка PHP и работает база данных MySql (кстати, очень распространенное сочетание). Из базы, в которой хранятся тексты вашего блога или анонсы новостей и будем получать данные для нашей ленты. Лента будет строиться динамически, непосредственно при запросе, так что нужен только соответствующий скрипт. Вы можете написать его сами, но можете взять уже готовый

Немного теории

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

Элемент	Описание
title	Заголовок канала.
link	Ссылка на главную страницу сайта.
description	Описание канала.
language	Язык, на котором написан канал. Например, ru - русский
copyright	Копирайт
managingEditor	Электронная почта редактора канала.
webMaster	Электронная почта веб-мастера.
pubDate	Дата публикации информации в канале.
lastBuildDate	Время последнего изменения канала.
category	Определяет категорию, к которой принадлежит канал.
Item	Собственно содержимое канала. Должен быть хотя бы один элемент.

Item

Элемент	Описание
title	Заголовок
link	Ссылка на полный текст
description	Аннотация
category	Категория
pubDate	Дата публикации статьи. Некоторые агрегаторы не будут отображать статью, если указанная дата еще не настала. Но далеко не все.

Поскольку RSS - это подмножество XML, то мы должны получить в итоге примерно следующее: Если будете что-то менять в скрипте, то проверяйте его на соответствие стандарту на сервисах Feed Validator или RSS Validator
Запуск программы

Программа состоит из следующих файлов: rss.php - файл запуска, rss.inc - включаемый файл с описанием класса, conn.inc - файл с описанием параметров соединения с базой данных.

Для запуска программы измените данные о соединении с БД в файле conn.inс, измените параметры ленты в файле rss.php и спишите в любой удобный каталог на Вашем web сервере, хоть в корневой. Не забудьте проверить структуру данных базы MySql, для программы можно использовать например, такую:

CREATE TABLE BLOG (ID int(11) NOT NULL default "0", title varchar(50) default NULL, description text default NULL, link varchar(200) default NULL, date date default NULL, category varchar(100) NOT NULL default "", ab varchar(10) NOT NULL default "", PRIMARY KEY (ID)) TYPE=MyISAM;

после этого у вас будет лента с адресом

Что дальше?

А теперь не забудьте поставить на видном месте кнопку , и добавить в страницы вашего сайта код между тегами :
, чтобы браузеры понимали, что у вас есть лента. И, конечно же, зарегистрировать ленту в поисковой машине, например, http://blogs.yandex.ru/add.xml и в каталоге http://blogs.yandex.ru/add-catalogue.xml

Бесплатно скачать программу для создания RSS-ленты, Rss.php (3 Кб) можно

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

Пишем html для ленты изображений

Тут классика. Используем список ul и оборачиваем его в div. На этот див мы будем натравливать плагин, так что ему нужен идентификатор. В моем случае это класс.

Важно чтобы изображения были одного размера. Иначе будет смотреться не так эффектно. Поэтому придется напрячься и обработать их.

Готовим JavaScript для карусели изображений

Нужно подключить jQuery. Как это сделать, думаю, все знают. А еще нужно подключить библиотеку jcarousel Lite. Она все и делает.

После загрузки страницы, нужно натравить плагин на нашу ленту изображений и произойдет чудо!

$(function() { $(".mycarousel").jCarouselLite({ auto: 2000, speed: 1000, circular: true, visible: 4 }); });

Это все! Реально. Больше ничего не нужно. Не нужно подключать и настраивать темы. Не нужно делать какие-то контролы и писать дополнительный код. У вас есть стандартный код списка изображений и единственный вызов плагина с параметрами. Это так, как должно быть. Я в восторге, если честно.

О возможных параметрах и их значениях можно прочитать в оригинале на страничке плагина . Ну а я вкратце переведу вам что зачем.

Возможные параметры галереи

btnPrev - идентификатор, определяющий кнопку "Назад". Это нужно если вы делаете управление прокруткой с помощью кнопок.

btnNext - идентификатор для кнопки "Вперед".

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

mouseWheel - true/false значение, определяющее будет ли карусель прокручиваться от скролла мышки. Требует плагин mousewheel.

auto - true/false значение, определяющее будет ли лента крутиться сама.

speed - скорость прокрутки в милисекундах.

easing - эффект прокрутки. Можно сделать эффект подпрыгивания. Требует плагина easing.

vertical - может нужно, чтобы картинки крутились вертикально?

circular - будет ли лента останавливаться по достижении последней картинки или будет крутиться по кругу?

visible - сколько элементов видно

start - с какого элемента начинать

scroll - по сколько элементов прокручивается

beforeStart - callBack функция, вызывающаяся до начала анимации

afterEnd - callBack функция, вызывающаяся в конце анимации

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

1. Facio

Facio представляет собой jQuery -плагин, который отображает последние новости с указанной страницы в Facebook . В виджете также есть кнопка Like . Просто интегрируйте плагин в сайт, укажите адрес страницы и отображайте контент из социальной сети на страницах сайта.

2. Feedify

Feedify – jQuery -плагин для конвертации текста в HTML -ленту новостей, как в Twitter и Facebook .

3. Social Feed

Social Feed представляет собой jQuery -плагин, который отображает ленту новостей конкретного пользователя из его аккаунтов в нескольких социальных сетях.

4. MiniTwitter

MiniTwitter – это jQuery -виджет, с помощью которого можно осуществить ретрансляцию комментариев из Twitter на ваш сайт или блог на основе WordPress .

5. jFlickrFeed Plugin

jFlickrFeed Plugin позволяет легко извлекать контент из Flickr , и отображать его на собственном сайте.

6. zTwitterFeed

Плагин zTwitterFeed считывает твиты определенных пользователей в Twitter . После чего записи трансформируются в структурированный HTML -код со встроенными CSS -классами.

7. zFlickrFeed

Плагин zFlickrFeed умеет извлекать фотографии определенных пользователей Flickr . После чего мы получаем структурированный HTML -код со встроенными CSS -классами.

8. zLastFM

Плагин zLastFM извлекает информацию об избранных песнях, недавно прослушанных композициях, любимых альбомах, артистах и композициях из профилей Last.FM (понадобится API-ключ ). После чего плагин выдает структурированный HTML -код со встроенными CSS -классами.

9. zWeatherFeed

Плагин zWeatherFeed ретранслирует информацию о текущих погодных условиях из сервиса Yahoo! Weather . Можно указывать одно или несколько географических мест, использовать фоновые изображения, отражающие погодные условия, а также дневное и ночное оформление. Также можно показывать информацию о городе и текущей температуре.

10. FeedEk

FeedEk представляет собой jQuery -плагин для парсинга и отображения RSS и Atom -рассылок. Для извлечения данных FeedEk использует Google Feed API . Можно легко получить ленту новостей любого домена без необходимости использовать какие-либо скрипты на стороне сервера.

11. Ballboy.js

ballboy.js – jQuery -плагин, который извлекает пользовательские работы из сервиса Dribbble , и отображает их на сайте.

12. Yunero

Yunero представляет собой новый jQuery -плагин для отображения ленты новостей из канала в Youtube . Также можно указывать ссылку на плейлисты, из которых нужно показывать видео. Кроме того вместе с виджетом можно отобразить форму подписки на канал, что позволит увеличить количество постоянных пользователей.

13. Socialist

Socialist – плагин для отображения новостной ленты из социальных сетей, который комбинирует все каналы в одном месте. Можно показывать единую ленту новостей из Facebook , Twitter , LinkedIn , YouTube , Pinterest , Flickr , Tumblr , Craiglist RSS и других социальных сетей.

14. jQuery Google Feed

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

15. Fancy News

Fancy News представляет собой jQuery -плагин, который позволяет создавать привлекательные новостные ленты. Им очень просто пользоваться, и он предлагает множество настроек внешнего вида. Можно добавлять неограниченное число новостей с миниатюрами. Если публикация окажется больше области отображения, то автоматически добавляется скроллинг. Также есть возможность подгрузить собственную RSS -ленту.

Что объединяет все информационные сайты? Что обязательно присутствует на главной странице? Если вы подумали о новостях, то оказались правы! Сегодня мы с вами разберемся как раз в том, как сделать собственную новостную ленту с админкой и защитой на php. Заранее скажу, что дело это совсем не сложное, но и не двухминутное, так что запаситесь всем, что вам нужно (пивом, колой, соком, чипсами...) и вперед! Для начала продумаем структуру новостной ленты. Безусловно, мы будем использовать mysql, а как же без него! В mysql-базе, которую назовем mynews, будут храниться данные. Какие? Cейчас объясню. Разместим в базе mynews таблицу под названием news. А в таблице - вот что:

News_id - MediumInt длина 9 AutoIncrement, это будет primary key.
Ntext - текст новости, тип Text.
Ntitle - заголовок новости, тип varchar, длина 255
Ndate - это дата, varchar, длина 255
Nuser - а это имя автора новости, varchar, длина 255.

Как все это создать? Почитайте предыдущие тексты на этом сайте, там есть вся необходимая информация. А от себя могу посоветовать отличную, очень удобную программу Mysql-Front, в которой все таблицы создаются визуально. Но идем дальше. Теперь разберемся в том, какие скрипты нужно написать. Я предлагаю написать следующие: admin.php, сreatenews.php (этот скрипт и будет создавать новость), tnews.php (будет отображать новость). Можно было написать скрипт и для удаления новостей, но это вы сможете сделать и сами после выполнения упражнения. Итак, начнем. Для начала напишем скрипт createnews.php. В нем пока будет мало понятного, но все станет на свои места после того, как вы посмотрите на листинг admin.php.

Листинг 1. Createnews.php

"". addslashes ($ ntitle)."" // эта строка нужна для того, чтобы в заголовке правильно отображались кавычки.

Как видите, вместо mysql-даты используется varchar, так проще. Теперь, чтобы все в рассмотренном скрипте встало на свои места, нужно написать админку. Напишем.

Листинг 2. Admin.php

Добавление новостей Добавление новостей Заголовок новости:
Ваше имя:
Текст

Очевидно, используется простая html форма. Так зачем же создавать php-скрипт? Затем, что мы совершенно не подумали о безопасности. Безопасность админки можно обеспечить, запретив доступ случайным пользователям, не знающим логин и пароль. Злоумышленник сможет узнать пароль только тогда (и не раньше), когда получит доступ к скрипту, т.е. к директории. Измените admin.php следующим образом:

Листинг 3. Модифицированный admin.php

Добавление новостей Добавление новостей Заголовок новости:
Ваше имя:
Текст

Давайте разберемся в написанном скрипте. В самом начале двум переменным присваиваются текущие логин и пароль, затем осуществляется проверка введенных. Если введенные данные содержат " (пусто), или не равны тем, что хранятся в переменных, выводится печальная для ][акера надпись "Неверное имя пользователя или пароль". В противном случае выводится "Авторизация прошла успешно" и идет html -код. В самом конце описана форма ввода.

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

Листинг 4. tnews.php:

На что здесь следует обратить внимание? Во-первых, на запрос

$request = "SELECT ntext , ntitle , ndate , nuser FROM news ORDER BY ndate DESC LIMIT 15";

Здесь написано вот что: выводить новости, отсортированные по дате, причем на странице показывать только 15 первых новостей. Функция mysql _ fetch _ array ($ result) возвращает массив, который записывается в переменную $ row . Для тех, кто не знает, что такое & nbsp, говорю: это свободное пространство. Все, что осталось сделать - вставить tnews в некоторую готовую страничку, например вот так:

Include("./tnews.php")

Вот и все, что я хотел рассказать. Если появятся вопросы, задавайте их смело на нашем .