«Некоторые тонкости установки на сайт кнопок «Поделиться» (share) социальных сетей»

Раздел: Социальные сети

Сегодня, в эпоху социальных медиа, принято давать посетителям сайта возможность поделиться с друзьями. Мы делали промо-страницу к Дню Рождения интернет-магазина Allsoft и нам нужно было установить кнопки «Поделиться» от Facebook, Twitter, Одноклассников, Вконтакте и Мой мир.

С первого взгляда показалось — что может быть тут особенного — поставил готовый html/js код и готово? Но тонкости оказались в деталях: что если для одной соц. сети нужно передавать один текст, а для другой — другой? Как правильно передать картинку и описание во все сети? А если несколько разных вариантов текста и картинок на одной странице? Как почистить уже закешированную информацию о ссылке в соц.сети? На все эти вопросы нам пришлось найти ответы, которые и вы сможете узнать из этой статьи.

Самый простой вариант:
Чтобы поставить блок «Поделиться» на страницу своего сайта, достаточно зайти наhttp://api.yandex.ru/share/ и через мастер сформировать нужный вид виджета с кнопками — получится код типа

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div>

С помощью этого кода пользователь на сайте сможет поделиться в сети ссылкой на него, которая будет выглядеть примерно так:

Здесь фраза «Кто хочет купить софт со скидкой 8% по акции?» написана самим пользователем, а ниже — то, как ссылка на сайт выглядит в соц.сети. Не сильно красиво, правда?

Передача в социальную сеть картинки, заголовка и описания.
Сделать это можно с помощью мета-тегов, например:

 <meta property="og:image" content="http://allsoft.ru/bitrix/templates/allsoft2011/images/8let/dragon_normal.jpg" />
<meta property="og:title" content="Я – лицензионный Дракон!" />
<meta property="og:description" content="Результат теста: Дракон почти Ваш «конек»! Вы пока не можете преподавать Драконоведение, но на верном пути!" />

тогда ссылка в соц.сети будет выглядеть так:

Здесь «Сегодня день Рождения allsoft.ru — 8 лет :)» — текст написанный пользователем, остальное — информация из мета-тегов. Подробнее об этих мета-тегах можно прочитать на странице Facebook developers.facebook.com/docs/share/, остальные соц.сети тоже их вполне понимают.

Как вообще работает этот механизм:
1. Когда пользователь нажимает кнопку, виджет передает серверу соц.сети ссылку на страницу.
2. Сервер соц. сети сам обращается по этой ссылке и считывает информацию о странице — заголовок, описание, картинку.
3. Сервер соц. сети кеширует на своей стороне информацию о странице и отображает на страницах соц.сети

Какие в связи с этим могут возникнуть проблемы во время разработки:
1. Если вы разрабатываете сайт на сервере, недоступном извне, закрытом http-авторизацией, или локально — соц. сеть не сможет получить информацию о странице, либо вообще не позволит поделиться ссылкой (например, так работает «Одноклассники»), либо отобразит ее без заголовка и описания (как на картинке в первом, самом простом варианте)
2. После того как сервер соц.сети уже один раз обратился к странице, он закешировал информацию о ней — следовательно, если вы захотите изменить заголовок и описание и измените на стороне своего сайта, то в соц.сети оно уже не поменяется — она будет использовать ранее закешированную информацию. (Как это исправить — смотрим ниже.)

Как передавать разные описания для одной страницы.
Например, при создании промо-страницы на allsoft.ru с шуточным тестом потребовалось для разного количества баллов, набранных пользователем в тесте, передать в соц.сети разные описания. Так как описание страницы соц.сеть получает заходя по ссылке, то для разных описаний нужны разные ссылки. Кроме того, Twitter позволяет вставлять только 140 символов, поэтому для него нужно отдельное, более короткое, описание.

Для этого:
1. Для разных результатов теста мы должны передать в API блока «Поделиться» Яндекса разные ссылки. В нашем случае это были:http://allsoft.ru/promo/allsoft8let/?share=normal, allsoft.ru/promo/allsoft8let/?share=high, allsoft.ru/promo/allsoft8let/?share=low иhttp://allsoft.ru/promo/allsoft8let/ для блока вне теста.
2. Соответственно, в зависимости от переданных скрипту страницы параметров в url, страница должна формироваться с разными мета-тегами.
3. Для того, чтобы передавать отдельное описание для Twitter, нужно уже использовать другой формат API блока «Поделиться» Яндекса — не теги, а js-код:

	new Ya.share({
	            element: 'ya_share_normal',
	                elementStyle: {
	                    'type': 'none',
	                    'quickServices': ['facebook','twitter','odnoklassniki','vkontakte','moimir']
	                },
	                link: 'http://allsoft.ru/promo/allsoft8let/?share=normal',
	                serviceSpecific: {
	                    twitter: {
	                        title: 'Результат теста: Дракон почти Ваш «конек»! Вы пока не можете преподавать Драконоведение, но на верном пути!'
	                   }
	            }
	    });

1. Здесь ya_share_normal — id элемента на странице (), в котором будет появляться блок с социальными кнопками, link — ссылка, плюс в serviceSpecific для твиттера указываем title, отличающийся от того, что находится в мета-теге og:title.

Таким образом, для задачи «3 разных результата теста плюс общая ссылка на страницу вне теста» у нас будет 4 тега:

<span id="ya_share_normal"></span>
<span id="ya_share_high"></span>
<span id="ya_share_low"></span>
<span id="ya_share"></span>

и 4 блока кода в JavaScript, как указано выше.

Как изменить закешированный соц.сетью заголовок и описание.
1. Для Facebook есть самый лучший способ: зайти на их дебаггер developers.facebook.com/tools/debug и ввести url своей ссылки — он отобразит информацию о странице и заодно сбросит кеш, который повлияет на кнопку «Поделиться».
2. Также можно, но не рекомендуется использовать: 1) добавление параметра к ссылке, например ?v=2 2) Использование bit.ly и аналогичных сервисов по сокращению ссылок. Подробнее о достоинствах и недостатках можно прочитать здесь (англ.): umairj.com/146/how-to-clear-facebook-shares-cache/
3. К сожалению, такого способа, как у Facebook, у других соц.сетей нет. Поэтому для них нужно использовать способ 2 с изменением ссылки или API блока «Поделиться» от Яндекса:

	    new Ya.share({
	            element: 'ya_share',
	                elementStyle: {
	                    'type': 'none',
	                    'quickServices': ['facebook','twitter','odnoklassniki','vkontakte','moimir']
	                },
	                title: 'Allsoft 8 лет! — Акция с 11 по 31 мая!',
	                description: 'Пройдите праздничный тест и примите участие в розыгрыше',
	                link: 'http://allsoft.ru/promo/allsoft8let/',
	                serviceSpecific: {
	                    twitter: {
	                        title: 'Allsoft 8 лет! — Акция с 11 по 31 мая!'
	                   }
	            }
	    });

При передаче через API другого title и description соц.сети обновляют закешированную ранее из мета-тегов информацию (за исключением Facebook — но для него есть способ 1)
Также, наверное, можно передавать и image для изменения картинки.

Ну вот, кажется, и все. Добро пожаловать на allsoft.ru/promo/allsoft8let/ и торопитесь делиться этой ссылкой с друзьями – сегодня последний день акции!

Автор: Владимир Хворостов — Веб-разработчик Softline

Дата публикации: 2012-05-31

Источник