Сдейлай добро - напиши информацию о рос. войсках в телеграм @evorog_bot

GRAVITSAPA.INFO

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

Задонатити ₴
Темний режим
GRAVITSAPA.info - интересный блог

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

5875 просмотров Создание сайтов 10 коментарів » 01 Чер 2018

В интернетах по этому поводу написано огромное количество статей. Но все эти варианты реализации кнопок соц. сетей для WordPress сложные или на основе тяжелых плагинов. Поэтому я сделал сам простые рабочие кнопки. А именно кнопки поделиться для Facebook, Telegram, Viber, Twitter и 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>
     
    <!-- 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.facebook {color: #4267b2;}
    a.telegram {color: #5682a3;}
    a.twitter {color: #1da1f2;}
    a.whatsapp {color: #00e676;}
    a.viber {color: #665ca7;}

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

Ещё статьи по теме:

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

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

  1. Денис

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

    Ответить

  2. Яков

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

    Ответить

  3. Яков

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

    Ответить

    • admin

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

      Ответить

  4. Анжела

    Приветствую
    Фейсбук не отображается!

    Ответить

  5. Татьяна

    Отличный способ! Немного переделала для линкедина. Спасибо)

    Ответить

  6. Александр

    Спасибо, кнопки-супер! Но у меня почему то фейсбучная не стала.Подскажите , в чем может быть причина?

    Ответить

  7. Sa

    Спасибо для чайника которого напрягли очень помогло. )

    Ответить
Наверх