Ну нам же нужна картинка для привлечения внимания. Via Pikabu.
Все было сделано на gfeedfetcher.js, но недавно я подумал, а почему бы несколько свежих постов не визуализировать картинками, причем также автоматически?
Так как сайт у меня на PHP + JS + бутстрап на базе Pure.css, то и исходные шаблоны будут справедливы для него. Но, код делается максимально простым, чтобы его можно было интегрировать практически в каждый сайт. Pure мне понравился доходчивостью мануала и более-менее адекватной мобильной версткой.
Начнем с теории.
ЖЖ, несмотря на кондовость во многих решениях, соответствует нормам Open Graph Protocol, что позволяет лучше ранжировать сайт в поисковых системах, и самое главное - отлично отражать посты в социальных сетях.
Страничка рендерится в такую вот картинку: (справедливо именно для этого поста)
Данное решение с открытым кодом обильно приписывается разработчикам из Facebook, и это редкая вещь которой не просто приятно пользоваться, но и стоит пользоваться. Для любителей WordPress есть специальный плагин, так что сегодняшний проект справедлив и для WP.
Для работы протокола в заголовке html-страницы добавляется несколько мета-тегов с названием свойства начинающимся с "og:".
Для предыдущего поста эти строки выглядят так:
<meta content="Как-то давно, делая свой сайт-визитку я задумался: а почему бы не автоматизировать всю ленту своих постов на сайт. Ну нам же нужна картинка для привлечения…" property="og:description" />
<meta content="http://l-files.livejournal.net/og_image/20983067/2981?v=1485950046" property="og:image" />
<meta content="IT-среда. Кодим виджет ЖЖ на свой сайт. Работа с Open Graph." property="og:title" />
<meta content="article" property="og:type" />
<meta content="http://akirich-pcroom.livejournal.com/763246.html" property="og:url" />
Где og:description - краткое описание поста (обычно размером 100-140 знаков), og:image - нужная нам картинка, og:title - заголовок, og:type - тип сообщения, и og:url - ссылка.
Нам нужен только og:image - все остальное и без того хорошо грузится через RSS и gfeedfetcher.js.
Кстати, из той же логики можно работать и с аналогичным проектом из Твиттера - Twitter Cards, главное правильно настроить парсер. Здесь основная проблема для кастомизации - одноязычная документация. Переводчиков для этого раздела - твиттер почему-то не призывал. Для OGP есть и английский глоссарий, и русский.
<meta property="twitter:app:url:ipad" content="lj://akirich-pcroom.livejournal.com/763246.html" />
<meta property="twitter:app:url:iphone" content="lj://akirich-pcroom.livejournal.com/763246.html" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:description" content="Как-то давно, делая свой сайт-визитку я задумался: а почему бы не автоматизировать всю ленту своих постов на сайт. Ну нам же нужна картинка для привлечения…" />
<meta property="twitter:image:src" content="http://l-files.livejournal.net/og_image/20983067/2981?v=1485950046" />
<meta property="twitter:site" content="@livejournal" />
<meta property="twitter:title" content="IT-среда. Кодим виджет ЖЖ на свой сайт. Работа с Open Graph." />
Здесь картинка обозначена свойством twitter:image:src
Тут я обращу внимание, что у тви есть несколько ссылок вида "lj://...", что позволяет в случае наличия клиента ЖЖ на устройстве открывать пост сразу в нем. Это будет заделом на будущее.
Данные с ЖЖ, и возможно и с WP, собираются через RSS. Парсить его будет gfeedfetcher.js. Проект собирали на Google Ajax Feed API, но так как корпорация зла этот сервис погасили - пришлось перейти Yahoo Query Language. Но углублятся в разработку фидфетчера нам сильно не придется.
Кодим!
Нам понадобится: gfeedfetcher.js, немного знаний JS и PHP, сервер с PHP и терпение.
Заголовок отражаемой html-страницы сделаем как обычно, но добавим в тег head две строки.
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<script type="text/javascript" src="gfeedfetcher.js"></script>
В теле страницы надо добавить скрипт. Я приложу две версии - с картинками и с текстом соответственно.
<!-- Так как верстка блочная - делаем сразу два блока - в первом будут картинки, во втором текст -->
<script type="text/javascript">
var bfeed=new gfeedfetcher("mediabanners", "mediabannersclass", "_new") // где в скобках первые два элемента - название будущего блока в котором будут размещены картинки
bfeed.addFeed("MyBlog", "http://akirich-pcroom.livejournal.com/data/rss") // первое значение - название RSS-фида, второе - адрес. Таких addFeed может быть несколько.
bfeed.definetemplate("{pics}") // Задаем шаблон pics. Изначально в gfeedfetcher он не поддерживается, мы его допилим.
bfeed.setentrycontainer("div", "") // тип контейнера для каждой записи, в котором будут наши картинки. Второе значение - для стилей.
bfeed.filterfeed(3, "date") // первое значение - количество записей, второе - ранжирование по дате.
bfeed.init() // запуск
</script>
<!-- Со вторым блоком - все аналогично, но шаблоны и контейнеры разные. -->
<script type="text/javascript">
var newsfeed=new gfeedfetcher("example3", "example3class", "_new")
newsfeed.addFeed("MyBlog", "http://akirich-pcroom.livejournal.com/data/rss");
newsfeed.displayoptions("datetime snippet author")
newsfeed.definetemplate("{title}")
newsfeed.setentrycontainer("p", "pclass")
newsfeed.filterfeed(15, "date")
newsfeed.init()
</script>
Отлично, мы нарисовали страничку, теперь делаем парсер для нахождения ссылки на страницу. Я его буду делать на PHP, т.к. на JS это будет дополнительной нагрузкой на клиент, и увеличит время открытия страницы. Файл я назвал ograph.php:
<?php
$file=file_get_contents($_GET['post']); //грузим страничку, берем адрес из GET запроса.
$html = explode("\n", $file); //т.к. у нас file_get_contents делим страницу на строки. file() на загрузку url работает не у всех - заблокирована в php.ini.
for ($i=0; $i<=count($html); $i++){ //цикл будет искать тег og:image, как альтернатива - twitter:img:src.
if(strpos($html[$i],'property="og:i
$link=substr($html[$i], strpos($html[$i],'http'), -4); //обрезаем полученную строку от http и до 4 знака с конца. Дополнительных параметров в мета тегах нет, так что "и так сойдет! Альтернатива есть (через count($html[i])-strpos($html[$i])), но это слишком."
header('Location: '.$link); //перенаправляем браузер по найденной ссылке на картинку.
}
}
?>
И в конце концов правим gfeedfetcher.js. Без этого никак.
Ориентировочно на 175 строке, у нас должен быть подобный код:
rssoutput+= this.containertag[1] + this.outputtemplate.replace(/({title})|(
Его надо заменить с учетом будущего нового шаблона pics.
rssoutput+= this.containertag[1] + this.outputtemplate.replace(/({title})|{p
Потом нам нужно создать в коде этот самый шаблон. По образу и подобию вслед за шаблоном title добавляем шаблон pics.
if (m == "{title}"){
var title = limitchars( holder.titlefield[i], thisinst.lengthlimits['titlefield'], holder.titlefield[i].length )
return '<span class="titlefield"><a href="' + holder.urlfield[i] + '" target="' + thisinst.linktarget + '">' + title + '</a></span>\n'
}
// Добавляем...
if (m == "{pics}"){
var title = limitchars( holder.titlefield[i], thisinst.lengthlimits['titlefield'], holder.titlefield[i].length )
return '<a href="' + holder.urlfield[i] + '"><img width="400" src="ograph.php?post=' + holder.urlfield[i] + '" alt="' + title + '"></a></div>'
}
В шаблоне виден традиционный код HTML. В img можно изменить размер картинки, и присвоить стили. Хотя у меня например шаблон сразу с куском бутстрапа, так что каждая картинка генерируется блоком.
Красотищу можно увидеть на моем сайте, ссылка в самом верху поста.
Готовые файлы проекта по ссылке.
Journal information