Как установить кнопки соцсетей на свой сайт. Шаг 9

Как известно, посетители из соцсетей – это большая часть трафика вашего сайта, которым не стоит пренебрегать ни в коем случае! Существует инструмент, позволяющий опубликовать вашу новую запись в любой соцсети буквально за 1 секунду. И это кнопки соцсетей.

Как установить кнопки соцсетей на свой сайт

Раньше установить кнопки соцсетей на сайт было достаточно сложно: нужно было копировать специальные коды и вставлять их в редактор шаблона в нескольких местах. Сейчас есть специальные сервисы, которые облегчают установку кнопок соцсетей на сайт.  И порадовал нас в этом Яндекс, который предоставил простой конструктор кнопок для соцсетей.

Итак, как установить кнопки соцсетей на свой сайт. Чтобы попасть в конструктор блока “Поделиться” на Яндексе, в браузерной строке введите https://tech.yandex.ru/share.

1

Вы попадете на страницу Блок “Поделиться”. Чуть ниже вы увидите конструктор блока “Поделиться”. И все, что вам останется сделать на первом этапе – это поставить галочки у тех кнопок соцсетей, которые вы бы хотели видеть у себя на сайте.

2

Теперь справа выберете внешний вид блока:

  • только иконки
  • счетчики
  • иконки и меню
  • маленького размера

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

3

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

4

Перейти в Консоль нашего сайтаВнешний видРедактор. Данный скопированный код нам нужно поставить в блок Одна запись (single.php).

5

Перед тем, как экспериментировать со вставкой кода, полностью скопируйте и вставьте  код Одной записи в Блокнот. Если вы неправильно установите кнопки соцсетей или повредите по другой причине html записи, сайт у вас просто – напросто не будет работать. Поэтому, чтобы все вернуть на место, обязательно сделайте предварительно резервную копию single.php в Блокноте.

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

6

Но немного хочу вас разочаровать, найти именно такие слова <?php the_content();?></div> бывает достаточно сложно, потому что код Одной записи пишется по-разному. Поэтому вам придется экспериментировать, только не забывайте делать копию Одной записи, чтобы в случае ошибки все вернуть на место! Маленький совет: ориентируйтесь на теги </div>, они обозначают, что следующая запись начинается с новой строки.

Чтобы блок кнопок соцсетей выровнять по центру записи, нужно заключить его в тег <center>. Перед кодом прописываем <center>, а после кода </center> с закрывающим слешем.

7

Для полного усвоения данной темы рекомендую просмотреть мой видеоурок Как установить кнопки соцсетей на свой сайт:

 

 
   
Я пишу о том, что проверила на собственном опыте. Подпишитесь на обновления, чтобы не упускать полезные знания!

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

  • Отличная статья,мне как новичку очень помогла,особенно видео,все пошагово сделала.Сначала хотела социальные кнопки через плагин сделать,но попала на ваш сайт и статью и решила попробовать так,как вы описали.Я первый раз что-то в коде изменяла,но все получилось…Еще хочу фон изменить,но почему-то не сохраняется,буду дальше изучать и еще раз,спасибо за статью

    • Я очень рада, что оказалась Вам полезной, и Вы оценили мой труд!))) Если есть какие-то вопросы, обязательно пишите – попробуем разобраться вместе. Возможно, вам нужен видеоурок на какую-то тему, в принципе тоже могу сделать!

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

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

Нажимая кнопку «Отправить комментарий», я принимаю Пользовательское соглашение и подтверждаю, что ознакомлен и согласен с Политикой конфиденциальности этого сайта.