Фирменная кнопка Twitter для блога

Автор , 18.09.2010,

подарок-_copy
Обновлено: 5 августа 2011 г.

Фирменная кнопка от сервиса Twitter

Уверен, что все веб-мастера оценили и приняли на вооружение немалые возможности по продвижению своих интернет-проектов, которые предоставляет сервис микроблогов Twitter. Практически на каждом блоге можно видеть кнопку для быстрой публикации ссылок на посты в Твиттере, а то даже и не одну. Обычно это плагины или виджеты сторонних разработчиков, например AddThis или очень популярная зелёная кнопка от TweetMeme.

В августе 2010 года Twitter сделал своим пользователям подарок – свою собственную, фирменную кнопку для размещения на сайте.

Давайте позаботимся о наших читателях и позволим им всего одним щелчком мыши добавлять ссылки на понравившиеся статьи в свою Twitter-ленту. Пройдём вместе всего несколько простых шагов и фирменная кнопка для ретвитов окажется в каждом посте нашего блога.

Кнопка Twitter в блоге на платформе Blogger (BlogSpot)

Первым делом установим фирменную кнопку на BlogSpot, в знак признательности к моей первой блог-платформе.

  • Заходим на сервис Tweet Button.
  • Здесь мы можем выбрать дизайн кнопки и при необходимости настроить её. Такой необходимости я не нашёл, поэтому оставил настройки по умолчанию. Вид кнопки также оставил предложенные по умолчанию, потому что этот вариант визуально похож на популярный и узнаваемый счётчик от Tweetmeme. Но в каждом конкретном случае, конечно же, надо ориентироваться на дизайн своего блога.

шаг 1

  • В следующем пункте в верхнем окне ставим имя своего твиттер-аккаунта.

шаг 2

  • Далее мы видим внешний вид выбранной кнопки и готовый HTML-код для вставки в шаблон блога.

шаг 3

  • Выделяем и копируем этот код, затем возвращаемся к нашему блогу. Открываем Панель инструментов, выбираем Дизайн / Изменить HTML. Для безопасности сохраняем копию шаблона на компьютере. Затем ставим галочку в окошке “Расширить шаблоны виджета”. Теперь с помощью комбинации клавиш Ctrl+F находим в HTML-коде шаблона строку:

    <div class=’post-header-line-1’/>

    В некоторых, особенно нестандартных шаблонах эта строка может выглядеть как

    <div class=’post-header’>

    Сразу после такой строки вставляем код кнопки. Сохраняем шаблон и смотрим блог. Фирменная кнопка ретвита появилась в начале статьи, слева, сразу под заголовком!

  • В зависимости от дизайна блога более удачным может быть размещение кнопки с правой стороны статьи. Тогда код кнопки надо окружить следующей конструкцией:

    <div style=’float: right; padding: 4px;’>КОД КНОПКИ</div>

    С параметром padding можно поиграться, добиваясь наилучшего расположения кнопки относительно текста и границ колонки блога. Сохраняем. Теперь наша новая фирменная кнопка для ретвитов заняла своё место на посту.

  • Ещё одна настройка может быть полезна, если нам не нужны лишние графические элементы на страницах блога (в том числе на Главной) и мы хотим, чтобы кнопки показывались только в самих статьях. Такое часто бывает, если на Главной странице у нас выводятся только анонсы статей, а полностью статьи раскрываются отдельно. Для этого перед приведённым кодом кнопки вставляем ещё фрагмент кода:

    <b:if cond=’data:blog.pageType == &quot;item&quot;’>

    А после кода кнопки вставляем закрывающий фрагмент:

    </b:if>

    После сохранения шаблона наша кнопка будет выводиться только при просмотре самих статей и не будет видна на всех страницах, в том числе в кратких анонсах на Главной странице.

Кнопка Twitter в блоге на платформе WordPress

А теперь пристроим фирменную твит-кнопку на блог под управлением WordPress.

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

Называется оно WP-Twitter Retweet Button и проще всего добавить его из административной панели управления WordPress.

  • Входим в “админку”, затем переходим: Плагины / Добавить новый. В окно поиска вводим WP-Twitter Retweet Button и жмём кнопку Поиск плагинов.

step1

  • Устанавливаем и активизируем этот плагин. После установки мы можем отыскать его внизу списка установленных плагинов и зайти в Параметры для настройки.

step3

Что здесь можно настроить? Пройдёмся кратко по пунктам:

Display – галочками отмечаем, где именно на блоге хотим видеть нашу кнопку. Если отмечено всё, то кнопка будет на Главной и на всех дополнительных страницах, в RSS-фиде, в обзоре архивов и обзоре категорий. Два последних пункта поддерживают не все темы WordPress.

Position – где имено будет кнопка: перед статьёй, после неё или везде сразу. Есть ещё пара экзотических вариантов, смысл которых от меня ускользнул.

RSS Position – то же самое для канала RSS.

Type – вид кнопки: вертикальный, горизонтальный или мини, без счётчика. Ориентируемся при выборе на дизайн блога.

Styling – положение в строке. По умолчанию предлагается у правого края. Чтобы прижать к левому краю, нужно ввести в настроечное окошко параметры из подсказки на сером фоне.

Source – авторство. Вводим здесь своё Твиттер-имя.

Language – С некоторых пор в Твиттере стал доступен не только родной, английский язык, но и русский. Можем выбрать его, но надо иметь в виду пару нюансов. Во-первых надпись «Твитнуть» больше, чем «Tweet«, а значит и сама кнопка будет визуально шире. Во-вторых, подсказка, которая автоматически будет вставляться в ретвиты, тоже будет занимать дополнительные символы: «с помощью @twittername» вместо «via @twittername«, что в тесных условиях 140 символов может быть не очень приемлемым.

Tweet-text — что будет вставляться в твит: название страницы или самостоятельно заданный текст. Дополнительно можно задать теги статьи в качестве хэштегов для твита.

Save Changes и радуемся нашей аккуратной кнопке!

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

Ещё фишка офкнопки. Если автор ретвитного поста сам имеет аккаунт в Твиттере и при этом мы ещё не подписаны на его Твиттер-ленту, то в окошке выведется информация его аккаунта — аватар и описание из поля «Bio«. Тут же при желании можно будет его зафолловить.

И ещё любопытный момент, на который обратил внимание вот только. Кнопка не разрешает одному и тому же твиттерянину отправлять одинаковые твиты, пишет что-то вроде «Вы это уже говорили». Таким образом, слегка предохраняет от накрутки счётчика и попутно служит своеобразным выходным спам-фильтром.

При подготовке использовались материалы Сергея Мазураша и Дениса Евсюкова.


Заинтересовало? Поделись с другими, добавь в свой Twitter:
Будь первым в курсе новинок блога, подпишись на обновления по RSS.

,

10 комментариев “Фирменная кнопка Twitter для блога”

  1. Евгений, спасибо, что держите в курсе обновлений!
    Идея нового поста — как сделать, что бы при публикации сообщения в блоге, автоматически появлялось сообщение об этом в тви;)

  2. Лучше чем твитмемем

    • Мне кажется, здесь просто дело вкуса. В твитмемем больше дополнительных примочек, которые притормаживают. Твитбаттон проще и быстрее, практически не нагружает шаблон блога.

  3. Спасибо большое, Евгений, установила кнопку на своем новом блоге, смотрится очень мило. Дурацкий наверное вопрос — надо ли создавать для разных блогов разные твиттер аккаунты? Переклинило меня что-то.

    • Елена, одного аккаунта в Твиттере вполне достаточно. Разные сервисы/кнопки будут «привязаны» к нему и отслеживать именно его.
      Я уверен, что дурацких вопросов не бывает. Бывают «детские», от пока ещё незнания чего-либо. А если кто-то называет детский вопрос «дурацким», то обычно это означает, что этот кто-то не в состоянии на него ответить :-)

  4. Спасибо Евгений за разъяснения данного вопроса. Я как раз искала способы как эту кнопку можно установить на блог. Вот еще расскажите как вставить в шаблон кнопки расположенные после статьи- мир,вконтакте и др. Буду очень признательна!!Спасибо!

  5. Спасибо большое, очень пригодилось!

А Вы что думаете по этому поводу?

XXI век is powered by WordPress. OfficeFolders based theme by Themocracy