Кнопки соцсетей Кнопки соцсетей для вашего сайта

Воспользуемся готовым сервисом от Яндекса API → Блок «Поделиться». Переходим по ссылке, выбираем необходимые иконки и внешний вид блока. Копируем получившийся код, после этого создаем чанк share и вставляем туда скопированный код. Теперь осталось вызов чанка

{{share}}

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

Но есть один ньюанс,  код от яндекса использует атрибуты которые поддерживаются HTML5 и если ваш сайт не соответствует стандарту HTML5, то валидаторы будут ругаться. Не беда, обращаемся к документации Блока «Поделиться» от Яндекса, и находим более продвинутый способ установить эти же кнопки.

Сначала добавляем в наш head такой скрипт:

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>

В чанке share вместо кода от яндекса пишем:

<span id="ya_share1"></span>

Теперь самый сложный момент. Создаем, например, в Notepad++ новый документ, выбираем синтаксис Javascript и кодировку UTF-8, затем вставляем в этот документ следующий код:

new Ya.share({
element: 'ya_share1',
elementStyle: {
'type': 'none',
'border': true,
'quickServices': ['yaru', 'twitter', 'vkontakte', 'facebook', 'odnoklassniki', 'moimir', 'lj', 'friendfeed', 'moikrug']
},
link: 'http://www.yandex.com/',
title: 'Yandex — the best search engine in the universe!',
popupStyle: {
blocks: {
'Поделись-ка!': ['yaru', 'twitter', 'vkontakte', 'facebook', 'odnoklassniki', 'moimir', 'lj', 'friendfeed', 'moikrug']
},
copyPasteField: true
},
serviceSpecific: {
twitter: {
title: '#Yandex — the best search engine in the universe!'
}
}
});

Внешний вид блока меняется в 'type', значения type могут быть такими: none, button, link, icon.

В атрибутах title и link указываются название страницы и ссылка на эту страницу. Если вы хотите, чтобы пользователи добавляли только главную страницу, то указываете в качестве значений этих атрибутов ссылку на главную страницу и название сайта. Но если вы хотите, чтобы пользователи ссылались на разные страницы, то просто удалите title и link, тогда по умолчанию будут браться значения для текущей страницы.

Пример:

new Ya.share({
element: 'ya_share1',
elementStyle: {
'type': 'none',
'quickServices': ['yaru', 'twitter', 'vkontakte', 'facebook', 'odnoklassniki', 'moimir', 'lj', 'friendfeed', 'moikrug', 'blogger', 'evernote', 'gbuzz', 'greader', 'juick', 'liveinternet', 'yazakladki']
},
});

Сохраняем файл как share_ya.js в корневую папку нашего сайта, или любую другую, и подключаем его в head:

<script type="text/javascript" src="/путь_к_файлу/share_ya.js"></script>

Кнопки соцсетей подключены. Если у вас есть желание, можете поэкспериментировать с кодом скрипта. Ну и не забывайте иногда проверять обновления Блока «Поделиться» на предмет новых кнопок и тем.

Посмотреть статистику можно зарегистрировавшись на Яндексе в разделе Метрика. Для этого необходимо установить код счетчика Яндекс на своем сайте.

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

></div> 

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

></div>

Еще один скрипт для подключения кнопок социальных сетей Share42. Можно подключить более 40 различных кнопок трех размеров. Кнопки могут быть горизонтальным блоком или в виде плавающего вертикального блока. Установка этого блока очень хорошо расписана. Хотел бы уточнить лишь несколько моментов, относительно MODX Evolution - это настройка дополнительных параметров, которая выглядит примерно так:

Сниппет sRadio

[[sRadio]]

Сниппет Иконки социальных сервисов

[[Soc? &tpl=`soc`]]

Чанк soc:
<a rel="nofollow" class="social-ico ico-gp" href="#" onclick="window.open('https://plus.google.com/share?url=[+uri+]', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0');return false" title="Поделиться в Google+" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-ya" href="http://my.ya.ru/posts_add_link.xml?URL=[+uri+]&title=[+title+]" title="Поделиться в Я.ру" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-vk" href="#" onclick="window.open('http://vk.com/share.php?url=[+uri+]&title=[+title+]', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=554, height=421, toolbar=0, status=0');return false" title="Поделиться В Контакте" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-od" href="#" onclick="window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl=[+uri+]&title=[+title+]', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0');return false" title="Добавить в Одноклассники" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-fb" href="#" onclick="window.open('http://www.facebook.com/sharer.php?u=[+uri+]&t=[+title+]', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0');return false" title="Поделиться в Facebook" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-tw" href="#" onclick="window.open('http://twitter.com/share?text=[+title+]&url=[+uri+] ', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0');return false" title="Добавить в Twitter" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-mr" href="http://connect.mail.ru/share?url=[+uri+]&title=[+title+]" title="Поделиться в Моем Мире@Mail.Ru" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-lj"  href="http://www.livejournal.com/update.bml?event=[+uri+]&subject=[+title+]" title="Опубликовать в LiveJournal" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-ev" href="http://www.evernote.com/clip.action?url=[+uri+]&title=[+title+]" title="Добавить в Evernote" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-bd" href="http://bobrdobr.ru/add.html?url=http%3A%2F%2Fshare42.com&title=[+title+]" title="Забобрить" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-gb" 
href="http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=[+uri+]&title=[+title+]" title="Сохранить закладку в Google" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-zy" href="http://zakladki.yandex.ru/newlink.xml?url=[+uri+] &name=[+title+] " title="Добавить в Яндекс.Закладки" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-mm" href="http://memori.ru/link/?sm=1&u_data[url]=[+uri+]&u_data[name]=[+title+]" title="Сохранить закладку в Memori.ru" target="_blank"></a>
<a rel="nofollow" class="social-ico ico-bb" href="" onclick="return fav(this);" title="Сохранить в избранное браузера" target="_blank"></a>

В контакте - Сохранить

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://vk.com/js/api/share.js?86" charset="windows-1251"></script>

<!-- Put this script tag to the place, where the Share button will be -->
<script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
--></script>

В контакте - Мне нравится

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?98"></script>

<script type="text/javascript">
  VK.init({apiId: API_ID, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>

Фейсбук

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="http://site.ru" data-width="450" data-layout="button_count" data-show-faces="false" data-send="false"></div>

Мой Мир

<a target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'cm' : '1', 'sz' : '20', 'st' : '1', 'tp' : 'mm'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>

Google+1

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ru'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Твиттер

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru" data-size="large">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Одноклассники

<div id="ok_shareWidget"></div>
<script>
!function (d, id, did, st) {
  var js = d.createElement("script");
  js.src = "http://connect.ok.ru/connect.js";
  js.onload = js.onreadystatechange = function () {
  if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
    if (!this.executed) {
      this.executed = true;
      setTimeout(function () {
        OK.CONNECT.insertShareWidget(id,did,st);
      }, 0);
    }
  }};
  d.documentElement.appendChild(js);
}(document,"ok_shareWidget",document.URL,"{width:145,height:30,st:'oval',sz:20,ck:1}");
</script>

Красивые кнопки «лайков» со счётчиками в едином стиле для социальных сетей: Facebook, Twitter, Вконтакте, Одноклассники, Мой мир, Google+ и Pinterest.

<link rel="stylesheet" href="social-likes_classic.css">
...
<script src="jquery.min.js"></script>
<script src="social-likes.min.js"></script>
...
<div class="social-likes social-likes_light">
    <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
    <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
    <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
    <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
    <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
    <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

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

В этом разделе вы найдете ссылки на еще несколько сервисов, заслуживающих внимание. При таком разнообразии вам будет не трудно подобрать самый оптимальный вариант.