GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

GRAVITSAPA.info - интересный блог

Делаем кнопки социальных сетей для WordPress самым простым способом

209 просмотров Создание сайтов 4 комментария » 01 Июн 2018

В интернетах по этому поводу написано огромное количество статей. Но все эти варианты реализации кнопок соц. сетей для WordPress сложные или на основе тяжелых плагинов. Поэтому я сделал сам простые рабочие кнопки. А именно кнопки поделиться для Facebook, Telegram, Viber, Twitter, Google+, VK, OK и Whatsapp. Кода мало, нагрузки минимум, универсальное использование. Выглядят они вот так:

Для установки кнопок соц. сетей для WordPress нужно выполнить простые шаги:

  1. В файле header.php между <head></head> подключаем шрифты FontAwesome для красивого отображения иконок:

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
  2. В файле single.php Вашего WordPress шаблона устанавливаем в подходящем месте код самих кнопок:
    <div class="buttons">
    <!-- Facebook -->
    <a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" class="facebook" aria-label="Поделиться в Фейсбуке" title="Поделиться в Фейсбуке"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
     
    <!-- Telegram -->
    <a target="_blank" rel="nofollow" href="https://telegram.me/share/url?url=<?php the_permalink(); ?>" class="telegram" aria-label="Отправить в Телеграм" title="Отправить в Телеграм"><i class="fab fa-telegram-plane"></i></a>
     
    <!-- Viber -->
    <a target="_blank" rel="nofollow" href="viber://forward?text=<?php the_permalink(); ?>%0D%0A%0D%0A<?php the_title(); ?>" class="viber" aria-label="Отправить в Вайбер" title="Отправить в Вайбер"><i class="fab fa-viber"></i></a>
     
    <!-- Twitter -->
    <a target="_blank" rel="nofollow" href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" class="twitter" aria-label="Поделиться в Твиттере" title="Поделиться в Твиттере"><i class="fab fa-twitter"></i></a>
     
    <!-- Google+ -->
    <a target="_blank" rel="nofollow" href="https://plusone.google.com/_/+1/confirm?hl=ru&url=<?php the_permalink(); ?>" class="google" aria-label="Отправить в Гугл+" title="Отправить в Гугл+"><i class="fab fa-google-plus-g"></i></a>
     
    <!-- VK -->
    <a target="_blank" rel="nofollow" href="https://vk.com/share.php?url=<?php the_permalink(); ?>" class="vkontakte" aria-label="Поделиться в VK" title="Поделиться в VK"><i class="fab fa-vk"></i></a>
     
    <!-- Odnoklassniki -->
    <a target="_blank" rel="nofollow" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>&title=<?php the_title(); ?>" class="odnoklassniki" aria-label="Поделиться в Одноклассниках" title="Поделиться в Одноклассниках"><i class="fab fa-odnoklassniki"></i></a>
     
    <!-- Whatsapp -->
    <a target="_blank" rel="nofollow" href="whatsapp://send?text=<?php the_permalink(); ?>%0D%0A%0D%0A<?php the_title(); ?>" class="whatsapp" aria-label="Отправить в Ватсап" title="Отправить в Ватсап"><i class="fab fa-whatsapp"></i></a>
    </div>
  3. В файле стилей Вашего WordPress шаблона, обычно style.css, вставляем стили кнопок:
    .buttons a {display: inline-block; text-decoration:none; border: 0px;font-size: 27px;}
    .buttons a:hover {text-decoration:none; border: 0px;}
    a.vkontakte {color: #507299;}
    a.odnoklassniki {color: #f58220;}
    a.facebook {color: #4267b2;}
    a.google {color: #eb4333;}
    a.telegram {color: #5682a3;}
    a.twitter {color: #1da1f2;}
    a.whatsapp {color: #00e676;}
    a.viber {color: #665ca7;}

На этом всё, кнопки заработают. Как видим, никаких скриптов и прочего лишнего кода. Если нужно какую-то кнопку убрать, то просто удаляем нужную строку в коде. Делитесь статьёй в соц. сетях 🙂

Почитайте ещё эти интересные статьи:

Оставь свой коммент

4 комментария к посту “ Делаем кнопки социальных сетей для WordPress самым простым способом”:

  1. Денис

    Спасибо за иконки.
    Втулил к себе на сайт, только чуток переверстал)

  2. Яков

    Нет Инстаграма, но как поинмаю по коду, добавить можно по аналогии.

  3. Яков

    Упсс, почитал про Инстаграм. Нет API и соответственно нет возможности прикрутить кнопку.

    • admin

      Увы, но да… Там не всё просто) И по сути нет необходимости в кнопке шаринга инсты.

Наверх