Большинство пользователей интернета имеют аккаунты в социальных сетях. Не использовать данный факт в раскрутке своего ресурса, было бы глупо. Для того, чтобы читатели могли размещать ссылки на ваш ресурс в своих аккаунтах, необходимо установить на сайте специальные кнопки.

Рассмотрим несколько различных вариантов.

API Блок «Поделиться»

Воспользуемся готовым сервисом от Яндекса 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

Ссылки

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

ПараметрОписаниеПример использования
data-url ссылка на страницу <div class="share42init" data-url="[(site_url)][~[*id*]~]">
data-title заголовок страницы <div class="share42init" data-title="[*pagetitle*]">
data-image ссылка на изображение <div class="share42init" data-image="[(site_url)][*img*]">
data-description описание к странице <div class="share42init" data-description="[*description*]">

  • Простота подключения
  • Большое количество кнопок
  • Счетчики кнопок
  • Два типа панели (горизонтальная, вертикальная)
  • Три размера иконок (32х32, 24х24, 16х16)

  • Дизайн кнопок не меняется

Решения для MODX

Сниппет 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>

  • "Родные" кнопки

  • Каждую кнопку придется подключать отдельно
  • Подключение сторонних скриптов
  • Разный дизайн и размер кнопок

Social Likes

Ссылки

Красивые кнопки «лайков» со счётчиками в едином стиле для социальных сетей: 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>

  • Настраиваемый дизайн
  • Простота подключения

  • Небольшое количество кнопок

И другие сервисы...

Ссылки

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

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

Поделитесь ссылкой

Статистика

Яндекс цитирования
© 2011 - 2023 Школа MODX
Напишите нам в Telegram