Решаем проблемы с добавлением RSS ленты в Google Chrome

29 декабря 2014 Антон Кулешов 902 0

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

Реклама

Перед тем, как описать свое решение, хотелось бы не забыть про один косячный браузер, который подпортил мне всё настроение. Казалось, если проблема касается браузера, то сразу весь негатив можно валить на Internet Explorer. Ну уж нет, он как раз тут и ни при чём, а виновник моего негодования Google Chrome. Возможно, кому - то покажется это надуманным, но я ранее не был особым любителем RSS лент и пользоваться ими начал совсем недавно, в целях экономии времени.

Проблема возникла в том, что когда Chrome получает RSS - XML, то он его ни как не преобразовывает, в отличие от других браузеров, а вываливает как обычный текст. Конечно, это легко решается, если дослать заголовок content-type со значением text/xml. Да, в этом случае мы получим XML в окне браузера, но я думаю, зашедший читатель на сайт не всегда знаком с XML – разметкой, и поэтому увиденное его может привести в замешательство. И это совсем ни куда не годиться. В данной статье я опишу вариант как сделать так, чтобы и Chrome адекватно отображал ленту.

Сразу скажу, что это - совсем не сложный скрипт, поэтому, если вы не новичок в PHP и работали с данными в XML - формате, то и сами легко сможете написать подобный код, не обращаясь за помощью в данную статью.

Начнем, пожалуй, с подключения к базе данных и получения из неё необходимых данных (дамб базы и скрипт RSS ленты находятся в архиве).

// Подключаемся к БД
$db = new mysqli("localhost", "root", "", "db");
$db->set_charset("utf8");
if($db->connect_error){
	echo "<div style='color: red;'>ERROR БД</div>";
	exit;
}

// Вытягиваем нужные данные из БД
$result = $db->query("SELECT id, date, name, descr FROM articles");
$rss_data = array();
for($i = 0; $i < $result->num_rows; $i++){
	$rss_data[] = $result->fetch_assoc();
}

Теперь нам стоит сгенерировать XML, который будет отдаваться браузеру. Тут же всё просто – прописываем заголовок с указанием типа файла и его кодировки. Для того чтобы исправить отображение в Chrome, добавляем CSS файл со стилями и указываем путь до него в XML - формате.

// Генерация RSS ленты
header("Content-type: text/xml; charset=UTF-8");
echo('<?xml version="1.0" encoding="UTF-8"?>'."\n");
echo('<?xml-stylesheet type="text/css" href="styles-rss.css"?>'."\n");
echo('<rss version="2.0">'."\n");
	echo("\t<channel>\n");
		echo("\t<title>Новинки от falbar.ru</title>\n");
		echo("\t<link>http://falbar.ru</link>\n");
		echo("\t<description>Создание сайтов</description>\n");

	// Статьи
	foreach($rss_data as $rss){

		$url  = "http://falbar.ru/article/id/".$rss["id"];
		$date = date("D, j M Y G:i:s", $rss["date"]). " GMT";

		echo("\t<item>\n");
			echo("\t\t<title>".$rss["name"]."</title>\n");
			echo("\t\t<link>".$url."</link>\n");
			echo("\t\t<description>".$rss["descr"]."</description>\n");
			echo("\t\t<pubDate>".$date."</pubDate>\n");
		echo("\t</item>\n");
	}

	echo("\t</channel>\n");
echo('</rss>');

В результате этого, когда человек перейдёт по ссылке, он увидит не XML, а красиво отформатированные данные. Но это не решает проблемы чтения RSS в Chrome. Для этого читателю самому необходимо позаботиться об плагинах, позволяющих ему работать c каналом. Однако визуально это будет выглядеть гораздо более приятно, чем обычный XML.

novoe-otobrazhenie-rss-v-chrome

Чтобы проверить RSS - XML после написания на валидность, можно воспользоваться сервисом на сайте W3C.

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

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Плавное увеличение картинок при наведении курсора

27 ноября 2014 Антон Кулешов

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

Всплывающие подсказки на чистом CSS

16 апреля 2015 Антон Кулешов

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

Реализуем всплывающие сообщения без использования JavaScript

25 июля 2015 Антон Кулешов

Лучший способ проинформировать посетителя вашего сайта об каких-то важных новостях или изменений это добавить блок с уведомлением, который можно будет при надобности спрятать. Сегодня мы рассмотрим один из примеров реализации данного функционала, не прибегая к JavaScript, а лишь воспользовавшись HTML и CSS3.