3 способа, как добавить кнопки социальных сетей на WordPress

Занимаясь оптимизацией сайтов и блогов мне постоянно приходится сталкиваться с тем, что многие новички совершенно не знают, как добавить кнопки социальных сетей на WordPress, и готовы платить за такие услуги фрилансерам. Особенно это касается тех, кто просто не умеет искать нужную информацию. И если ты, мой уважаемый читатель, зашел сюда именно за такой информацией, то ты обязательно узнаешь 3 способа, как можно добавить кнопки социальных сетей на свой сайт или блог WordPress.

Первый и самый простой способ это, конечно же, установить один из плагинов, предлагаемых если не сотнями, то десятками точно. Но я лично не сторонник использования плагинов, в принципе, и поэтому не стану советовать данный способ. Представьте себе такой пример из моей практики: взявшись однажды за оптимизацию блога WordPress мне пришлось встретиться с таким фактом, как установленные на этом блоге 53 плагина. Как вы думаете, какой была скорость загрузки такого блога? Ужас, как только его вообще индексировали ПС! Так что этот способ мы исключим категорически и перейдем к следующему.

Второй способ добавления кнопок социальных сетей — это, воспользоваться сторонними сервисами. Кстати, одним из таких сервисов я сам пользуюсь, вы можете увидеть его в конце этого поста и воспользоваться им. Мне понравился сервис Pluso тем, что вместе с удобными и красивыми кнопками установлен специальный общий счетчик. Тем более этот способ очень прост и не требует практически никаких знаний в HTML и CSS. Достаточно визуально выбрать нужные кнопки и форму их расположения, получить специальный код и вставить его в нужное место на странице или в записи.

В WordPress полученный код обычно прописывается в файлах single.php и page.php сразу под кодом, имеющем в своем содержании «the_content», и соответственно, отвечающим за вывод текста статьи. Повторюсь, способ достаточно прост и удобен. Но, внешний вид кнопок может устраивать не каждого или не подходить под дизайн сайта/блога, поэтому предлагаю рассмотреть еще один способ.

В этом способе вам могут понадобиться некоторые знания в CSS, чтобы изменить внешний вид блока, внутри которого будут располагаться социальные кнопки, поэтому рассмотрим его более детально. По умолчанию, у вас должен получиться вот такой блок:

блок социальных кнопок

Особенность этого блока социальных кнопок для вашего сайта в том, что при наведении курсора на картинку со значком «+» открывается дополнительное окно, в котором присутствуют практически все известные социальные сети не только в Рунете, но и в Интернете в целом. Хотите такой? Тогда едем дальше.

Для начала мы установим скрипт, отвечающий за открытие дополнительного окна в браузере посетителя, нажимающего на одну из кнопок. Для это необходимо зайти в редактор шаблона, открыть файл «Заголовок» (header.php), и вставить между head и /head следующий код:

<script type=»text/javascript» src=»https://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ACCOUNT-ID»></script>

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

P.S. (редакция 2015 г.) Скрипт лучше подключать не в header.php, а в footer.php перед закрывающим тегом </body>

Далее нам потребуется код, который мы должны будем вставить в файлы single.php и page.php, отвещающие за вывод постов и страниц, соответственно.

<div class=»social»>
<p>Вам понравилось прочтенное?<strong> Так поделитесь с друзьями!</strong></p>
<div class=»addthis_toolbox addthis_32x32_style addthis_default_style socials_btn»>
<a class=»addthis_button_facebook»></a>
<a class=»addthis_button_twitter»></a>
<a class=»addthis_button_email»></a>
<a class=»addthis_button_google»></a>
<a class=»addthis_button_compact»></a>
</div>
</div>

Не забудьте сохранить внесенные в файл изменения. Надпись «Вам понравилось прочтенное? Так поделитесь с друзьями!» можете поменять по своему усмотрению (<strong> в данном случае, отвечает за жирный шрифт в надписи).

В принципе, после установки данного кода вы уже можете посмотреть и проверить работу добавленных социальных кнопок. Но в разных шаблонах они могут располагаться не совсем корректно, поэтому рекомендую добавить еще один фрагмент в таблицу стилей CSS (файл style.css):

.social {
background:#F7F7F7;
border: 5px solid #F0F0F0;
margin: 30px 0 20px;
padding: 15px;
}

При желании можете внести свои изменения в background — фон, и border — обрамление, чтобы блок более подошел к дизайну вашего шаблона.

Очень надеюсь, что хоть кому-то эта информация окажется полезной. И не забывайте рассказать об этом своим социальным друзьям, нажав на кнопочки социальных сетей ниже, и подписаться на обновления, чтобы не пропустить очередную интересную информацию. Спасибо!

Автор блога о фрилансе: Сергей Трутнев

14 коммент. к "3 способа, как добавить кнопки социальных сетей на WordPress"
  • Анатолий

    Очень полезная статья. Спасибо за информацию.

    Ответить
    • Сергей

      Пожалуйста, рад что Вам полезно :!:

      Ответить
  • Светлана

    Сергей, здравствуйте! Подскажите, пожалуйста, код Pluso вставлять в оба файла — и в single.php и в page.php?

    Ответить
    • Сергей Трутнев

      Здравствуйте, Светлана! Здесь все зависит от Ваших потребностей, но я, как правило, вставляю в оба файла.

      Ответить
      • Светлана

        Сергей, спасибо за ответ! page.php — это страницы, а single.php — это посты? Извините за глупый вопрос, я не владею специальными знаниями. Если вставить код в page.php, то где кнопки будут отражаться на главной?

        Ответить
        • Светлана

          Сергей, у меня получилось вставить кнопки Pluso под постами, а как вставить надпись «Поделитесь с друзьями»? Можно взять строчку с Вашего второго кода? :?:

          Ответить
          • Сергей Трутнев

            Можно, если сможете :) а лучше возьмите тут https://yadi.sk/i/IS_WD3VseL2Tc и постарайтесь подстроить под собственные стили.

            Ответить
        • Сергей Трутнев

          page.php — это страницы, а single.php — это посты

          Все верно, а за вывод анонсов на главной странице отвечает файл index.php (есть исключения), поэтому коды вставленные в шаблоны страниц и постов там появится не смогут.
          В Вашей теме, если очень хотите поставить кнопки в анонсах на главной странице необходимо найти в файле index.php следующие строки:


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

          Ответить
          • Светлана

            Сергей, спасибо! Вы и так мне очень здорово помогли! Я подсмотрела коды на втором своем сайте, который мне правил специалист, и решила не трогать главную страницу нового блога пока. Блог почти пустой. Позже сделаю. Я подписалась на обновления Вашего ресурса и буду учиться у Вас. Еще раз спасибо огромное! Удачного Вам продвижения!

            Ответить
          • Сергей Трутнев

            И Вам спасибо за увеличение посетителей моего скромного дитя) Конечно я не часто балую своих уважаемых посетителей новостями и полезностями, но… если у Вас будут вопросы, то пишите и я обязательно постараюсь не задерживаться с ответом и помощью.

            Ответить
  • Светлана

    Спасибо, коллега! Спрошу обязательно! Несколько дней назад разрушила файл function.php и сутки восстанавливала. Но учиться надо! Притом мне очень это интересно! В кризис работу потеряла, так что теперь есть время на обучение. Спасибо еще раз! Удачи!

    Ответить
    • Сергей Трутнев

      Да, с файлом функций надо работать крайне аккуратно и всегда делать копию перед внесением изменений в него, как впрочем, и с другими файлами. Особенностью этого файла является то, что при ошибке в нем перестает работать и админка сайта, поэтому исправления приходится вносить через хостинг.
      А если Вы только учитесь работать с шаблонами, то я бы порекомендовал делать это на локальном сервере. Я сам, не смотря на административный доступ к хостингу Alynx.net (работаю в службе поддержки), предпочитаю работать с шаблонами «дома». Примерно, год назад я открыл для себя OpenServer и на нем провожу все работы как на реальном хостинге. Очень удобно и все под рукой, к тому же можно вообще отключаться от интернета и работать хоть с флешки.

      Ответить
  • Елена

    Спасибо за подробное объяснение процесса, кнопочки мной успешно установлены и не возникло никаких сложностей, хотя я не специалист в этой области.

    Ответить
    • Сергей Трутнев

      Рад, что помог! Спасибо за посещение и положительную оценку! Заходите обязательно еще, у меня есть (и обязательно будут) и другие полезности по работе с шаблона WordPress.

      Ответить

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *
Ваше имя *
Эл. адрес *
Ваш сайт
Ваш комментарий
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: