Казалось бы, кнопки социальных сетей и так установлены на каждом сайте, потому что сделать это проще простого. Но тут есть несколько хитростей.
Вместо того чтобы ставить каждую кнопку отдельно или использовать addthis.com (или даже odnaknopka.ru) лучше всего выбрать Блок «Поделиться» от Yandex. И вот почему:
- JavaScript и HTML код от Яндекса - минималистичен. Если вставлять код кнопок по отдельности, или с помощью addthis.com, каждая кнопка будет тянуть тонны бесполезного JavaScript'а, который еще не известно что сделает на вашей странице (уж не ускорит точно).
Статистика на Яндекс.Метрике
- Новые посты на вашем блоге с Яндекс кнопками почти мгновенно попадают в индекс. Как только Яндекс узнает о новом url на котором установлены кнопки, страница сразу становятся на очередь в индексацию.
- Если у вы пользуетесь метрикой от Яндекса, вас будет доступна удобная статистика по нажатию кнопок.
- Возможна асинхронная загрузка. Когда какой нибудь из социальных сервисов ляжет, или просто будет заблокирован у конкретного посетителя, то его загрузка будет тормозить а то и вообще останавливать загрузку вашего сайта. С Яндексом же, вы просто можете отметить места где нужны кнопки элементом div:
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareLink=" < url страницы которую шарим >" data-yashareTitle="title" data-yashareQuickServices="gplus,twitter,facebook,vkontakte"></div>
- а в самом низу страницы, когда все содержание вашего сайта уже будет загружено, вызвать асинхронную загрузку скрипта с помощью jQuery, который заменит вышеупомянутые div'ы на кнопки:
<script> $.getScript("http://yandex.st/share/share.js"); </script>
- Можно легко повесить свой JavaScript метод на нажатие кнопок:
<script> $.getScript("http://yandex.st/share/share.js", function(data, textStatus, jqxhr) { $(".yashare-auto-init").click(function() { alert('share button was pressed'); }); }); </script>
- Я использую для личной статистики, например. Ну или сообщение с благодарностью показывать можно, тоже вариант :)
- Кнопки Яндекса - это один сервис, который уже потом редиректит на соответствующую соцсеть. Я не хочу сливать свою статистику посещений сразу Фейсбуку, Контакту, Addthis, да и еще черт знает кому через их партнерские соглашения. А Яндекс и так все про мой блог знает :).
Единственный минус - кнопки маленькие, и в стандартной форме нельзя изменить их внешний вид. Но это легко исправить :)
Изменить внешний вид кнопок можно переопределением CSS:
- Чтобы кнопки располагались в одну строку:
.b-share__handle, .b-share-icon { padding:2px !important; }
- Чтобы каждая находилась на своей строке:
.b-share__handle, .b-share-icon { float:none !important; display:block !important; padding:2px !important; }
Устанавливаем размер, и общую картинку, которая содержит внешний вид наших кнопок:
.b-share-icon { background: url("images/1984.png") no-repeat scroll 0 0 transparent !important; height: 20px !important; width: 62px !important; }
Делаем сдвиг картинки для кнопки каждой соцсети:
.b-share-icon_gplus { background-position: 0 0 !important; } .b-share-icon_twitter { background-position: 0 -62px !important; height:19px !important; } .b-share-icon_facebook { background-position: 0 -42px !important; height:19px !important; } .b-share-icon_vkontakte { background-position: 0 -20px !important; }
Так вы можете адаптировать внешний вид кнопок под любой дизайн.
