На днях потребовалось отредактировать картинку которая выводится при шаринге в фейсбуке, то есть выводить конкретную картинку, а не ту что добавляет facebook сам. Для этого в header нужно добавить такую строку:
<meta property="og:image"
content="http://web-dev.vidshup.ru/upload/logo-100x100.jpg" />
Где logo-100x100.jpg и будет наша картинка которую при шаринге использует fasebook.
Исходя их этого картинку товара мы можем определить только в комплексном компоненте catalog, а если точнее в компоненте catalog.element. Для того что бы передать нашу картинку мы используем встроенный метод битрикса AddHeadString. Выглядеть в нашем случае это будет так:
<?$APPLICATION->AddHeadString('<meta property="og:image" content="http://web-dev.vidshup.ru'.$arResult["DETAIL_PICTURE"]["SRC"].'" />',true)?>
Такие же функции есть для добавления JS
<?$APPLICATION->AddHeadScript('/bitrix/templates/s1/js/additional.js');?>
И CSS
<?$APPLICATION->SetAdditionalCSS("/bitrix/templates/s1/css/additional.css");?>