Как и куда установить кнопки соцсетей с помощью скрипта. Как расположить кнопки в одну строчку?

Совсем недавно войдя в нашу жизнь, соцсети успели настолько в ней укорениться, что сегодня невозможно представить мир без Твиттера на завтрак, Фэйсбука по пути на работу или Вконтакте, втихоря открытого на рабочем компьютере. Социальные сети стали универсальным средством общения и распространения информации, а значит — одним из лучших средств продвижения сайтов. Сегодня я расскажу о том, как установить кнопки соцсетей для своего блога и добавить им презентабельности. 

Прочитав статью до конца, вы узнаете:

  1. Где взять и как установить кнопки соцсетей;
  2. Куда их поставить в шаблоне WordPress;
  3. Как скрыть внешние ссылки на соцсети от индексации;
  4. Как разместить кнопки в одну строчку;
  5. Как напомнить читателям о возможности поделиться.
сервис социальных кнопок Share.Pluso

Планируете воспользоваться другими способами установки кнопок? Тогда вам будут полезны следующие статьи:

Виджеты Вконтакте для сайта сообщества

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


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

Facebook

Facebook — популярнейшая в мире социальная сеть, поэтому отсутствие возможности поделиться записями в ней будет серьезным упущением. За фирменными кнопками Facebook идем сюда.

кнопки соцсети Facebook     кнопки соцсети Facebook 2

Настройки внешнего вида интуитивно понятны: заполняете поле «URL», выбираете вариант кнопки (со счетчиком или без, в строчку или столбик), отмечаете, нужна ли вам кнопка «Поделиться». Поле «width» можно заполнить или оставить пустым. Затем нажмите «Get code».

Единственная загвоздка в том, что сначала в поле «URL» вводится ссылка на любую страницу, а, получив готовый код, вам придется заменить эту ссылку на <?php the_permalink() ?> , иначе в Facebook будет публиковаться не та запись, к которой относится кнопка, а та, которую вписали в «URL».

Вот как должен выглядеть код с исправлениями.

Было:

Стало:

ВКонтакте

Более 70 миллионов человек пользуются «Вконтакте», поэтому данная кнопка — must have для привлечения аудитории на ваш сайт. За кнопкой самой популярной российской соцсети идем на эту страницу.

кнопки соцсети Вконтакте

Настроить и установить скрипт еще проще, чем у Фэйсбука: никаких заморочек и подводных камней. Надо только выбрать стиль: кнопка, ссылка или иконка, со счетчиком и без — и скопировать готовый код себе на сайт.

Twitter

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

кнопки соцсети Twitter

На этой страничке достаточно выбрать внешний вид и скопировать код, после чего вставить в нужное место у себя на сайте: например, в виджет или single.php.

Google+

Скрипт кнопки этой относительно молодой, но быстроразвивающейся социальной сети можно сгенерировать здесь.

В настройках вам нужно выбрать размер из 4 возможных и примечание (отображение счетчика). Вот и все, осталось скопировать код из расположенного рядом поля.


Куда поставить кнопки в шаблоне WordPress


Чаще всего для размещения кода кнопки используется файл single.php — он отвечает за вид отдельных записей. Расположите соцкнопки в этом файле, и они будут отображаться в каждой публикации: до или после текста.

Найти его можно через раздел «Внешний вид—>Редактор—>single.php» или зайти через панель управления вашего хостинга найти в файлах сайта нужный файл. Он обычно лежит в папке «wp-content—>themes—>название вашей темы». Подробнее о поиске файлов через файловый менеджер хостинга рассказано в статье о том, где найти корневой каталог сайта.

Прежде, чем делать любые изменения, сохраните начальный вариант файла. Затем откройте оригинал и вставьте кнопку в нужное место. Если не разбираетесь дебрях кода, просто подбирайте местоположение методом тыка: «вставить-вырезать-вставить», пока не попадете, куда надо.

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


Как скрыть внешние ссылки в кнопках от индексации.

В первую очередь стоит проверить, нет ли в вашем коде внешних ссылок. Сделать это можно с помощью специальных сервисов, например dinews.ru. Последовательность действий простая: устанавливаете кнопку на сайт, переходите на сервис проверки, вставляете там в нужное поле адрес страницы с кнопкой и жмете «Анализировать».

В моем случае закрывать пришлось только кнопку от Twitter. Как и зачем скрыть ссылки от индексации мы поговорим в другой статье. А сегодня я приведу готовую конструкцию.

Ссылка, закрытая от индексации Яндекса и Гугла должна выглядеть так:


Как расположить кнопки соцсетей в одну строчку

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

Параметр width отвечает за расстояние между кнопочками — поиграйте его значением, пока не подберете нужное. Если width совсем убрать, кнопки встанут вплотную друг к другу.

Внимание! Приведенный выше код используйте для КАЖДОЙ кнопки отдельно: от первой до последней. Затем проверьте результат. У меня сдвинулись рубрики (они располагались сразу под кнопками). Поэтому пришлось вставить еще одну строчку между последней кнопкой и следующим блоком:

После этого все встало на свои места.


Как поставить над кнопками призыв к действию

Основная проблема в том, что посетители относятся к сайтам просто как к информационной площадке: нашел ответ на свой вопрос — ушел. В большинстве случаев им даже в голову не придет жать на какие-то там кнопочки. Ну чтож, мы напомним!

Этот метод особенно эффективен, когда кнопки находятся сразу после текста. Раз читатель дошел до конца статьи, вероятно, она ему понравилась? Самое время вставить свои пять копеек: «Понравилась статья? Поставь лайк!» или «Статья была полезной? Сохрани ее!» И прочие призывы с использованием слов: поделись, сохрани, лайкни и пр.

Как это реализовать? Непосредственно перед кодом первой кнопки поставьте следующую конструкцию:

Заключение

После этих 3 нехитрых шагов ваши кнопки соцсетей примут вполне презентабельный вид. Если же способ их установки, описанный в этой статье, показался слишком запутанным, приглашаю вас воспользоваться социальными сервисами — с их помощью сделать кнопки на своем сайте стало еще проще.

© 2015 — 2016, blogstu.ru. Все права защищены. Копирование материалов сайта запрещено.

Поделиться:
Сохранить:

Один комментарий на “Как и куда установить кнопки соцсетей с помощью скрипта. Как расположить кнопки в одну строчку?

  1. Я хотел иметь панель с кнопками именно этих четырех социалок, которые наиболее актуальны для рунета. Вполне возможно, что социальные сигналы у нас еще не так всемогущи как у буржуев из-за того, что их просто-напросто пока еще не достаточно для осуществления релевантной выборки.

    [Ответить]

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

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

5 − 1 =