Как установить кнопки социальных сетей без плагина

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

Плагин Social Share Buttons тормозит загрузку блога

Плагинов у меня вообще многовато стоит, так что я пытаюсь от них потихоньку избавляться, заменяя кодом. А тут на днях прочитала на блоге у Ирины Юр  про плагин P3 (Plugin Performance Profiler). Этот плагин оценивает, как влияют другие установленные плагины на скорость загрузки блога.

Установила, просканировала блог. Выяснилось, что Social Share Buttons создает самую большую нагрузку. Участь его оказалась предрешена.

Забегая вперед, скажу, что после его деактивации, скорость загрузки блога возросла более, чем на четверть. Была 207 миллисекунд, а стала — 147мс. А время загрузки плагинов в общем времени загрузки блога упало с 57% до 43%. Так что все я правильно сделала.

Где взять код кнопок социальных сетей

Если задать в поиске Яндекса или Гугла запрос «кнопки соцсетей без плагина» или что-то подобное, то вы увидите внушительный список разнообразных вариантов кода. И горизонтальные, и вертикальные, и в несколько рядов, большие и маленькие — кнопочки на любой вкус.

Меня больше всего привлек вариант, предлагаемый Pluso.

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

установить кнопки социальных сетей
Выбранные сети.

выбор сетей на кнопках
Выполнить дополнительные  настройки внешнего вида.

Настройки кнопок
После чего мы получаем код и копируем его себе в буфер обмена.

код кнопок социальных сетей

Теперь необходимо вставить этот код в нужное место.

Как и куда вставлять код кнопок социальных сетей

Если нам надо, чтобы кнопки выводились вместе с каждой записью, то надо отредактировать файл single.php.
Проще всего это сделать из админпанели WordPress. Заходим в Внешний вид-Редактор и находим файл single.php (Single Post, Одна запись, Одиночная запись, Сообщение отдельно — в зависимости от вашей темы WP).

Далее определяемся, где мы хотим видеть кнопки. На Pluso рекомендуют установить крупные кнопки ПЕРЕД статьей.

Где установить кнопки социальных сетей

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

Итак, поскольку я решила, что кнопки социальных сетей будут установлены после текста записи, я нашла в файле single.php «опорные точки»: <?php the_content (); ?> — функция выводящая сам текст записи и что-то относящееся к комментариям: Вы можете оставить комментарий, или ссылку на Ваш сайт.

Подвигав код кнопок выше-ниже между этими двумя строчками файла, опытным путем нашла оптимальное положение кнопок. Т.е. вставила сразу после <?php the_content (); ?>, сохранила файл single.php, посмотрела как это будет на странице блога смотреться. Что-то не понравилось — опустила чуть ниже. Опять сохранила…

Если надо, чтобы кнопки сверху были, то код кнопок вставляем выше <?php the_content (); ?>.

Как вариант, можно вставить кнопки в файл comments.php, тогда это надо делать в самом верху.

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

Если нужно установить кнопки соцсетей на главной, или на других статических страницах, то, соответственно надо добавить код в файлы index.php или page.php. Месторасположение кода устанавливайте опытным путем.

Внимание: вставляйте код между строками шаблона. Следите, чтобы он не попал между открывающей <и закрывающей > скобкой строки!

Еще один маленький нюанс

Я сперва решила, что установлю код, посмотрю, что получится, а уже потом отключу плагин Social Share Buttons.

Устанавливаю код кнопок социальных сетей, смотрю, что получилось. А ничего не изменилось. Нет новых кнопочек.
Пока я плагин Social Share Buttons не деактивировала, новые кнопочки у меня «не показывались». Как только его отключила, все на свои места встало.

Что дальше?

После замены плагина кнопок соцсетей кодом, плагин P3 показал, что следующие по длительности загрузки плагины — это Contact Form 7 и Yet Another Related Posts Plugin.

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

А вот что делать со связанными постами я пока не знаю. Может есть какой другой плагин менее тяжеловесный, или код рабочий… Если у кого есть идеи — буду рада их услышать.

Да, а плагин P3 я пока деактивировала. Когда понадобится — включу.

Как вам такой способ установки кнопок социальных сетей? Жду ваших комментариев!


Понравилось? Поделись с друзьями!

Комментарии:

17 Комментариев

  1. Я тоже собираюсь такими кнопочками обзавестись. Красиво смотрятся.

    • Смотрятся действительно симпатично. Я тоже такие себе поставила недавно. Очень долго собиралась это сделать, оказывается, это гораздо проще, чем я думала. Буквально за 10 минут сделала.

    • Денис:

      кнопочки не только красивые но и очень фукнкциональные, привлекающие аудиторию

  2. Хорошо) А я установил кнопки от Share24 это скрипт устанавливается очень легко и выглядит красиво. Можно выбрать как плавающую панель, так и в конце статьи, как у вас реализовано) Советую)

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

  4. Катерина, спасибо Вам! Очень хороший урок по соц.кнопкам! Уже установил себе. Кнопки хорошо смотрятся!

  5. Ну вот и я избавилась от плагинов. Вроде сайт гораздо быстрее загружается, надо понаблюдать.
    Но как в статье написано,вставлять код после вызова the_content (), мне не понравилось. Слишком далеко кнопки от тела статьи расположились.
    В итоге использовала плагин Quick Adsense для установки кнопок после статьи. Также убрала плагин для установки отдельной кнопки от Google +1. Итого получилось -3 плагина.

    • Каждый вставляет туда, где больше нравится.
      Мне попадались рекомендации (я это в статье упомянула) в файл comments.php вставить. Это еще ниже получится.

  6. Выбирала между Pluso и Share24, но остановилась на последнем варианте. Форма кнопочек и плавающая панель очень приглянулись.

  7. Спасибо за подсказки! У меня все получилось с третьего раза — долго «прицеливалась» с местом кнопочек!

  8. Екатерина, спасибо за полезный материал. Воспользоволась сразу и теперь красивые кнопочки у меня на сайте.

    Предлагаю прочитать
    http://deloknigi.ru/top-10/top-10-knig-po-lichnoj-effektivnosti-samorazvitiyu-i-uspexu

  9. Жанна, рада, что оказалась полезной :)

  10. Gelo:

    БлагоДарю, за пост! Всё понятно и легко написано.
    Екатерина, подскажите, в посте Вы описываете как в посте поставить кнопки соц. сетей. А если я хочу поставить кнопки на страницы сайта и на главную страницу сайта.
    Посмотрите сейчас как у меня стоит (rodoswet.ru). Вот также хочу поставить без плагина везде. В посту поставил, но сам пока плагин не отключил.
    Подскажите как это сделать?

    • Цитирую сама себя :)
      «Если нужно установить кнопки соцсетей на главной, или на других статических страницах, то, соответственно надо добавить код в файлы index.php или page.php. Месторасположение кода устанавливайте опытным путем.»
      В файле index.php стоит ориентироваться на слова «читать далее» (в вашем случае «Прочитать остальную часть записи»)
      В файле page.php устанавливать ближе к концу файла, но до функций вызова сайдбара и футера

      Опять таки повторюсь:
      Внимание: вставляйте код между строками шаблона. Следите, чтобы он не попал между открывающей < и закрывающей > скобкой строки!

      • Gelo:

        БлагоДарю, Екатерина!
        Лучше спросить и ещё раз убедиться, что правильно понял ))).
        Лучше 7 раз замерить и один раз отрезать….
        Я на живую всё делаю, т.е. на работающем сайте. Конечно бэкапы делаю перед изменениями серьёзными в кодах.

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

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