Webmaster

Рецепт по правильному использованию кнопок социальных сетей с помощью Yandex.Api

Казалось бы, кнопки социальных сетей и так установлены на каждом сайте, потому что сделать это проще простого. Но тут есть несколько хитростей.

Вместо того чтобы ставить каждую кнопку отдельно или использовать 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;
}

Так вы можете адаптировать внешний вид кнопок под любой дизайн.

Скачать CSS и Картинку

Оцените статью
  • Денис Барсков

    Пацаны ваще ребята. Всё так здорово прикрутилось. Инструкция рулит!

  • Алекс

    а будет ли сильная заспамленность ссылками в статье, если у меня в каждой из них стоит по несколько ссылок на соцсети? ноиндекс и нофолоу не использую, так как боюсь навредить этим эффекту от перелинковки сайта.

  • Артём

    Подскажите, как изменить стиль кнопки "Поделиться"? Я хочу, чтобы она была вертикальной картинкой сбоку страницы. Вот такой стиль:
    position: fixed;
    top:185px;
    width: 44px;
    height: 119px;
    z-index: 10010;
    background:rgba(0,0,0,.2) url(../img/share.png) no-repeat 100% 100%;
    transition:margin-left 0.5s linear;
    box-shadow:5px 5px 20px -2px rgba(0,0,0,.3);
    cursor: pointer;

    Я пробовал накинуть стиль на классы yashare-auto-init, b-share, b-share__handle, бесполезно, кнопка все равно проступает.

  • Дима

    Там когда перегружаете css property, надо !important ставить.

  • Sander

    Вроде бы реализовал, спасибо )
    (it.sander.su)

  • Sander

    P.S. Не на главной

  • Дима

    Пожалуйста.

    Кстати, из моего местоположения твой сайт не открывается, из за того что https://apis.google.com/js/plu... висит. Советую загружать все внешние скрипты через $.getScript. Тогда контент твоего сайта не будет зависеть от них.

  • Sander

    Хмм... какой браузер?

  • Дима

    Firefox12, для чистоты эксперимента проверил на IE7.

    Скрипт в 52 строчке на странице пытается загрузиться с apis.google.com. Не может, из за того Гугл.Апи в *моем* регионе сейчас лежит. Из за этого загрузка твоего сайта дальше заголовка у меня не идет.

  • Sander

    Ну у меня-то тоже не WP, но не статика, а просто самоделка... тоже поэтому грузится быстро...
    Про твою статику знаю, я по rss читаю.Будет время, тоже можно будет на discus перебраться... единственно только, не хочу старые комменты терять... + вроде как, сейчас они индексируются, много в них полезной инфы, а так пропадут для поисковиков..

  • Sander

    Красивое решение! Я его мельком в посте увидел тогда, но не вчитался. 
    Честно говоря, его и впрямь стоило бы оформить как проект... незнаю даже, чуть ли не продавать, но, как минимум, ссылочное этим нарастить...

  • Дима

     >> не хочу старые комменты терять... + вроде как, сейчас они
    индексируются, много в них полезной инфы, а так пропадут для
    поисковиков..

    Я эту проблему решил - у меня комменты вытягиваются
    Python'ом через Disquss Api, и добавляются в html статикой. А потом
    Disquss JavaScript'ом заменяет блок на свой, динамический. Можешь
    отключить JavaScript, посмотреть на каком-нибудь старом посте как оно без Disquss выглядит.

    Не как не доходят руки допилить это решение, и выложить для общего
    пользования. Плюс такое на php и для динамических сайтов было, видел
    где-то.

    Disquss того стоит. Очень удобно комментами через email
    управлять. Кстати. Там очень продвинутый инструмент для импорта,
    возможно и твой самописный движок поймет.

  • Дима

    Самоделки (ака custom solutions) рулят :)

  • Sander

    Спасибо. Повозился, вроде, исправил.
    Честно говоря, так мало времени сейчас. Пока вначале развивал блог, все что-то докручивал. А сейчас только бы раз в неделю выкладывать статью, а больше ничего не трогать. Ан нет, приходится крутить часто. Вон, например, была у мена авторизация на google friend connect - накрылась...

  • Дима

    Подтверждаю apis.google.com все еще лежит, it.sander.su - загружается.
    Да, у меня со временем та-же проблема. Но сейчас я решил блогом серьезнее заняться. Буду поддерживать, на комменты отвечать более оперативно :).

    Ты тоже не забрасывай, хороший блог, читаю иногда.

    Чтобы экономить время я у себя переделал теперь все в статику, как мне удобно. Теперь могу посты быстрее писать, вместо танцев с вордпрессом. Чем проще все устроено - тем легче чинить.

  • Sk8er

    Дмитрий, а расскажите пожалуйста как в одну строчку всё сделать красиво. :)

  • Дима

    Для классов:

      .b-share__handle, .b-share-icon {

    Просто уберите строчки:

        display: block !important;
        float: none !important;

    Будет как на картинке.

  • Sk8er

    Спасибо! :)

  • Alex

    Спасибо, надеюсь пригодится..

  • EvaStore

    Полуилось вроде как)

  • mavr69

    Мне так больше нравится, чем обычные кнопки Яндекса, попробую, спасибо.

  • Валентин

    Вопрос, а как заменить стандартный вид кнопок на собственный? А то я в скриптах нема...

  • Дима

    Заменяете картинку (1984.png) на собственную. В одном файле должны быть нарисованы все кнопки.

    В файле column.css:

    Для класса .b-share-icon прописаваете height и width - размеры новой кнопки.
    Для классов .b-share-icon_twitter, .b-share-icon_facebook, .b-share-icon_vkontakte в параметре background-position вместо чисел -62px, -42px, -20px пишите вертикальный сдвиг каждой кнопки на вашей картинке a также новую высоту (height).

  • Валентин

    Спасибо, буду разбираться.

    Понедельник, 17 декабря 2012, 15:30 от "Disqus" <[email protected]>:<[email protected]>

  • Леонид

    Спасибо, я тоже прикрутил. Но я сначала на share42.com набрал кнопки в такой же последовательности, как и у скрипта Яндекса, и подставил png который сгенерился на share42.com в подложку.

  • Тимофей

    Дима не понял как изменить вид социальных( Куда конкретно в CSS вставлять эти коды?

  • Дима

    Самый простой способ - добавить row.css (вертикальное расположение) или column.css (горизонтальное расположение) в тэг страницы. Добавил два примера в zip - скачайте файл еще раз.

  • Дмитрий

    А как можно вставить кнопки яндекса и вверху и внизу статьи, в двух местах? Когда так вставляю они просто пропадают (