Главная » Социальные сети » Кнопка твитнуть: установка и настройка для WordPress блога
Кнопка твитнуть для блога

Кнопка твитнуть: установка и настройка для 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 выпуске блога.

Вот серия статей про кнопки социальных сетей, которая поможет Вам установить эти кнопочки к себе на блог (рекомендую читать по порядку!):

Комментировать через ВКонтакте:
Отзывов к посту "Кнопка твитнуть: установка и настройка для WordPress блога" уже 20:
  • Евгений | 11.04.2012 в 9:00

    Про кнопку знал и раньше, а вот про как все это дело красиво обернуть не знал. Антон, огромное спасибо! Буду следить за серией кнопок.

  • Михаил | 11.04.2012 в 13:40

    Антон а можно вот таким способом заменить плагин SocialButtons?

    • admin | 11.04.2012 в 14:00

      Можно и даже нужно:
      1. Меньше нагрузки.
      2. Свой уникальный дизайн.
      3. Ну и кнопочки выглядят не хуже чем в плагине, мне кажется даже лучше.

  • Михаил | 11.04.2012 в 14:32

    так там кнопки от многих сайтов- LiveJournal,Google Buzz,FriendFeed, Мой Мир- все это можно сделать?

    • admin | 11.04.2012 в 14:42

      Конечно. Раньше на одном блоге к меня стояло два блока кнопок – один просто с картинками-ссылками – их было довольно много (включая и указанные Вами: LJ, GB, FF); второй – выглядел примерно как сейчас под статьями здесь. В итоге я понял что эффект от первого практически никакой (так как сервисы не так знамениты), хватит и четырех кнопок из второго блока.

  • Евгений | 12.04.2012 в 12:01

    Так с этой кнопкой справились, а главное со стилями разобрался.

  • Юля | 28.10.2012 в 13:49

    Спасибо за статью и за ссылку на сервис для кода кнопки. У меня сейчас плагин для такой кнопки, только вот счетчик почему-то не работает. Думаю заменить такой кнопкой. Хотелось бы узнать. Есть специальные сервисы, которые делают ссылку на статью короткой, например, bit.ly. Если поставить такую кнопку, можно ли как-нибудь сократить ссылку на статью?
    По поводу вашего замечания по п.5 – бесполезная хрень: не соглашусь. У меня стоят метки vladivostok, vk. Первая – связана с тематикой сайта, а вторая – твит попадает и на страницу в контакте, а от туда на фейсбук.
    И, обратите внимание, кнопка наверх у вас на блоге почему-то не работает.

    • admin | 28.10.2012 в 15:11

      Сервисы есть, и наверное их можно вписать в код кнопки, чтобы автоматически происходило “твитание” по короткой редиректной ссылке (по-крайней мере так вроде некоторые плагины делают).Как это осуществить не знаю – не пробовал.
      на счет 5 пункта, хммм. Так метки этож вроде обычные хештеги по которым происходит поиск в твиттере, хотя ладно что тут спорить. Но то, что отправляет в контакт из-за метки – странно.
      Кнопка наверх работает, даже кроссбраузерна. Вроде и проверял сотню раз, и некоторым устанавливал на заказ – должно работать.

  • Ника | 19.02.2013 в 1:11

    Добрый день! Хотела установить себе такие кнопки, но почему-то не получается. Начала с вк-кнопки.

    В single.php так и не разобралась, куда именно вставлять код. У вас написано, что нужно вставить после строчки

    , но у меня такой строчки в single.php нет.

    Полезла в content-single.php, нашла там эту строчку, добавила код — но эффекта нет, кнопка не появилась. Уже попробовала вставлять и сразу же после >, и с новой строки, и с отступом в 1 строку. Не работает :( Подскажите, пожалуйста, что не так и как это можно исправить? спасибо большое

    • admin | 19.02.2013 в 1:48

      Без минимальных знаний своего шаблона и вообще кода (на уровне что за что отвечает) вставить кнопку в нужное место не получится. Существуют определенные правила по которым пишутся шаблоны, я привел лишь самый распространенный случай. Любой же автор-верстальщик может создать шаблон хоть в 100 файлов – естественно здесь придется поискать. К сравнению у меня в шаблоне 15 php файлов, недавно помогал настроить блог девушке – у нее порядка 35 файлов в шаблоне. Я около получаса искал в нем нужное место.
      Помогает такой способ определения места, если уж совсем не знаю куда вставлять код, я пользуюсь им – возьмите какое-нибудь необычное слово, повставляйте в разные места страниц и посмотрите что будет меняться в блоге. Через быстрый поиск по странице ctrl+f ищите это слово

      • Ника | 19.02.2013 в 11:10

        Спасибо большое, Антон. Со знаниями шаблонов и кодов у меня очень туго, если не сказать, никак :) Попробую поэкспериментировать с необычным словом. Единственное – его же, наверное, как-то надо оформить? – так пойдёт?

        • Ника | 19.02.2013 в 11:19

          Я имела в виду, надо ли оформлять такое такое слово в скобки, как тег? “” (без кавычек, конечно)

          • admin | 19.02.2013 в 13:13

            Нет, слово никак оформлять не нужно. Единственное, что можно впихнуть его внутрь php конструкции, тогда может что-то не отобразиться, но возвращаем все обратно и перебираем места дальше

      • Max | 15.09.2014 в 20:39

        А через тотал коммандер не проще? ;)

  • Лев | 12.03.2013 в 6:54

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

    • admin | 12.03.2013 в 11:39

      Кнопка ставилась как в анонсы (на index), так и в статьи (single)? Если так, то видимо причина следующем: на главной используется один из двух возможных в WP выводов анонсов (часть статьи, а еще может быть цитата) – то есть там все тоже самое что и в статье. У меня другой способ – цитата, для главной у меня берется лишь текст ограниченный по словам – если поставить ссылку в статью на главной ее не будет, так же как и картинки – только текст.
      Как бы попроще объяснить :lol: в общем из индекса нужно вытащить кнопку из короткой части статьи и оставляя ее внутри цикла переместить в другое место, а то она будет дублироваться и в статье. Но это лишь предположение, сложно судить вот так :)
      Ну и конечно никаких плагинов кнопки твитнуть быть не должно, а то он тоже может прописывать кнопочку

  • Лев | 12.03.2013 в 6:57

    И еще, теперь, там где у меня уже была кнопка твитнуть, теперь их две.

  • allemiko | 07.06.2013 в 19:13

    Привет Антон, а можно свою уникальную кнопку сделать, так сказать уникальную :)) :smile: :smile: :smile:

    • admin | 08.06.2013 в 21:20

      Конечно можно, но я эти не занимался :|

  • Елена | 17.11.2015 в 15:02

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: