Налаштування шерингу товарів у соціальні мережі 1С-Бітрікс

Наша компанія займається розробкою, підтримкою та обслуговуванням рішень на Бітрікс та Бітрікс24 будь-якої складності. Від простих односторінкових сайтів до складних інтернет-магазинів, CRM систем з інтеграцією 1С та телефонії. Досвід розробників підтверджено сертифікатами від вендора.
8+Років на ринку900+Реалізованих проектів100+Розробників у штаті19+Партнерів
Пропоновані послуги
Показано 1 з 1 послугУсі 1626 послуг
Налаштування шерингу товарів у соціальні мережі 1С-Бітрікс
Проста
~1 робочий день
Часті питання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_website-b2b-advance_0.png
    Розробка сайту компанії B2B ADVANCE
    1262
  • image_bitrix-bitrix-24-1c_fixper_448_0.png
    Розробка веб-сайту для компанії ФІКСПЕР
    851
  • 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
    585
  • image_bitrix-bitrix-24-1c_mirsanbel_458_0.webp
    Розробка на базі 1С Підприємство для компанії МИРСАНБЕЛ
    751
  • image_crm_dolbimby_434_0.webp
    Розробка сайту на CRM Бітрікс24 для компанії DOLBIMBY
    657
  • image_crm_technotorgcomplex_453_0.webp
    Розробка на базі Бітрікс24 для компанії ТЕХНОТОРГКОМПЛЕКС
    989
Показати більше робіт

Налаштування шерингу товарів у соціальні мережі 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.ua" . $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.ua/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-зображення
1С Бітрікс презентація1С Бітрікс24 презентація1С Підприємство презентація