Постим иллюстрированные статьи Joomla-сайта на Facebook, используя OG-теги
Опубликовано: 13.09.2015 13:06       Автор: Ogri       Просмотров: 3141

Upd: English version of the article: Post an illustrated Joomla-site article on Facebook using OG-tags.

Некоторое время назад я написал цикл статей о внедрении кнопок социальных медиа в сайт на Joomla 2.5. Перейдя на 3.x (на момент написания этот сайт работает под 3.4.4), я продолжал держать на страницах статей кнопки от share42, интегрированные по той же методике, и до определенного времени их функционал работал на ура. Однако с некоторых пор начались определенные глюки при расшаривании статей в некоторых соцсетях. В частности, раньше при попытке поделиться в Facebook давалась возможность выбрать одну из картинок, имеющихся на странице. Теперь же такая опция пропала, картинка выбиралась самим скриптом Фейсбука, причем отфонарно. Пришлось разобраться, что изменилось в политике Закерберга, и под эти изменения подстроиться. Результатам этого исследования данная статья и посвящена.

Но прежде всего я обновил скрипт от share42 и обнаружил, что он теперь датируется маем 2014-го. Я на тот момент использовал версию от октября 2013-го. Заменил скрипт на более свежий, но проблема осталась. Найдя в коде событие клика по кнопке FB, открывающее окно "Поделиться", обнаружил, что вызывается сервис sharer.php. Перед его вызовом формируется строка запроса, состоящая из нескольких параметров: url, title, summary (description) и массив images[]. Последний параметр-массив и формировал выбор картинок в диалоге.

С некоторых пор Facebook изменил набор параметров sharer.php. Собственно, все кроме ссылки на расшариваемую страницу были попросту уволены. Нынешний вид обработки события клика по кнопке должен выглядеть так:

onclick="window.open('http://www.facebook.com/sharer.php?u=' +
         encodeURIComponent([url веб-страницы]) + ')"'

Все остальные параметры теперь вытаскиваются из мета-тегов раздела <head></head> html-маркапа страницы. Закомментировав пару строк в js-файле, я убрал из строки запроса все устаревшие параметры.

Также я выяснил, что Мордокнига уже пару лет как имеет свои собственные мета-теги - Facebook Open Graph. Их синтаксис:

<meta property="og:[имя тега]" content="[значение тега]" />

Снабжает sharer значениями тегов-параметров специальный бот-спайдер, называемый Facebook Crawler. Набор тегов с описанием приводится в руководстве по расшариванию для веб-мастеров в разделе Фейсбука, предназначенном для разработчиков. Помимо того, что наличие Open Graph мета помогает грамотно сформировать диалог расшаривания страницы, оно еще и повышает рейтинг сайта в Фейсбуке и положительно влияет на трафик из него. Так что стоит озаботиться их генерацией на страницах сайта. Как - будет ниже, а пока закончу тему картинок.

Навести crawler на правильную картинку можно, введя в head страницы следующий тег:

<meta property="og:image" content="[url правильной картинки]" />

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

Оказалось, что Фейсбук сохранил настройки предыдущего расшаривания где-то в своем кэше. При последующих вызовах диалога "Поделиться" использовались те же устаревшие настройки, включая URL на неправильную картинку, сгенерированный до введения в код страницы тега og:image. В фейсбучной терминологии это называется scrape - соскоб. (В русском варианте они обогатили Великий и Могучий словом "скрапинг".) То есть, "соскоблив" раз значения параметров-тегов, они продолжают их использовать, что целиком и полностью оправдано: экономятся время отклика и трафик. А уж с учетом количества клиентов (и спонсоров) Закерберга - так и вовсе очень резонно.

К счастью, нас снабдили инструментом-отладчиком, позволяющим сбросить старые установки. Он носит имя Отладчик объектов Open Graph | Open Graph Object Debugger и доступен по адресу https://developers.facebook.com/tools/debug/og/object. Введя линк страницы в поле ввода Введите URL | Input URL и нажав на кнопку Получить новую информацию об URL | Fetch new scrape information,..

facebook open graph 01 debugger

... вы сделаете свежий "соскоб" og-тегов и тут же получите его результаты. В конце результирующей страницы - в разделе При перепосте это будет включено | When shared, this is what will be included - выводится кликабельная превьюшка диалога расшаривания. Можно прямо оттуда запостить статью на Timeline.

Ну и теперь - о главном: как генерить в коде страниц Джумла-сайта опен-графовские мета-теги.

Среди множества платных и бесплатных расширений, связывающих Joomla-сайт с социальными медиа, я выбрал плагин plg_fblinkcontentimage. Он имеет платную версию (стоящую всего 7 Евро) и бесплатную, с усеченным функционалом. Для моих текущих целей вторая подошла с лихвой. В этом варианте плагин внедряет в страницы материалов четыре og-тега: title, type (значение - всегда article), url и site_name. При наличии в статье картинок, удовлетворяющих стандартам фейсбуковского бота (минимальный размер - 200x200px, и для краулера доступны), добавляется также тег og:image, ссылающийся на первую подходящую картинку из имеющихся в тексте статьи. Настройки в админке для бесплатного варианта почти все неактивны, достаточно просто установить плагин через Менеджер расширений и включить его в Менеджере плагинов. Теперь, обновив страницу материала в браузере и вытащив ее код, можно увидеть в разделе head искомые теги.

В платной версии доступны дополнительные функции, которые также могут быть полезны. Вот сравнительный функционал обоих вариантов:

facebook open graph 02 plg_fblinkcontentimage

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

На данный же момент я получил ровно то, к чему и стремился: Open Graph теги в статьях и возможность постить их описание в ленте Facebook с первой картинкой из самой статьи. Она, первая картинка, в 90% случаев выбиралась мною и раньше.

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

Кстати, свои собственные мета-теги первой начала использовать вовсе не Facebook. Пример ей подал Твиттер, введя свои Twitter Cards. Их я тоже в самое ближайшее время добавлю на страницы сайта и сразу же поделюсь опытом. Ждите отчета!

Добавить комментарий

Новые

Популярные