Setting up product sharing on social networks in 1C-Bitrix

Our company is engaged in the development, support and maintenance of Bitrix and Bitrix24 solutions of any complexity. From simple one-page sites to complex online stores, CRM systems with 1C and telephony integration. The experience of developers is confirmed by certificates from the vendor.
Our competencies:
Development stages

Configuring Product Sharing to Social Networks in 1C-Bitrix

When a user shares a product page on VKontakte or Telegram, the social network sends a request to the page and extracts a preview — the title, description, and image. This works via Open Graph (OG) meta tags. If they are missing or incorrectly defined, the preview is generated arbitrarily: a random image from the page is picked, or nothing is shown at all.

Open Graph in Bitrix

Bitrix adds OG tags via the bitrix:main.share component or manually in the detail page component template. The bitrix:main.share component renders sharing buttons and accepts parameters:

  • TEXT — publication text (usually the product NAME)
  • LINK — canonical URL of the page
  • IMAGE — full URL of the image (minimum 200×200 px)
  • NOINDEX — whether to hide buttons from indexing

For a correct preview, what matters more than the sharing buttons are the meta tags in <head>. In the header.php template or in the detail page component, add:

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

These properties are output in header.php via $APPLICATION->GetPageProperty().

Product-Specific Details

Social networks support the extended OG type og:type = "product" with additional fields:

  • product:price:amount — numeric price
  • product:price:currency — currency code (RUB, USD)
  • product:availability — product availability

These tags improve display on Facebook and Pinterest. VKontakte ignores them, but correctly interprets og:type = "product" itself.

Twitter Cards

For Twitter (X), a separate set of meta tags is used:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Product name">
<meta name="twitter:image" content="https://site.com/upload/image.jpg">

Twitter caches previews aggressively — when a product image changes, the cached card will not update immediately. The Twitter Card Validator is used to force a cache reset.

Sharing Buttons Without External Scripts

The standard bitrix:main.share component loads iframe-based buttons from each social network — this slows the page down. An alternative is native sharing links:

  • VKontakte: 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

Links are constructed server-side in PHP and require no third-party scripts. The URL is encoded using urlencode().

Images for Sharing

VKontakte and Telegram prefer images with a 1.91:1 aspect ratio (1200×630 px). If the main product photo is square, the preview will be cropped. Solutions:

  1. Add a separate OG_IMAGE property to the catalog info block — upload a landscape image specifically for sharing
  2. Generate the OG image on the fly via CFile::ResizeImageGet() with the required proportions

What Is Included in the Setup

  • Audit of existing OG tags on product detail pages
  • Adding the full set of OG tags to the component template
  • Configuring Twitter Cards for correct previews
  • Implementing native sharing buttons without third-party scripts
  • Verifying previews using VKontakte, Facebook, and Telegram validators
  • If needed — adding a separate property for the OG image