Как то раз мне поступила задача из отдела маркетинга "сделать так, что бы при добавлении новостей в соцсети автоматически подгружалось необходимое изображение, заголовок и описание. Что бы не приходилось каждый раз выбирать картинку вручную". Для опытных профи это конечно простенькая задача, но для меня на тот момент это была головоломка.
Для решения такой задачи существует 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>. Иначе можете потерять массу времени при копировании кода из данного поста.
Ещё можно проверку на пустоту добавить, чтобы сниппет не выглядил криво, когда какое-то из полей не заполнено (по-моему, фэйсбук это не любит). Я как-то так делаю:
/**
* Check page properties and set OpenGraph tags
*/
function showSocialMetatags()
{
$GLOBALS['APPLICATION']->AddBufferContent(function () {
global $APPLICATION;
$meta = '';
if (false != $content = $APPLICATION->GetProperty('og:title')) {
$meta .= '<met a property="og:title" content="' . htmlspecialchars(strip_tags($content)) . '">' . "\n";
}
if (false != $content = $APPLICATION->GetProperty('og:description')) {
$meta .= '<met a property="og:description" content="' . htmlspecialchars(strip_tags($content)) . '">' . "\n";
}
if (false != $content = $APPLICATION->GetProperty('og:image')) {
if (strpos($content, '://') === false) {
$content = 'http://' . SITE_SERVER_NAME . $content;
}
$meta .= '<met a property="og:image" content="' . $content . '">' . "\n";
}
return $meta;
});
}
В шаблоны сайта в <head> добавляется вызов:
<? \nav\Misc\showSocialMetatags(); ?>
Ну а в эпилогах уже не задумываясь устанавливаются значения через SetPageProperty. При такой установке тегов есть одно преимущество - можно через свойства страницы задавать их вручную для статических страниц.
$APPLICATION->AddHeadString('<met a property="og:image" content="https://img.youtube.com/vi/'.$arResult["YOUTUBE"].'/0.jpg" />');
$APPLICATION->AddHeadString('<li nk rel="image_src" href="https://img.youtube.com/vi/'.$arResult["YOUTUBE"].'/0.jpg" />');
В результате картинка не выводится:
<met a property="og:image" content="https://img.youtube.com/vi//0.jpg" />
Подскажите, пожалуйста, как сделать, чтобы выводилась превью-картинка из YouTube в "og:image".
если да, то точно не могу сказать, но если ссылка на изображение рабочая и картинка не отображается в соцсетях, то возможно закешировался предыдущий вариант без картинки. Я лично именно с такой проблемой сталкивался, кэш сбросить никак не получалось. Нужно попробовать сделать пост материалов, которые еще не расшаривались.
Алексей, почему могут не читаться теги opengraph при добавлении их через addheadstring (не в компоненте)? Есть простая страница, после подключения пролога делаю addheadstring с opengraph, в коде все выводится корректно, но соцсетями не распознается. При этом, если те же теги добавляю напрямую в шаблон, все работает.
А мы сделали простой и удобный компонент для вывода opengraph разметки в секции head. http://marketplace.1c-bitrix.ru/solut...opengraph/ И, соответственно, через отложенные функции можно устанавливать нужную картинку в component_epilog.php шаблона компонента.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».