Кнопка твитнуть: установка и настройка для WordPress блога
Здравствуйте уважаемые читатели блога history-of-blog.ru. В интернете уже написано много статей о том, как установить кнопки социальных сетей на блог, но проанализировав самые популярные из них, я пришел к такому выводу – не порядок! Конечно, есть информация о том, как добиться отображения той или иной кнопки на блоге, но нет подробной инструкции как вписать кнопку в дизайн. Прочитав серию постов о социальных кнопках Вы без труда не только установите самые популярные из них на свой блог, но и настроите их отображение.
Кнопка твитнуть на wordpress блог
Я решил начать с кнопки твитнуть от популярного микроблога twitter. Почему именно с нее? Посмотрев на популярные статьи по этой теме я обнаружил, что информация по установке этой кнопки устарела! Если раньше мы могли установить кнопку с вертикальным и горизонтальным счетчиком, то теперь вертикальный счетчик убрали. Пришлось немного порыться в кодах, чтобы установить кнопку с вертикальным счетчиком (если Вы обратили внимание то она находится в начале каждой статьи справа – попробуйте клинуть 
и проверить работает ли она – а то может где-то накосячил)
Кнопка твитнуть с вертикальным счетчиком в начале статьи смотрится гораздо лучше, чем с горизонтальным. Я рекомендую размещать две кнопки твитнуть – одну в начале статьи (вертикальную), другую в конце (горизонтальную).
Настройки кнопки твитнуть.
Сначала давайте разберем установку кнопки с горизонтальным счетчиком в конец статьи. Для получения кода кнопки нужно перейти по этому адресу.
Выбираем первый варант: Отправить ссылку.
Теперь перед нами появляются настройки кнопки твита. В принципе все понятно, но все же объясню для большей ясности:
- 1. Выбираем “Использовать URL-адрес страницы”. Таким образом при одном и том же коде твитать буду ту страницу, на которой находятся.
- 2. Выбираем “Использовать название страницы”. Ссылка на страницу должна сопровождаться описательным текстом. Выбирая этот пункт он будет заимствоваться из заголовка записи (интересный момент: текст берется именно из title страницы, поэтому если Вы используете плагин All in One SEO Pack, то заголовок будет браться оттуда для данной записи).
- 3. Выбираем “Показать счетчик”. Без счетчика и кнопка не кнопка
- 4. Если в момент создания кнопки Вы авторизованы в твиттере, то там автоматически появится Ваш ник. Убирать его или нет дело Ваше (я убрал например). Суть в том, что если он останется там, то в конце каждого твита будет подпись: “с помощью “Ваш ник””. Это безусловно плюс, так как мы рекламируем свой твиттер-аккаунт. Но стоит учитывать, что если у Вас длинные заголовки то твит может не уместиться в 140 символов.
- 5. Бесполезная хрень – оставляем пустые графы.
- 6. Большая кнопка как это ни странно делает кнопку… больше! Я буду рассматривать вариант со стандартной кнопкой, так как ее высота будет примерно равно высоте кнопок других соц. сетей (хотя большая кнопка смотриться покруче).
- 7. Без комментариев.
- 8. Предпросмотр кнопки (можете вернитесь к 6 пункту).
- 9. Код нашей кнопки! ctrl+c – копируем!
Установка кнопки в конец статьи.
За вывод страниц с записями ответственен файл single.php – находим его в папке с Вашей темой или прямо из админки (Дизайн -> редактор). Ищем строки:
<?php the_content(); ?>
Эта строчка – это содержание Вашей статьи (начиная от заголовка (не включительно) и до до последней букафки в записи). Поэтому чтобы вывести кнопку твитнуть под записью нужно вставить код кнопки именно сюда.
После вставки кода у меня получилось следующее:
Настройка дизайна для кнопки твитнуть.
Как видно на картинке выше кнопка расположилась не очень удачно. Нужно добавить необходимые отступы. Далее я рассмотрю как добавить отступы сверху и снизу и разместить кнопку по центру (так как кнопка пока одна это будет весьма удачное месторасположение).
Что бы грамотно это сделать нам потребуется два файла (для знающих – чтобы код был валидным) – это тот же single.php и style.css.
В файле single.php оборачиваем код кнопки в div, то есть добавляем перед кнопкой код:
<div class="twit">
а после кода закрываем наш div:
</div>
То есть у нас получилось:
<div class="twit">КОД КНОПКИ</div>
Теперь зададим стиль нашему div-блоку. Открывает на редактирование файл style.css и в самом конце добавляем следующие строки:
.twit {
margin:15px 0; text-align:center;
}
Теперь кнопка у меня выглядит так:
Установка вертикальной кнопки твитнуть.
Что бы изменить кнопку на вертикальную достаточно дописать в код кнопки небольшой кусочек кода:
data-count="vertical"
Вставляем его вот сюда:
Теперь подредактированный код кнопки вставляем в файл single.php перед строчкой:
<?php the_content(); ?>
Оборачиваем в div:
<div class="twit-top">КОД ВЕРТИКАЛЬНОЙ КНОПКИ</div>
И дописываем в файл style.css следующее:
.twit-top {
float:right; margin:0 0 5px 8px; display:block;
}
первый ноль – отступ сверху, второй – справа, 5px – отступ снизу, 8px – слева. Можно подредактировать по своему вкусу.
Раз уж ты дочитал до конца – значит тебе интересна тема установки кнопок социальных сетей на свой блог. Поэтому объявлю следующее:
Одной кнопки твитнуть считаю не достаточно, нужно еще три кнопки (больше не надо) – об этом я писал в 4 выпуске блога.
- Почему именно кнопки социальных сетей
- Установка кнопки твитнуть на блог – эта статья
- Установка кнопок твиттера на главную страницу (в анонсах)
- Установка кнопки “мне нравится” от Facebook
- Установка кнопки “мне нравится” от Вконтакте
- Установка кнопки Гугл +1
- Как красиво отобразить четыре кнопки в ряд (под статьей)
