Метаданные в MODX Revolution


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

Требования: должно быть установлено дополнение PhpThumbOf

Для примера, возмём мой предыдущий пост Онлайн газета MODX Today, при нажатии кнопки "Send to FACEBOOK" у меня на фейсбук странице появилась следующая запись с уменьшеным изображением для этого поста:

Запись в Facebook аккаунте после нажатия кнопки Sent to FACEBOOK

Зелёными стрелками с подписями указаны элементы моего ресурса, которые были переданы через opengraph на страницу аккаунта Facebook.

Аналогично происходит с Контактом: 

Создание ссылки на пост MODX Revolution в группе Контакта

В группе контакта MODX Revolution я вставил запись как администратор этой группы. При наведении на ссылку (показана зелёной стрелкой), выплывает тултип с уже знакомой уменьшенной картинкой поста и остальными атрибутами ресурса: Названием статьи и Описанием.

Думаю здесь всё понятно, перейдём теперь непосредственно к описанию того, как я это сделал.

  • Создайте переменную шаблона, у меня title_post_image с типом ввода данных image, тип вывода - по-умолчанию. Желательно вставлять изображения 200 на 200 пикселов (минимум для Фейсбука). Можете вставлять отдельно два изображение - одно для поста, а одно для opengraph.
  • Руководствуясь описанием Opengraph протокола создадим код для секции HEAD сайта
  • Сохраните шаблон и очистите кеш.

Для отладки опенграф сниппета заходим в Фейсбук на страницу разработчиков FB Debugger

Помните о том, что ФБ создаёт кеш для вашей страницы при сохраненнии ссылки на своих страницах, поэтому если вы уже сделали ошибку и не получился вывод информации о ссылке, как на рисунке выше, то переименуйте URI для ресурса и сохраните повторно.
AJAX загрузка страниц с использованием… Пререлиз MODx Revolution 2.1.4 pl