Настройка шеринга товаров в социальные сети 1С-Битрикс

Наша компания занимается разработкой, поддержкой и обслуживанием решений на Битрикс и Битрикс24 любой сложности. От простых одностраничных сайтов до сложных интернет магазинов, CRM систем с интеграцией 1С и телефонии. Опыт разработчиков подтвержден сертификатами от вендора.
Предлагаемые услуги
Показано 1 из 1 услугВсе 1626 услуг
Настройка шеринга товаров в социальные сети 1С-Битрикс
Простая
~1 рабочий день
Часто задаваемые вопросы
Наши компетенции:
Этапы разработки
Последние работы
  • image_website-b2b-advance_0.png
    Разработка сайта компании B2B ADVANCE
    1177
  • image_bitrix-bitrix-24-1c_fixper_448_0.png
    Разработка веб-сайта для компании ФИКСПЕР
    811
  • image_bitrix-bitrix-24-1c_development_of_an_online_appointment_booking_widget_for_a_medical_center_594_0.webp
    Разработка на базе Битрикс, Битрикс24, 1С для компании Development of an Online Appointment Booking Widget for a Medical Center
    564
  • image_bitrix-bitrix-24-1c_mirsanbel_458_0.webp
    Разработка на базе 1С Предприятие для компании МИРСАНБЕЛ
    747
  • image_crm_dolbimby_434_0.webp
    Разработка сайта на CRM Битрикс24 для компании DOLBIMBY
    655
  • image_crm_technotorgcomplex_453_0.webp
    Разработка на базе Битрикс24 для компании ТЕХНОТОРГКОМПЛЕКС
    976

Настройка шеринга товаров в социальные сети 1С-Битрикс

Когда пользователь делится карточкой товара ВКонтакте или в Telegram, соцсеть делает запрос к странице и вытаскивает превью — заголовок, описание, изображение. Это работает через Open Graph (OG) мета-теги. Если они не заданы или заданы неправильно, превью генерируется произвольно: берётся случайная картинка со страницы или вообще ничего не отображается.

Open Graph в Битрикс

Битрикс добавляет OG-теги через компонент bitrix:main.share или вручную в шаблоне компонента детальной страницы товара. Компонент bitrix:main.share выводит кнопки шеринга и принимает параметры:

  • TEXT — текст публикации (обычно NAME товара)
  • LINK — канонический URL страницы
  • IMAGE — полный URL изображения (минимум 200×200 px)
  • NOINDEX — скрывать ли кнопки от индексации

Для корректного превью важнее не кнопки шеринга, а мета-теги в <head>. В шаблоне header.php или в компоненте детальной страницы добавляются:

$APPLICATION->SetPageProperty("og:title", $arResult["NAME"]);
$APPLICATION->SetPageProperty("og:description", strip_tags($arResult["PREVIEW_TEXT"]));
$APPLICATION->SetPageProperty("og:image", "https://site.ru" . $arResult["PREVIEW_PICTURE"]["SRC"]);
$APPLICATION->SetPageProperty("og:type", "product");
$APPLICATION->SetPageProperty("og:url", $APPLICATION->GetCurPageParam("", []));

В header.php эти свойства выводятся через $APPLICATION->GetPageProperty().

Специфика для товаров

Соцсети поддерживают расширенный OG-тип og:type = "product" с дополнительными полями:

  • product:price:amount — числовая цена
  • product:price:currency — код валюты (RUB, USD)
  • product:availability — наличие товара

Эти теги улучшают отображение в Facebook и Pinterest. ВКонтакте их игнорирует, но сам тип og:type = "product" воспринимает корректно.

Twitter Cards

Для Twitter (X) используется отдельный набор мета-тегов:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Название товара">
<meta name="twitter:image" content="https://site.ru/upload/image.jpg">

Twitter кэширует превью агрессивно — при изменении изображения товара карточка в кэше обновится не сразу. Для принудительного сброса используется Twitter Card Validator.

Кнопки шеринга без внешних скриптов

Стандартный компонент bitrix:main.share подгружает iframe-кнопки от каждой соцсети — это замедляет страницу. Альтернатива — нативные ссылки шеринга:

  • ВКонтакте: https://vk.com/share.php?url=ENCODED_URL
  • Telegram: https://t.me/share/url?url=ENCODED_URL&text=ENCODED_TEXT
  • WhatsApp: https://wa.me/?text=ENCODED_TEXT

Ссылки формируются на сервере через PHP и не требуют загрузки сторонних скриптов. URL кодируется через urlencode().

Изображения для шеринга

ВКонтакте и Telegram предпочитают изображения с соотношением сторон 1.91:1 (1200×630 px). Если основное фото товара квадратное, превью будет обрезано. Решения:

  1. Добавить отдельное свойство OG_IMAGE в инфоблок каталога — загружать горизонтальное изображение специально для шеринга
  2. Генерировать OG-изображение на лету через CFile::ResizeImageGet() с нужными пропорциями

Что входит в настройку

  • Аудит текущих OG-тегов на детальных страницах товаров
  • Добавление полного набора OG-тегов в шаблон компонента
  • Настройка Twitter Cards для корректного превью
  • Реализация нативных кнопок шеринга без сторонних скриптов
  • Проверка превью через валидаторы ВКонтакте, Facebook и Telegram
  • При необходимости — добавление отдельного свойства для OG-изображения