Все тонкости размещения кнопок социальных сетей
Социальные сети настолько глубоко проникли в нашу жизнь, что мы по привычке найдя в сети что-то интересное делимся этим с нашими друзьями. Многие владельцы собственных сайтов интегрируют свои проекты с социальными сетями. Сегодня мы опишем подводные камни на этом пути.
Для размещения кнопок на своем сайте прежде всего вам придется изучить раздел “Помощь” для каждой социальной сети:
Facebook https://developers.facebook.com/docs/plugins?locale=ru_RU
Google+ https://developers.google.com/+/web/+1button/
VKontakte https://vk.com/dev/Share
Twitter https://dev.twitter.com/web/overview
Метод достаточно не прост в реализации тем более если вы не программист, но не отчаивайтесь, есть пути гораздо проще.
Сервисы кнопок социальных сетей
Приведем примеры самых популярных сервисов:
Яндекс кнопки https://tech.yandex.ru/share/ (клики по кнопкам можно увидеть в отчетах Я.Метрики)
Из зарубежных:
Есть сервисы как платные, так и бесплатные. Есть плюсы и минусы, но нам кажется тут на вкус и цвет. С сервисами все просто, регистрируетесь, получаете код, вставляете на сайт и все, кнопки выводятся в нужном дизайне.
Также у сервисов есть большое преимущество, они отображают статистику кликов по кнопке в едином интерфейсе, не нужно бегать по социальным сетям, чтобы посмотреть статистику кликов.
Формируем красивую публикацию
Установив все коды на сайт, у нас стали отображаться кнопки для социальных сетей и казалось бы все здорово, но при нажатии на кнопку "Поделиться" нередко можно увидеть следующую картину:
В окне «Поделиться» просто нет картинки и соответственно кликабельность такого материала падает в разы. Оказывается, есть специальные мета-теги для социальных сетей. И как вы можете догадаться для каждой социальной сети свои мета-теги.
Facebook использует Open Graph:
<meta property="og:title" content="Название страницы"/> <meta property="og:description" content="Описание"/> <meta property="og:image" content="https://website.com/image.png"/> <meta property="og:url" content="http://www.site.com"/>
Все теги Open Graph вы можете найти по ссылке: https://developers.facebook.com/docs/reference/opengraph/object-type/article
Необходимо так же в коде сайта дополнить начальный тег новым пространством имен:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#">
Проверка тут: https://developers.facebook.com/tools/debug/
Для Twitter:
<meta name="twitter:card" content="summary"/> <!-- Card type --> <meta name="twitter:title" content=" Название сайта"> <meta name="twitter:description" content=" Описание сайта "/> <meta name="twitter:image:src" content="https://website.com/image.png"/> <meta name="twitter:domain" content="website.com"/>
Проверка тут: https://cards-dev.twitter.com/validator
Для Google+:
<meta itemprop="name" content="Название сайта"/> <meta itemprop="description" content="Описание сайта"/> <meta itemprop="image" content="https://website.ru/image.png"/>
Проверить можно тут: https://developers.google.com/structured-data/testing-tool/
Если вы все сделали, то помните, что информация о размещаемых страницах в фейсбуке кешируется на 24 часа, поэтому если вы выполнили все вышеперечисленные рекомендации, но при попытке публикации информация о странице остается без изменения, ее необходимо вставить в дебаггер
Facebook https://developers.facebook.com/tools/debug и обновить, после чего информация о странице и картинка автоматически обновятся в т.ч. на уже опубликованных в соцсети страничках.
Размеры картинок для шаринга в социальных сетях
При использовании дебагера Facebook у нас для одной страницы ни как не хотела отображаться картинка. Изучив проблему по глубже выяснилось: у каждой социальной сети свои требования к минимальным размерам картинок для шаринга страницы.
Facebook
https://developers.facebook.com/docs/sharing/best-practices#images
Image Sizes
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.
Twitter
https://dev.twitter.com/cards/types/summary-large-image
A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card should be at least 280px in width, and at least 150px in height. Image must be less than 1MB in size.
VK
https://vk.com/dev/share_details
Если на публикуемой странице есть тег <link rel="image_src" href="...">, то адрес изображения для иллюстрации будет взят из него, иначе будут взяты первые 8 тегов <img src="...">, и из них предложены в качестве иллюстрации те картинки, размер которых по ширине и высоте превышает 130 пикселей. Если картинка больше 537 пикселей в ширину, то на сайте ссылка будет сопровождать увеличенной картинкой.
Google+ с картинками проблем не возникало, поэтому требований не знаем, но уверены, что они точно есть.
Если у вас остались вопросы, всегда готовы помочь и проконсультировать.
Array
(
[ID] => 636
[IBLOCK_ID] => 17
[NAME] => Все тонкости размещения кнопок социальных сетей
[IBLOCK_SECTION_ID] => 78
[IBLOCK] => Array
(
[ID] => 17
[~ID] => 17
[TIMESTAMP_X] => 31.10.2016 17:46:45
[~TIMESTAMP_X] => 31.10.2016 17:46:45
[IBLOCK_TYPE_ID] => news
[~IBLOCK_TYPE_ID] => news
[LID] => s1
[~LID] => s1
[CODE] => blogs
[~CODE] => blogs
[NAME] => Блоги
[~NAME] => Блоги
[ACTIVE] => Y
[~ACTIVE] => Y
[SORT] => 200
[~SORT] => 200
[LIST_PAGE_URL] => /blogs/
[~LIST_PAGE_URL] => /blogs/
[DETAIL_PAGE_URL] => #SITE_DIR#/blogs/#SECTION_CODE#/#ELEMENT_CODE#/
[~DETAIL_PAGE_URL] => #SITE_DIR#/blogs/#SECTION_CODE#/#ELEMENT_CODE#/
[SECTION_PAGE_URL] => #SITE_DIR#/blogs/#SECTION_CODE#/
[~SECTION_PAGE_URL] => #SITE_DIR#/blogs/#SECTION_CODE#/
[CANONICAL_PAGE_URL] =>
[~CANONICAL_PAGE_URL] =>
[PICTURE] =>
[~PICTURE] =>
[DESCRIPTION] =>
[~DESCRIPTION] =>
[DESCRIPTION_TYPE] => text
[~DESCRIPTION_TYPE] => text
[RSS_TTL] => 24
[~RSS_TTL] => 24
[RSS_ACTIVE] => N
[~RSS_ACTIVE] => N
[RSS_FILE_ACTIVE] => N
[~RSS_FILE_ACTIVE] => N
[RSS_FILE_LIMIT] => 10
[~RSS_FILE_LIMIT] => 10
[RSS_FILE_DAYS] => 7
[~RSS_FILE_DAYS] => 7
[RSS_YANDEX_ACTIVE] => N
[~RSS_YANDEX_ACTIVE] => N
[XML_ID] =>
[~XML_ID] =>
[TMP_ID] => 477ce1b848b3b44b27af890fa8f4a9f4
[~TMP_ID] => 477ce1b848b3b44b27af890fa8f4a9f4
[INDEX_ELEMENT] => Y
[~INDEX_ELEMENT] => Y
[INDEX_SECTION] => Y
[~INDEX_SECTION] => Y
[WORKFLOW] => N
[~WORKFLOW] => N
[BIZPROC] => N
[~BIZPROC] => N
[SECTION_CHOOSER] => L
[~SECTION_CHOOSER] => L
[LIST_MODE] => C
[~LIST_MODE] => C
[RIGHTS_MODE] => S
[~RIGHTS_MODE] => S
[SECTION_PROPERTY] => N
[~SECTION_PROPERTY] => N
[PROPERTY_INDEX] => N
[~PROPERTY_INDEX] => N
[VERSION] => 1
[~VERSION] => 1
[LAST_CONV_ELEMENT] => 0
[~LAST_CONV_ELEMENT] => 0
[SOCNET_GROUP_ID] =>
[~SOCNET_GROUP_ID] =>
[EDIT_FILE_BEFORE] =>
[~EDIT_FILE_BEFORE] =>
[EDIT_FILE_AFTER] =>
[~EDIT_FILE_AFTER] =>
[SECTIONS_NAME] => Разделы
[~SECTIONS_NAME] => Разделы
[SECTION_NAME] => Раздел
[~SECTION_NAME] => Раздел
[ELEMENTS_NAME] => Статьи
[~ELEMENTS_NAME] => Статьи
[ELEMENT_NAME] => Статью
[~ELEMENT_NAME] => Статью
[EXTERNAL_ID] =>
[~EXTERNAL_ID] =>
[LANG_DIR] => /
[~LANG_DIR] => /
[SERVER_NAME] => www.atrix-media.ru
[~SERVER_NAME] => www.atrix-media.ru
)
[LIST_PAGE_URL] => /blogs/
[~LIST_PAGE_URL] => /blogs/
[SECTION_URL] =>
[CANONICAL_PAGE_URL] =>
[SECTION] => Array
(
[PATH] => Array
(
)
)
[IPROPERTY_VALUES] => Array
(
[SECTION_META_TITLE] => Статьи из практики SEO оптимизатора
[SECTION_META_KEYWORDS] => практика SEO
[SECTION_META_DESCRIPTION] => Делимся практическим опытом SEO оптимизаторов компании. Следим за новостями отрасли.
)
[TIMESTAMP_X] => 16.11.2016 17:08:34
[META_TAGS] => Array
(
[TITLE] => Все тонкости размещения кнопок социальных сетей
[ELEMENT_CHAIN] => Все тонкости размещения кнопок социальных сетей
[BROWSER_TITLE] => Тонкости размещения на сайте кнопок социальных сетей
[KEYWORDS] => кнопки социальных сетей, социальные сети
[DESCRIPTION] => Хотите разместить на сайте социальные кнопки, но не знаете, с чего начать, мы постарались максимально полно рассказать об этом в нашей статье
)
)