akirich_pcroom

Как-то давно, делая свой сайт-визитку я задумался: а почему бы не автоматизировать всю ленту своих постов на сайт.


Ну нам же нужна картинка для привлечения внимания. 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:image"')>0){ //если таковой нашелся... Property - обязательно, иначе можно уронить сервак множественным запросом.
        $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})|({url})|({label})|({date})|({description})/ig, function(m){

Его надо заменить с учетом будущего нового шаблона pics.

rssoutput+= this.containertag[1] + this.outputtemplate.replace(/({title})|{pics}|({url})|({label})|({date})|({description})/ig, function(m){

Потом нам нужно создать в коде этот самый шаблон. По образу и подобию вслед за шаблоном 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 можно изменить размер картинки, и присвоить стили. Хотя у меня например шаблон сразу с куском бутстрапа, так что каждая картинка генерируется блоком.

Красотищу можно увидеть на моем сайте, ссылка в самом верху поста.

Готовые файлы проекта по ссылке.