Установка кнопок Поделиться от Яндекса. Без плагинов

Кнопки Поделиться — вещь нужная! И должны быть на любом информационном сайте или блоге. Существует масса сервисов таких кнопок. И не только сервисов…

Какие выбрать кнопки, дело ваше. Все они удобные, все красивые. Проблема только в их установке. Самый удобный способ — использовать соответствующий плагин, но для любителей все делать без плагинов есть другой просто способ.

к содержанию

Установка кнопок после контента

Простая функция. Добавляем в файл functions.php и все

function artabr_add_button_share($content){ 
	if( !is_single() ) return $content;
	$button_share = '<div class="share-ya"><h4>Поделиться</h4>
	<script type="text/javascript" async="async" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="big" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"></div>
	</div>';
	return $content . $button_share;
}
add_filter('the_content', 'artabr_add_button_share' );
к содержанию

Установка кнопок до статьи (под заголовком)

button1

function artabr_add_button_share($content){ 
	if( !is_single() ) return $content;
	$button_share = '<div class="share-ya"><h4>Поделиться</h4>
	<script type="text/javascript" async="async" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="big" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"></div>
	</div>';
	return $button_share . $content ;
}
add_filter('the_content', 'artabr_add_button_share' );
к содержанию

Установка и под статьей и над статьей

button3

function artabr_add_button_share($content){ 
	if( !is_single() ) return $content;
	$button_share = '<div class="share-ya"><h4>Поделиться</h4>
	<script type="text/javascript" async="async" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="big" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"></div>
	</div>';
	return $button_share . $content . $button_share;
}
add_filter('the_content', 'artabr_add_button_share' );
к содержанию

Новые кнопки поделиться от Яндекса

button4

Еще раз напоминаю: функцию добавляем в файл functions.php

function artabr_add_button_share2($content){ 
	if( !is_single() ) return $content;
	$button_share = '<div class="share-ya"><script async="async" src="https://yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-counter="" data-services="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-lang="ru" data-size="s" data-url="'.get_permalink().'" data-title="'. get_the_title().'" data-description="" data-image=""></div>
	</div>';
	return $button_share . $content;
}
add_filter('the_content', 'artabr_add_button_share2' );
Этим кодом кнопки появятся под заголовком
к содержанию

Делаем кнопки большими

Новые кнопки от Яндекса можно сделать и больше. Для этого добавляем в файл style.css немного стилей, которые изменят размер

.ya-share2__container_size_s .ya-share2__counter {
    font-size: 13px !important;
    padding: 8px 6px 0 6px !important;
}
.ya-share2__container_size_s .ya-share2__icon {
    height: 30px !important;
    width: 30px !important;
    background-size: 30px 30px !important;
}

Или просто измените немного сам код и добавьте атрибут  data-size=»m» и код кнопок будет выглядеть так

<div class="share-ya"><script async="async" src="https://yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-counter="" data-services="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-lang="ru" data-size="m" data-url="'.get_permalink().'" data-title="'. get_the_title().'" data-description="" data-image=""></div></div>

Таким способом можно установить любые кнопки сторонних сервисов: Pluso, Uptolike и т.д.

к содержанию

Кнопки Поделиться в анонсах на главной и страницах рубрик

Для этого надо добавить дополнительную функцию

add_filter('get_the_excerpt', 'artabr_add_button_share_loop');
function artabr_add_button_share_loop($excerp) {
	$button_share = '<div class="share-ya"><script async="async" src="https://yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-counter="" data-services="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-lang="ru" data-size="s" data-url="'.get_permalink().'" data-title="'. get_the_title().'" data-description="" data-image=""></div>
	</div>';
    return $button_share . $excerp;
}

Но проще, вывести такие кнопки добавив нужный код в файл index.php и archive.php

Есть вопросы? Спрашивайте в комментариях. Всегда рад помочь.

Всегда ваш, Артем.

23 комментариев
  • Дмитрий

    20.11.2015

    Отличная штука. Берем на вооружение. Тормозов не замечено на тестовом блоге. Плагин пиши — нет ведь нормальных решений (особенно для ВК).

    • Артем

      20.11.2015

      С этими кнопками достаточно и короткой функции, а вот под Лайкли, надо написать…

  • Дмитрий

    08.12.2015

    Привет
    Похоже они уже вывели из бета-теста новые кнопки. Посмотри на новый код в оф. сервисе Яндекса
    https://tech.yandex.ru/share/

    Там другой адрес у скрипта (на 2 заканчивается)

    • Артем

      08.12.2015

      О! Это хорошо… У меня тот скрипт и есть, так что все нормуль. Они вообще оказывается обновили полностью сервис, правда теперь твиттер без счетчиков, ну да ладно, подождем, может измениться, наверняка еще допиливают

  • Андрей Масалкин

    01.02.2016

    Отказался от их кнопок. Очень долго подгружается их скрипт, в результате время загрузки сайта возрастает. Пользуюсь автономным вариантом:)

    • Артем

      01.02.2016

      Если асинхронно подключать, то никак на скорость не влияет, Так что кому как, у всех фломастеры разные

  • Александр

    22.02.2016

    а как добавить кнопки под заголовком анонса статьи?
    то есть, есть главная странница со списком статей (заглавие и немного текста из статьи), хотелось бы что б кнокпи отображались после заглавия, как тут. Тут я смог реализовать с помощью плагина addthis , но хотелось бы с помощью кнопоко яндекса, а то жрёт много ресурсов и влияет на скоростью http://s010.radikal.ru/i312/1602/9b/6f1d70636627.jpg

    • Артем

      22.02.2016

      Добрый день! Самый простой способ — в файле index.php добавить нужный код.
      Или можно дополнительную функцию добавить для вывода кнопок в анонсах. Добавил в статью решение, смотрите здесь

  • Александр

    23.02.2016

    К сожалению не сомг добится больших размеров кнопок, как у вас в посте. Пробовал вставлять код в style.css, но без эфекта. Вопрос, насколько я понимаю параметр m в data-size=»m» означает медиум (средний). Пробовал по аналогии поставить «b» — кнопки перестали отображатся вовсе. Только контейнер остался. Что-то делаю не так?

    • Артем

      23.02.2016

      Скорее всего стили темы не дают принять нужный внешний вид…

  • Александр

    23.02.2016

    Посмотрите пож-ста, что не так с кодом http://tastycake.xyz/recipes/zelenyiy-grecheskiy-salat/ . Необходимо:
    1. Убрать блок/рамку вокруг кнопок
    2. Убрать разрвы между текстом «Поделиться» и кнолпками
    3. Увеличить размер.
    Сделать всё так как у вас вверху странницы: кнопки большие и сразу после заглавия без рамок и разрывов. Вот мой код, который я использую:
    function artabr_add_button_share2($content){
    if( !is_single() ) return $content;
    $button_share = ‘Поделиться data-lang=»ru» data-size=»b» data-url=»‘.get_permalink().'» data-title=»‘. get_the_title().'» data-description=»» data-image=»»>
    ‘;
    return $button_share . $content . $button_share;
    }
    add_filter(‘the_content’, ‘artabr_add_button_share2’ );

    • Артем

      23.02.2016

      Код правильный. Надо просто стили править… Могу поправить, но это будет платно. Пишите в личку, обсудим

  • Рита Молчанова

    20.06.2016

    Добрый вечер! Пыталась разобраться все делала по вашей статье. Кнопки появлялись в хедере почему то. Хотя выбирала код после контента. Также пробовала и в файл index.php. Тут вообще консоль покосилась. Вот скриншот http://prntscr.com/biu1a6. Это мой тестовый сайт. С плагином без проблем все получается. Но не хочется сайт грузить.

    • Артем

      20.06.2016

      Добрый вечер! А куда вы данную функцию вставляете и как?

      • Ольга

        18.03.2017

        Артем, попутный вопрос на твой вопрос Рите… А КУДА надо вставить код? Извиняюсь за смешную трактовку, но в какое место файла надо «всунуть» код?
        Нашла только: Простая функция. Добавляем в файл functions.php и все. А куда именно его можно вставить? если есть видео или статья на эту тему, то дай ссылку. поиска по сайте нет, — не нашла ответа для себя.

        • Артем

          18.03.2017

          Хороший вопрос) Код в файл functions.ph добавляется в любое место файла. Чаще всего в самый низ. Только обратите внимание, если в самом низу есть знак ?> то ДО него, это важно. Если такого значка нет (в новых темах его не используют), то просто в конец файла

          • Ольга

            18.03.2017

            Спасибо! Ты, как всегда оперативен с ответами. Но такие вопосы часто возникают, и надеюсь не у меня одной. Ты быстро и доступно разъясняешь, но иногда наверное забываешь, что если сам знаешь какую-то (на твой взляд) мелочь, то кто-то не знает.
            Есть еще вопросы, но здесь не в тему, опасаюсь гнева;)) Отпишусь под видео с уроками по теме Натяжка HTML на WordPress. Часть#1. Подготовка окружения.
            И пожалуйста, дай ссылочку на видос или статью по чистке темы. У меня ссылка на вордпресс в подвале так и висит…

          • Артем

            18.03.2017

            Ну да есть такое)) Некоторые простые мелочи забываю рассказывать)
            Насчет ссылки — нет у меня такого видео и статьи нет. Такие ссылки вещь в себе, каждый разраб реализует по своему и надо для каждой темы искать. Можно на эту тему стрим провести…

  • Мастер

    22.04.2017

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

  • Анатолий

    23.04.2017

    Добрый день,Артем! Смотрел видео «Как добавить комментарии от Вконтакте и Фейсбук на wordpress сайт + кнопки социальных сетей» — сделал,все получилось,во всех рубриках и старницах,где была стандартная форма комментов от WP,благополучно добавились формы от VK и FB.Вопрос вот в чем: как их установить на отдельную страницу (где не предусмотрено стандартной формы отзывов),пример: _http://prntscr.com/ezmzzw Нужно новый плагин устанавливать или можно это сделать с уже установленным Vkontakte API — сейчас он переименован Social API. Спасибо!

    • Артем

      23.04.2017

      Добрый! Это не мое видео, и судя по всему данная установка через плагин производится. Значит надо смотреть настройки или уже как-то с кодом плагина разбираться. Скажите что за плагин, будет время попробую разобратся

  • Дизайнер

    19.05.2017

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

    • Артем

      21.05.2017

      Рад, что все получилось

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *
php js HTML CSS Code

Подписывайся!

Подписывайся!

Подписывайтесь на новости сайта, чтобы ничего не пропустить

Спасибо, что подписались!