Как то раз мне поступила задача из отдела маркетинга "сделать так, что бы при добавлении новостей в соцсети автоматически подгружалось необходимое изображение, заголовок и описание. Что бы не приходилось каждый раз выбирать картинку вручную". Для опытных профи это конечно простенькая задача, но для меня на тот момент это была головоломка.
Для решения такой задачи существует og протокол. Про особенности его работы в каждой отдельной соцсети писать не буду, эту инфу можно погуглить. Суть в том, что нам необходимо добавить в тег <head></head> дополнительные мета-теги, которые будут указывать соцсетям какую именно картинку, заголовок и описание цеплять для показа.
Для выполнения задачи нам нужны следующие мета-теги:
<met a property="og:title" content="Заголовок новости" />
<met a property="og:description" content="Текст анонса" />
<met a property="og:image" content="Путь к изображению анонса" />
Решение
В качестве примера возьмем шаблон компонента news.detail. В папку шаблона (к примеру .default) добавляем файл result_modifier.php со следующим кодом:
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
//Кэшируем необходимые нам ключи $arResult что бы можно было их использовать в component_epilog.php
$this->__component->SetResultCacheKeys(array(
"NAME",
"PREVIEW_TEXT",
"PREVIEW_PICTURE"
));?>
далее создаем в этой же папке файл component_epilog.php с кодом
В данном примере для картинки анонса необходимо дополнительно указать поле:
Что бы мета-теги появились в исходном коде, в шаблоне сайта должна присутствовать функция $APPLICATION->ShowHeadStrings()
Результат:
UDP.
Просьба исправлять тег <meta> сомостоятельно, так как редактор отрывает букву "a" и получается <met a>. Иначе можете потерять массу времени при копировании кода из данного поста.
Никак не могу сделать так, чтобы детальная картинка была еще и последней property="og:image" на странице. Я так понял, что Telegram берёт только последнюю картинку og:image Можно ли "запихать" детальную картинку в HEAD? Как?
С новостями все ок. А как быть с компанентом блогов. Как там задать og:image . У меня всегда при репосте в соцсети в качестве картинки улетает рекламный баннер с текущей страницы.
Подскажите, пожалуйста: а как добавить свойство элемента, например F1. Я его прописываю в result_modifier.php так: "PROPERTY_F1", В component_epilog.php так (свойство элемента - строка): $APPLICATION->AddHeadString('<meta property="og:description" content="' . $arResult["PROPERTIES"]["F1"]["VALUE"] . '" />'); Но не выводится.
не получилось. ФБ, к примеру, требует наличие этих тегов не в теле <body> а в <head> "Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree. Please fix this in order for the tags to be usable."
Если как-то остальные теги он восстанавливает, то картинку не хочет никак
AddHeadString - конечно не плохое решение и довольно простое. Но мне кажется использование отложенных функций более гибко. Это позволит избежать дублирования метатегов, позволит переопределить их в случае чего...
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».