
Кнопка твитнуть: установка и настройка для 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
- Как красиво отобразить четыре кнопки в ряд (под статьей)
Похожие статьи:
-
Михаил | 11.04.2012 в 14:32
так там кнопки от многих сайтов- LiveJournal,Google Buzz,FriendFeed, Мой Мир- все это можно сделать?
-
Юля | 28.10.2012 в 13:49
Спасибо за статью и за ссылку на сервис для кода кнопки. У меня сейчас плагин для такой кнопки, только вот счетчик почему-то не работает. Думаю заменить такой кнопкой. Хотелось бы узнать. Есть специальные сервисы, которые делают ссылку на статью короткой, например, bit.ly. Если поставить такую кнопку, можно ли как-нибудь сократить ссылку на статью?
По поводу вашего замечания по п.5 – бесполезная хрень: не соглашусь. У меня стоят метки vladivostok, vk. Первая – связана с тематикой сайта, а вторая – твит попадает и на страницу в контакте, а от туда на фейсбук.
И, обратите внимание, кнопка наверх у вас на блоге почему-то не работает.
-
Ника | 19.02.2013 в 1:11
Добрый день! Хотела установить себе такие кнопки, но почему-то не получается. Начала с вк-кнопки.
В single.php так и не разобралась, куда именно вставлять код. У вас написано, что нужно вставить после строчки
, но у меня такой строчки в single.php нет.
Полезла в content-single.php, нашла там эту строчку, добавила код — но эффекта нет, кнопка не появилась. Уже попробовала вставлять и сразу же после >, и с новой строки, и с отступом в 1 строку. Не работает
Подскажите, пожалуйста, что не так и как это можно исправить? спасибо большое
-
Ника | 19.02.2013 в 11:10
Спасибо большое, Антон. Со знаниями шаблонов и кодов у меня очень туго, если не сказать, никак
Попробую поэкспериментировать с необычным словом. Единственное – его же, наверное, как-то надо оформить? – так пойдёт?
-
Ника | 19.02.2013 в 11:19
Я имела в виду, надо ли оформлять такое такое слово в скобки, как тег? “” (без кавычек, конечно)
-
-
Лев | 12.03.2013 в 6:54
У меня получилось, но только на одиночной записи, кнопка появляется, когда нажимаешь на статью, а вот на первой странице ее не видно. Пробовал вставлять в шаблон страницы, но результата нет. До этого кнопку добавлял каждый раз заново.Антон,что можете посоветовать?
-
Лев | 12.03.2013 в 6:57
И еще, теперь, там где у меня уже была кнопка твитнуть, теперь их две.
-
allemiko | 07.06.2013 в 19:13
Привет Антон, а можно свою уникальную кнопку сделать, так сказать уникальную :))
-
Елена | 17.11.2015 в 15:02
Спасибо за подробное объяснение процесса, кнопочки мной успешно установлены и не возникло никаких сложностей, хотя я не специалист в этой области.
Про кнопку знал и раньше, а вот про как все это дело красиво обернуть не знал. Антон, огромное спасибо! Буду следить за серией кнопок.