Создать сайт бесплатно!
Сайт или магазин под ключ от 6900 рублей или помощь по сайту от 80 рублей.
Подробнее
Главная
Расширения
Постинг в соцсети: настраиваем корректное отображение репоста

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

  1. Отображение единого логотипа и описания репоста в соцсети “ВКонтакте”
  2. Отображение изображения для каждого репоста новости в соцсети “ВКонтакте”
  3. Отображение изображения и описания репостов новостей в Facebook
  4. Отображение единого логотипа и описания репоста в Twitter
  5. Примечания

Отображение единого логотипа и описания репоста в соцсети “ВКонтакте”

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

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

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

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

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

Для установки кода нам потребуется отредактировать шаблон “Страница материала и комментариев к нему”. Панель управления - Дизайн - Редактор - Новости сайта (“Блог”, “Каталог файлов” и “Доска объявлений”) - Страница материала и комментариев к нему. Найдите в шаблоне закрывающий тег </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_NAME$ на $ENTRY_TITLE$.
  • $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$" />
  • $IMG_URL1$ — это код изображения, которое вы прикрепили к материалу. Отображаться будет первое прикрепленное изображение. Если в материалах вы используете изображения из файлового менеджера или сторонние изображения, при постинге они отображаться не будут!
  • $ENTRY_NAME$ — используется для вывода названия материала в модулях “Новости сайта” и “Блог”.
  • Если вы настраиваете шаблоны модулей “Каталог файлов” или “Доска объявлений”, замените $ENTRY_NAME$ на $ENTRY_TITLE$.
  • $SOCIAL_DESCRIPTION$ — используется для вывода краткого описания материала, который вы подключили и настроили в настройках модуля “Постинг в соц. сети”.

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

Для правильного отображения репостов в социальной сети Facebook нужно использовать микроразметку Open Graph. Стандарт Open Graph используется такими соцсетями, как LinkedIn, “ВКонтакте” и др.

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

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

<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?>" /> 
  • meta property="og:title" — отвечает за заголовок материала. Для модулей “Новости” и “Блог” — это $ENTRY_NAME$. Для модулей “Каталог файлов” и “Доска объявлений” — $ENTRY_TITLE$.
  • meta property="og:description" — отвечает за описание материала.
  • meta property="og:image" — выводит общий логотип для материалов, если прописан код $SOCIAL_IMAGE_SRC$, или индивидуальное изображение для каждого материала, если прописан код $IMG_URL1$.
  • meta property="og:image:type" — размеры картинки. Параметры 220 и 160 вы можете изменить.

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

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

<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?>" />

Примечания

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

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

  • В старой панели управления. Перейдите в Панель управления - Главная - Настройки - Общие настройки - 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 в шаблон Страница товара между тегов <head>сюда</head> вставьте код:

<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, вам нужно в шаблон - Страницы товара между тегов <head>сюда</head> вставить код:

<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 в шаблон - Страница с полной фотографией и комментариями между тегов <head>сюда</head> вставьте код:

<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, вам нужно в шаблон - Страница с полной фотографией и комментариями между тегов <head>сюда</head> вставить код:

<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$,"?"))?>" />

Важно: Небольшое уточнение, перед тем как поделиться фотографией в Twitter или в том же Вконтакте, советовал бы несколько раз пропускать урл материала через валидаторы ссылки на которые указаны выше. Важно пропустить через валидатор, чтобы данные о материале обновились в кеше соц-сетей и чтобы они увидели реальные данные, а не кеш. Чтобы твиттер увидел фото к фотографии с фотоальбома, советовал бы через валидатор пропускать урл материала не меньше двух раз и после спокойно делиться твитом и фото должно отображаться корректно.