22.09.2017
Open Graph разметка в 1С-Битрикс
Open Graph — это стандарт метатегов, разработанный соц.сетью Facebook для передачи информации различным сервисам о содержании страницы.
Стандартной разметкой Open Graph пользуется большинство популярных социальных сетей Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие.
Данные добавляются в секцию <head> в виде метатегов:
<meta property="og:url" content="https://keengo.ru">
В качестве свойств данной разметкой могут передаваться следующие параметры:
- og:url — ссылка на страницу
- og:type — тип передаваемого объекта
- og:title — заголовок страницы или объекта
- og:description — описание страницы или объекта
- og:image — превью изображение
Как же добавить данные параметры в шапку шаблона 1С-Битрикс, чтобы они автоматически отображали информацию текущей страницы, которой делится в соц.сети пользователь?
Для начала определим некоторые параметры, которые так же пригодятся для дальнейшего использования на сайте, в самом начале файла header.php вашей темы добавляем код:
<? define("SITE_SERVER_PROTOCOL", (CMain::IsHTTPS()) ? "https://" : "http://"); // Переменная определяет протокол, по которому работает ваш сайт $curPage = $APPLICATION->GetCurPage(); // Получаем текущий адрес страницы ?>
Затем в секции <head> добавляем наши метатеги с параметрами для вывода Open Graph разметки:
<meta property="og:url" content="<?=SITE_SERVER_PROTOCOL . SITE_SERVER_NAME . $curPage?>"> <meta property="og:type" content="website"> <meta property="og:title" content="<?$APPLICATION->ShowProperty("title")?>"> <meta property="og:description" content="<?=$APPLICATION->ShowProperty("description")?>"> <meta property="og:image" content="<?=$APPLICATION->ShowProperty("og:image")?>">
Для вывода og:url воспользовались конструкцией, которая формирует полную ссылку на текущую страницу:
<?=SITE_SERVER_PROTOCOL . SITE_SERVER_NAME . $curPage?>
Параметр og:type в нашем случае принимает значение website.
Для вывода заголовка og:title и описания og:description воспользовались функцией 1С-Битрикс $APPLICATION->ShowProperty, которая является отложенной функцией и позволяет выводить информацию выше того места, где она была задана. Т.е. при формировании страницы из блока новости, в заголовок будет попадать информация из title и description текущей новости, а не стандартные параметры раздела.
Остается последний очень важный параметр — превью нашей записи. Изображение можно создать из детальной картинки записи, обрезав его под размер 1200х630 px и передать в параметр og:image. Но при включенном автокешировании данные перестанут передаваться, когда страница будет загружена из кеша и вся конструкция развалится. Для этого необходимо сделать следующее:
1. В папке с шаблоном детальной страницы создать файл result_modifier.php и в нем добавить параметры, которые будут передаваться после кеширования:
<? // Создаем изображение для превью соц.сетей $image_social = CFile::ResizeImageGet($arResult["DETAIL_PICTURE"], array('width'=>'1200', 'height'=>'630'), BX_RESIZE_IMAGE_EXACT, true); $arResult["DETAIL_PICTURE"]["SOCIAL"] = $image_social["src"]; // Передаем данные в результат после кеширования $this->__component->SetResultCacheKeys(array( "DETAIL_PICTURE" )); ?>
2. Далее добавляем файл component_epilog.php, который формируется уже после вывода информации из кеша и в нем добавляем код, задающий изображение:
<? $APPLICATION->SetPageProperty("og:image", SITE_SERVER_PROTOCOL . SITE_SERVER_NAME . $arResult['DETAIL_PICTURE']['SOCIAL']); ?>
Вот таким способом мы можем добавить информацию о разметке Open Graph в шапку шаблона 1С-Битрикс.
Поделимся еще полезной ссылкой, которая позволяет проверить вид ссылок, которые будут публиковаться в Facebook и устранить ошибки:
Нам будет приятно
Поделитесь
Комментарии