Добавить разметку OpenGraph в Битрикс

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

Большинство социальных сетей поддержвают протокол Open Graph, разработанный facebook. С ним мы и будем работать.
Суть нашей работы заключается в добавлении свойств и значений в теги . Пример:

<html prefix="og: http://ogp.me/ns#">
<head>
<title>Мета теги для соц. сетей</title>
...
<!-- первые четыре основные -->
<meta property="og:title" content="Мета теги для соц. сетей" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://thisis-blog.ru/" />
<meta property="og:image" content="http://thisis-blog.ru/" />

<meta property="og:description" content="Как добавить разметку Open Graph на сайт." />
<meta property="og:site_name" content="Блог 1с-Битрикс программиста" />
...
</head>

Если например на сайте используется компонент новостей или каталог и нужно добавить разетку на детальную страничку, то соответственно в шаблоне news.detail, либо в catalog.element добавить код в result_modifier.php :

<?php
$this->__component->SetResultCacheKeys(array(
    "NAME",
    "PREVIEW_TEXT",
    "PREVIEW_PICTURE"
));?>
?>

Нужен для кэширования ключей( будем использовать их в component_epilog.php) $arResult.

в component_epilog.php добавляем следующий код:

<?php
	$APPLICATION->AddHeadString('<meta property="og:title" content="'.$arResult['NAME'].'"/>');
	$APPLICATION->AddHeadString('<meta property="og:type" content="article"/>');
	$APPLICATION->AddHeadString('<meta property="og:image" content="http://thisis-blog.ru'.$arResult['PREVIEW_PICTURE']['SRC'].'"/>');
	$APPLICATION->AddHeadString('<meta property="og:site_name" content="Блог 1с-Битрикс программиста"/>');
	$APPLICATION->AddHeadString('<meta property="og:description" content="'.ucfirst($arResult['PREVIEW_TEXT']).'"/>');
?>

О необязательных метаданных и для более детального описания контента можно почитать тут http://ruogp.me

ПоделитьсяShare on Facebook0Share on VKShare on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0

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