Занимаясь оптимизацией сайтов и блогов мне постоянно приходится сталкиваться с тем, что многие новички совершенно не знают, как добавить кнопки социальных сетей на 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 — обрамление, чтобы блок более подошел к дизайну вашего шаблона.
Очень надеюсь, что хоть кому-то эта информация окажется полезной. И не забывайте рассказать об этом своим социальным друзьям, нажав на кнопочки социальных сетей ниже, и подписаться на обновления, чтобы не пропустить очередную интересную информацию. Спасибо!
Очень полезная статья. Спасибо за информацию.
Пожалуйста, рад что Вам полезно
Сергей, здравствуйте! Подскажите, пожалуйста, код Pluso вставлять в оба файла — и в single.php и в page.php?
Здравствуйте, Светлана! Здесь все зависит от Ваших потребностей, но я, как правило, вставляю в оба файла.
Сергей, спасибо за ответ! page.php — это страницы, а single.php — это посты? Извините за глупый вопрос, я не владею специальными знаниями. Если вставить код в page.php, то где кнопки будут отражаться на главной?
Сергей, у меня получилось вставить кнопки Pluso под постами, а как вставить надпись «Поделитесь с друзьями»? Можно взять строчку с Вашего второго кода?
Можно, если сможете
а лучше возьмите тут https://yadi.sk/i/IS_WD3VseL2Tc и постарайтесь подстроить под собственные стили.
Все верно, а за вывод анонсов на главной странице отвечает файл index.php (есть исключения), поэтому коды вставленные в шаблоны страниц и постов там появится не смогут.
В Вашей теме, если очень хотите поставить кнопки в анонсах на главной странице необходимо найти в файле index.php следующие строки:
сделать отступ между второй и третьей и вставить туда код кнопок, но… я допускаю вариант, что они не будут работать корректно, так их будет слишком много на одной странице.
Сергей, спасибо! Вы и так мне очень здорово помогли! Я подсмотрела коды на втором своем сайте, который мне правил специалист, и решила не трогать главную страницу нового блога пока. Блог почти пустой. Позже сделаю. Я подписалась на обновления Вашего ресурса и буду учиться у Вас. Еще раз спасибо огромное! Удачного Вам продвижения!
И Вам спасибо за увеличение посетителей моего скромного дитя) Конечно я не часто балую своих уважаемых посетителей новостями и полезностями, но… если у Вас будут вопросы, то пишите и я обязательно постараюсь не задерживаться с ответом и помощью.
Спасибо, коллега! Спрошу обязательно! Несколько дней назад разрушила файл function.php и сутки восстанавливала. Но учиться надо! Притом мне очень это интересно! В кризис работу потеряла, так что теперь есть время на обучение. Спасибо еще раз! Удачи!
Да, с файлом функций надо работать крайне аккуратно и всегда делать копию перед внесением изменений в него, как впрочем, и с другими файлами. Особенностью этого файла является то, что при ошибке в нем перестает работать и админка сайта, поэтому исправления приходится вносить через хостинг.
А если Вы только учитесь работать с шаблонами, то я бы порекомендовал делать это на локальном сервере. Я сам, не смотря на административный доступ к хостингу Alynx.net (работаю в службе поддержки), предпочитаю работать с шаблонами «дома». Примерно, год назад я открыл для себя OpenServer и на нем провожу все работы как на реальном хостинге. Очень удобно и все под рукой, к тому же можно вообще отключаться от интернета и работать хоть с флешки.
Спасибо за подробное объяснение процесса, кнопочки мной успешно установлены и не возникло никаких сложностей, хотя я не специалист в этой области.
Рад, что помог! Спасибо за посещение и положительную оценку! Заходите обязательно еще, у меня есть (и обязательно будут) и другие полезности по работе с шаблона WordPress.