Ставим социальные кнопки от Яндекс и их 4 преимущества

Добрый день.

Сегодня начинаем рассматривать вопросы социализации сайта.

Первым моментом мы установим социальные кнопки и будем использовать для этого сервис социальных кнопок от Яндекса.

Данные кнопки мне очень понравились по нескольким причинами. Что это это за причины и, как произвести установку кнопок, узнаем далее.

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

Зачем нужны социальные кнопки

  • Во-первых, социальные кнопки при грамотном их использовании могут приносить неплохой дополнительный трафик на сайт;
  • Во-вторых, нажатие на кнопки вашими посетителями - это не просто бесполезные клики или простой трафик на сайт. Это еще и распространение вашего контента, который увидят больше людей и принесут вам некий статус, разбирающегося человека в вашей теме;
  • В-третьих, люди настолько сейчас социализированные, что они любят кликать на кнопки "Лайк" и "Мне нравится" и, поэтому, упускать распространение нашего контента глупо;

А вы вообще видели сайт, на котором сейчас нет социальных кнопок? Делайте выводы!

Ну а теперь я расскажу, почему же я все таки остановился на кнопках от Яндекса. Ну, по крайней мере, на момент написания этой статьи.

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

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

Об этом есть интересный кейс в видео ниже. Смотрите c 8:05.

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

Именно по этим причинам я решил их установить к себе на блог. Выглядят они очень гармонично.

Теперь покажу, как же вам установить такие кнопки.

к содержанию ↑

Устанавливаем на сайт

Самое сложное в их установке - размещение кода самих кнопок в файле вашего шаблона.

Чтобы выбрать нужные кнопки и скопировать их код, переходим по данной ссылке.

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

Это лично мой набор кнопок. Я считаю, что его более, чем достаточно. Можете выбрать все кнопки, но эффект от количества больше не станет.

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

После проставления нужных кнопок мы выбираем их вид. Выбор вида находится справа от списка кнопок.

Мне больше всего понравится вариант кнопок со счетчиками. Тут, как вам больше нравится.

Дальше мы берем код социальных кнопок.

Копируем код и вставляем в место, где необходимо их вывести.

Но прежде, чем это сделать, я предлагаю немного изменить этот код и дописать после открывающего тега <div> выравнивание, чтобы кнопки стояли по центру.

В конечном итоге данный код будет иметь вид.

Теперь можем разместить код в файле шаблона. Так как социальные кнопки должны быть в самом низу наших статей, то необходимо его вставить в файл single.php после вывода контента записи. Как определить место вставки кода в своем шаблоне, я подробно описал здесь.

У меня после вставки получилась следующая ситуация.

Я еще добавил текст перед социальными кнопками, заключив его в тег <p>тут текст</p>. В конечном варианте получилось следующее.

Можете смело брать мой код и размещать у себя на сайте, но только замените мой текст на свой. Уважайте себя.

После этого кнопки должны прекрасно работать. Но я предлагаю сделать последний штрих.

Если вы заметили, то данный код состоит из 2х частей:

  1. Скрипт, который грузит кнопки с Яндекса;
  2. Код, который их выводит на странице.

Я рекомендую разместить скрипт в файле footer.php, чтобы он загружался в последнюю очередь. Таким образом мы сделаем блог капельку быстрей. Скрипт я показал на скриншоте ниже.

Берем скрипт и вставляем его в файл footer.php перед закрывающим тегом </body>, при этом удалив его из файла single.php.

Вот и все. После этого соц. кнопки будут прекрасно работать и меньше грузить блог, чем у других.

В завершение даю видео-урок, который покажет, как все это проделать в два счета.

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

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

На этом все. Пишите в комментариях свои идеи для будущих материалов. Буду благодарен.

До свидания.

P.S. А какие социальные кнопки используете вы?

С уважением, Константин Хмелев.

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 22
  • Здравствуйте, вписал в код шаблона "Блок социальных кнопок от Яндекса" на сайт http://bastille.com.ua но столкнулся с одной неприятностью - размером кнопок, подскажите как увеличить размер иконок социальных сетей?

    • Здравствуйте! В коде соц кнопок будет следующая часть:

      data-yashareType="small"

      Меняем small на large и кнопки будут в максимальном размере, как у меня на примере в статье.

  • А почему сейчас вы отказались от кнопок? Не эффективно?

    • Кнопки от Яндекса, я считаю, что это самые эффективные кнопки, если сайт наполнен качественным контентом. Поэтому, убирать пока их не собираюсь. Разве, что я поменял вариант кнопок со счетчиком, на блок "Поделиться", так как со счетчиком кнопки грузились слишком долго, что замедляет загрузку страницы. Из-за этого было много отказов.

  • Извинюясь, совсем забыл, что adguard включен.

  • Добрый день Константин! У меня вопрос по файлам темы. Использую бесплатную тему Enlightenment, она есть на официальном сайте wordpress themes. В теме очень много функций, но нет таких файлов как single.php, page.php, archive.php и других основных, есть только comments и index.php. В index структура главной страницы, типа, популярной сегодня, landing page. Но есть много папок темы, где содержаться функциональные файлы content.php, general.php и других их много. Там весь код в function и не знаю куда вручную, допустим, вставить код социальных кнопок. Единственный вариант - выводить все дополнительное в сайдбар. Но хотелось бы на страницу. Я знаю, что отвечает за single,php файл content. Я бы вам показа код, но он большой очень

    • Если файл состоит только из функций, как в functions.php, то это не те файлы, которые нужно трогать. Необходимы структурные файлы, где четко видно, какие блоки выводятся и так далее.

      Файл можете отправить на почту "info@kostyakhmelev.ru", чтобы я взглянул на код. Но не обещаю, что гляну или скажу что-то дельное. Подсказать могу, если это в моих силах, но сидеть сутками и делать что-то за кого-то я не собираюсь. Вы должны это понимать)

      • Тогда я совсем запуталась... В корне темы лежат только index, footer, function, comments, 17 видов сайдбара и searchform. В других папках ничего по структуре не нашла, и , главное, автор молчит, обидно... Вот покажу файл index.php как выглядит:

        <main id="primary" >

        • Коды в комментариях корректно отображаться не будут. В файле index.php ничего и никогда вы не найдете, что должно касаться страниц записей, рубрик т.д. Index.php - это файл главной страницы.

      • Нашла часть кода, попробовала вставить кнопки, они показались в блоге, но с ошибками:

        function enlightenment_wp_actions() {
        if( ! is_singular() ) {
        add_action( 'enlightenment_after_header', 'enlightenment_archive_location' );
        }

        add_action( 'enlightenment_content', 'enlightenment_the_loop' );

        enlightenment_lead_entry_hooks();

        if( is_single() && 'post' == get_post_type() ) {
        add_action( 'enlightenment_entry_footer', 'enlightenment_entry_meta' );
        }

        • В файлы функций необходимо вставлять только функции. Другие коды работать не будут. Если не можете справиться с вашей темой, то рекомендую сменить ее на более простую.

  • Здравствуйте Константин! Прежде всего спасибо за полезные и доступные для новичков видеоуроки.
    Возможно Вы сможете дать мне совет. Использую шаблон Minimagazine в котором иконки социальных сетей уже имеются (facebook, twitter, RSS), однако нужная (vk) отсутствует. Сначала думал убрать те что есть и прикрутить по способу, расписанному в Вашем уроке, но при этом меняется дизайн шаблона (иконки красивые, с анимацией).
    Возможно ли отредактировать имеющийся значок в фотошопе (из f сделать vk)? Хотя они наверно подгружаются по внешней ссылке... Или имеется более оптимальный метод?
    Спасибо,
    Дмитрий

    • Здравствуйте. Как правило, на зарубежных официальных шаблонах WordPress социальная сеть вконтакте не предусмотрена, т.к. она там не распространена. Идут только фейсбук, твиттер и инстаграм иногда. Если вам фейсуб не нужен, тогда попробуйте это сделать. Хотя, более грамотным вариантом будет отредактировать шаблон, дописав в него функцию для соц. сети ВК. Если нет никакого опыта, то можете установить какой-нибудь плагин, где также все красиво, но это далеко не то, что нужно на сайте. Соц. кнопки должны не крутиться, например, а выполнять свою прямую функцию. И чем они проще, тем больше на них кликают. Самым оптимальным вариантом будет вообще взять прямые скрипты с самих соц. сетей и разместить их на сайте. Количество кликов сразу пойдет верх.

  • Константин, спасибо! Установил кнопки за минуту. Всё работает! То, что надо! Пока твой блог самый адекватный для меня, как для полного чайника!

  • И снова привет. Кнопки поставил, все работает отлично. Только вот текст перед кнопками выводится квадратиками. И ничего не могу с этим поделать(((

    • Привет. Перед тем, как вставить русские слова в файл, нужно выбрать правильную кодировку - UTF-8 (без BOM). Любые квадратики - это проблема кодировки.

  • Ну это понятно. Знать бы еще как это сделать. Кодировка самого файла, в который вставляю код ASCI. Я поменял ее на utf-8, после чего текст стал выводиться нормально, но по сайт в целом пошли конкретные глюки. Вернул кодировку обратно и глюки пропали, но текст снова квадратиками.

    • Какие глюки? Никогда не сталкивался с проблемами после смены кодировки, если шаблон нормальный и ничего больше не менялось. Все должно быть нормально, либо имеются какие-то жесткие косяки в шаблоне (неправильная верстка и т.д.)

  • Я менял кодировку самого файла, а не строки. То есть открыл его в блокноте, нажал сохранить, там по умолчанию стояла кодировка ASCI, я выбрал utf-8. Дальше начались глюки((

    • Я ничего другого и не имел ввиду, кодировка меняется для всего файла в целом. Меняю кодировку всегда в notepad и никогда проблем не возникало. В чем выражаются эти глюки?

  • Так вот где собака-то порылась!!! Нужно было преобразовывать в нотпаде а не в блокноте. Скачал нотпад, преобразовал в utf-8 без ВОМ и все заработало без глюков.
    Костя, огромное тебе спасибо. Очень помог!

    • Я всегда пользуюсь ноутпадом для абсолютно всех операций с файлами. Советую и вам.

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

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