Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!

Постинг в соцсети: настраиваем корректное отображение репоста

Материал добавлен: 21 Февраля 2017

Материал обновлен: 05 Сентября 2025

Отображение логотипа и описания репоста во «ВКонтакте»
Отображение изображения при репосте во «ВКонтакте»
Отображение изображения и описания при репосте в Facebook
Отображение логотипа и описания при репосте в Twitter
Примечания

Отображение логотипа и описания репоста во «ВКонтакте»

Чтобы репосты в социальной сети «ВКонтакте» отображались корректно и привлекательно для подписчиков вашей группы, необходимо внести изменения в шаблон «Страница материала и комментариев к нему» для модулей «Блог» и «Новости». Поддерживается также постинг для модулей «Каталог файлов» и «Доска объявлений».

Настройка логотипа и описания: Перейдите в Панель управления → Модули → Расширения → Постинг в соцсети → Настройки.

По умолчанию отображается логотип uCoz, который вы можете заменить, нажав на иконку логотипа.

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

Редактирование шаблона и установка кода:

Перейдите в Панель управления → Дизайн → Редактор, выберите нужный модуль (например, «Новости сайта», «Блог», «Каталог файлов» или «Доска объявлений»), откройте шаблон «Страница материала и комментариев к нему». Найдите тег </head> и вставьте перед ним следующий код:

<?if($SOCIAL_IMAGE_SRC$)?>
<link rel="image_src" href="$HOME_PAGE_LINK$<?substr($SOCIAL_IMAGE_SRC$,1)?>" />
<?endif?>
<meta name="title" content="<?if($MODULE_ID$='blog' or $MODULE_ID$='news')?>$ENTRY_NAME$<?else?>$ENTRY_TITLE$<?endif?>" />
<meta name="description" content="$SOCIAL_DESCRIPTION$" />

$SOCIAL_IMAGE_SRC$ — путь к иконке, заданной в настройках расширения.
$ENTRY_NAME$ — заголовок материала (для модулей «Новости» и «Блог»).
$ENTRY_TITLE$ — используется вместо $ENTRY_NAME$ в модулях «Каталог файлов» и «Доска объявлений».
$SOCIAL_DESCRIPTION$ — краткое описание материала, задаваемое в настройках расширения.

Отображение изображения при репосте во «ВКонтакте»

Редактирование шаблона и установка кода:

В шаблоне «Страница материала и комментариев к нему» найдите тег </head> и вставьте перед ним следующий код:

<?if($IMG_URL1$)?>
<link rel="image_src" href="$HOME_PAGE_LINK$<?substr($IMG_URL1$,1)?>" />
<?endif?>
<meta name="title" content="<?if($MODULE_ID$='blog' or $MODULE_ID$='news')?>$ENTRY_NAME$<?else?>$ENTRY_TITLE$<?endif?>" />
<meta name="description" content="$SOCIAL_DESCRIPTION$" />

/_pu/1/95496664.jpg — первое прикреплённое к материалу изображение. Изображения из файлового менеджера или внешние ссылки отображаться не будут.
$ENTRY_NAME$ — заголовок материала (для модулей «Новости» и «Блог»).
$ENTRY_TITLE$ — для «Каталога файлов» и «Доски объявлений».
$SOCIAL_DESCRIPTION$ — краткое описание материала из настроек расширения.

Отображение изображения и описания при репосте в Facebook

Для корректного отображения материалов при репосте в Facebook используется микроразметка Open Graph. Этот стандарт также поддерживается в LinkedIn и «ВКонтакте».

Редактирование шаблона и установка кода:

<meta property="og:locale" content="ru_RU" />
<meta property="og:url" content="$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>" />
<meta property="og:type" content="article" />
<meta property="og:title" content="<?if($MODULE_ID$='blog' or $MODULE_ID$='news')?>$ENTRY_NAME$<?else?>$ENTRY_TITLE$<?endif?>" />
<meta property="og:description" content="$SOCIAL_DESCRIPTION$" />
<meta property="og:image" content="<?if($IMG_URL1$)?>$HOME_PAGE_LINK$<?substr($IMG_URL1$,1)?><?else?><?substr($SOCIAL_IMAGE_SRC$,0,strpos($SOCIAL_IMAGE_SRC$,"?"))?><?endif?>" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="<?if($IMG_URL1$)?>600<?else?><?if($SOCIAL_IMAGE_SRC$)?>220<?endif?><?endif?>" />
<meta property="og:image:height" content="<?if($IMG_URL1$)?>315<?else?><?if($SOCIAL_IMAGE_SRC$)?>160<?endif?><?endif?>" />

og:title — заголовок материала.
og:description — краткое описание.
og:image — обложка поста (либо прикреплённое изображение, либо логотип сайта).
og:image:width / height — размеры изображения (можно изменить).

Отображение логотипа и описания при репосте в Twitter

В Twitter текст поста автоматически сокращается до 140 символов, независимо от настроек. Для отображения логотипа и описания при постинге добавьте в шаблон следующий код:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="<?if($MODULE_ID$='blog' or $MODULE_ID$='news')?>$ENTRY_NAME$<?else?>$ENTRY_TITLE$<?endif?>">
<meta name="twitter:description" content="$SOCIAL_DESCRIPTION$">
<meta name="twitter:url" content="$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>" />
<meta name="twitter:image" content="<?if($IMG_URL1$)?>$HOME_PAGE_LINK$<?substr($IMG_URL1$,1)?><?else?><?substr($SOCIAL_IMAGE_SRC$,0,strpos($SOCIAL_IMAGE_SRC$,"?"))?><?endif?>" />

Код необходимо вставлять непосредственно перед закрывающим тегом </head> в шаблоне соответствующего модуля.

Примечания

Данные в социальных сетях кешируются. Для обновления информации рекомендуется использовать специальные инструменты сброса кеша и валидаторы.

Сброс кеша во «ВКонтакте»: https://new.vk.com/dev/pages.clearCache
Сброс кеша и валидатор Facebook: https://developers.facebook.com/tools/debug/
Сброс кеша и валидатор Twitter: https://cards-dev.twitter.com/validator

Важно: обязательно к прочтению

В старой панели управления: Панель управления → Главная → Настройки → Общие настройки → URL адрес вашего сайта.
В новой панели управления: Панель управления → Главная → Настройки → URL адрес вашего сайта.

Если URL сайта заканчивается на слэш (например, http://sitename.ucoz.ru/) — менять ничего не нужно. Если слэша нет (http://sitename.ucoz.ru), то необходимо изменить шаблонные коды, чтобы избежать битых ссылок.

Замените:

$HOME_PAGE_LINK$<?substr($SOCIAL_IMAGE_SRC$,1)?>
$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>
$HOME_PAGE_LINK$<?substr($IMG_URL1$,1)?>
$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>
$HOME_PAGE_LINK$<?substr($PHOTO$,1)?>
$HOME_PAGE_LINK$<?substr($PHOTO_1$,1)?>
$HOME_PAGE_LINK$<?substr($DESC_LINK$,1)?>
<?substr($HOME_PAGE_LINK$,0,-1)?>

На:

$HOME_PAGE_LINK$$SOCIAL_IMAGE_SRC$
$HOME_PAGE_LINK$$ENTRY_URL$
$HOME_PAGE_LINK$$IMG_URL1$
$HOME_PAGE_LINK$$ENTRY_URL$
$HOME_PAGE_LINK$$PHOTO$
$HOME_PAGE_LINK$$PHOTO_1$
$HOME_PAGE_LINK$$DESC_LINK$
$HOME_PAGE_LINK$

Публикация товаров из модуля «Интернет-магазин»

Для корректного отображения товаров в соцсетях добавьте следующий код в шаблон «Страница товара» между тегами <head></head>:

<?if($PHOTO$)?>
<link rel="image_src" href="<?if($PHOTO$)?>$HOME_PAGE_LINK$<?substr($PHOTO$,1)?><?else?>$HOME_PAGE_LINK$<?substr($PHOTO_1$,1)?><?endif?>" />
<?endif?>
<meta name="title" content="$ENTRY_TITLE$" />
<meta name="description" content="<?substr($META_DESCRIPTION$,34,strpos(substr($META_DESCRIPTION$,34),'>')-3)?>" />

Для Facebook добавьте:

<meta property="og:locale" content="ru_RU" />
<meta property="og:url" content="$HOME_PAGE_LINK$<?substr($DESC_LINK$,1)?>" />
<meta property="og:type" content="article" />
<meta property="og:title" content="$ENTRY_TITLE$" />
<meta property="og:description" content="<?substr($META_DESCRIPTION$,34,strpos(substr($META_DESCRIPTION$,34),'>')-3)?>" />
<meta property="og:image" content="<?if($PHOTO$)?>$HOME_PAGE_LINK$<?substr($PHOTO$,1)?><?else?>$HOME_PAGE_LINK$<?substr($PHOTO_1$,1)?><?endif?>" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />

Для Twitter:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="$ENTRY_TITLE$">
<meta name="twitter:description" content="<?substr($META_DESCRIPTION$,34,strpos(substr($META_DESCRIPTION$,34),'>')-3)?>">
<meta name="twitter:url" content="$HOME_PAGE_LINK$<?substr($DESC_LINK$,1)?>" />
<meta name="twitter:image" content="<?if($PHOTO$)?>$HOME_PAGE_LINK$<?substr($PHOTO$,1)?><?else?>$HOME_PAGE_LINK$<?substr($PHOTO_1$,1)?><?endif?>" />

Публикация фотографий из модуля «Фотоальбомы»

В шаблон «Страница с полной фотографией и комментариями» между тегами <head></head> вставьте код:

<link rel="image_src" href="<?substr($HOME_PAGE_LINK$,0,-1)?><?substr($FULL_PHOTO_DIRECT_URL$,0,strpos($FULL_PHOTO_DIRECT_URL$,"?"))?>" />
<meta name="title" content="$PHOTO_NAME$" />
<meta name="description" content="$PHOTO_DESCR$" />

Для Facebook:

<meta property="og:locale" content="ru_RU" />
<meta property="og:type" content="image" />
<meta property="og:title" content="$PHOTO_NAME$" />
<meta property="og:description" content="$PHOTO_DESCR$" />
<meta property="og:url" content="$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>" />
<meta property="og:image" content="<?substr($HOME_PAGE_LINK$,0,-1)?><?substr($FULL_PHOTO_DIRECT_URL$,0,strpos($FULL_PHOTO_DIRECT_URL$,"?"))?>" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />

Для Twitter:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="$PHOTO_NAME$">
<meta name="twitter:description" content="$PHOTO_DESCR$">
<meta name="twitter:url" content="$HOME_PAGE_LINK$<?substr($ENTRY_URL$,1)?>" />
<meta name="twitter:image" content="<?substr($HOME_PAGE_LINK$,0,-1)?><?substr($FULL_PHOTO_DIRECT_URL$,0,strpos($FULL_PHOTO_DIRECT_URL$,"?"))?>" />

Если изображение не подгружается при постинге, замените $FULL_PHOTO_DIRECT_URL$ на $PHOTO_URL$ .

Важно! Перед тем как делиться фотографией в Twitter или «ВКонтакте», убедитесь, что вы несколько раз пропустили URL материала через валидатор. Это необходимо для актуализации кеша и корректного отображения изображения.

Постинг в соцсети: настраиваем корректное отображение репоста