Twifon.com - блог о Twitter
18.06.2010

Как добавить на блог кнопку Follow me

goodies_buttons.pngЕсли у вас есть свой блог/сайт, не важно: ЖЖ, Wordpress, Blogspot или что-то еще, то имеет смысл прикрутить там кнопку-ссылку “Follow me!” на ваш микро-блог в Twitter. Опытный вебмастер сделает это за пол минуты 10 различными способами. Однако далеко не все твиплы являются таковыми. Специально для них и написан этот пост. Пост будет длинный, с подробными картинками. Так что наберитесь терпения, оно вам пригодится :)

Рассмотрим три варианта добавления кнопки: на отдельно стоящий (standalone) блог на Wordpress, в ЖЖ и на Blogspot (он же Blogger.com).

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

Заходим в свой аккаунт в Twitter, ищем внизу ряд мелких ссылок на разделы сервиса. Находим там Goodies. Откроется страница с выбором виджетов или кнопок:

button-follow1.gif

Нам нужна кнопка, поэтому идем далее, кликнув по ссылке Buttons:

button-follow2.gif

Под табличкой с кнопками есть ссылка “Follow us on Twitter”. Если кликнуть по ней, то на кнопках с текстом последний поменяется с “Follow me” на “Follow us”.

Выберите любую кнопку и просто кликните по ней. Появится всплывающее окно с кодом:

button-follow3.gif

<a href="http://www.twitter.com/twifoncom"><img src="http://twitter-badges.s3.amazonaws.com/follow_bird-b.png" alt="Follow twifoncom on Twitter"/></a>

Вот его и нужно будет скопировать и сохранить в надежном месте. Пригодится в будущем.

Теперь рассмотрим варианты добавления кнопки:

1. Как установить кнопку Follow me на отдельно стоящий (standalone) блог на Wordpress.

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

Заходим в админскую часть блога, находим раздел Appearance, в нем кликаем по пункту Widgets:

button-follow4.gif

Из таблицы Available Widgets выхватываем кольт 45-го калибра блок Text и тащим его вправо на панель Sidebar:

button-follow5.gif

Как только перетащили, блок автоматически раскроется. Нужно будет вписать заголовок и добавить скопированный ранее код кнопки:

button-follow6.gif

Нажимаем кнопку сохранить (Save) и смотрим результат:

button-follow7.gif

2. Как добавить кнопку Follow me в ЖЖ.

Заходим в свой аккаунт на livejournal.com. Затем: ЖУРНАЛ/Стиль журнала

button-follow8.gif

Проматываем в самый низ и находим длинную кнопку “Настроить выбранное оформление”

button-follow9.gif

Далее слева отыскиваем пункт Sidebars, кликаем по нему и предлагаем “Свой вариант” дополнительного блока. Не забываем в окне Seventh item in sidebar выбрать Custom Text:

button-follow10.gif

Вуаля!

button-follow11.gif

3. Как добавить кнопку Follow me в блог на Blogspot (он же Blogger.com).

Заходим в Панель инструментов, выбираем нужный блог (если их несколько) и кликаем по ссылке “Дизайн”:

button-follow12.gif

В правой части, где расположены блоки сайдбара, кликаем по ссылке “Добавить гаджет”:

button-follow13.gif

В появившемся дополнительном окне выбираем гаджет по имени “HTML/JavaScript”

button-follow14.gif

Вписываем заголовок и полученный ранее код. Жмем “Сохранить”

button-follow15.gif

Теперь в боковую панель добавился еще один блок. Не забудьте только нажать еще раз кнопку “Сохранить” на этой странице настроек. Иначе блок исчезнет, словно и не было:

button-follow16.gif

Результат:

button-follow17.gif

Enjoy! :)

Комментарии (14)

  1. Елена

    18.06.2010 в 14:18

    Спасипки! :)))) Давно хочу такую кнопочку, но совсем ничего не понимаю в них. За жжшечку отдельное мерси!!!!

  2. Лада

    19.06.2010 в 12:07

    Игорь,ты гений! Всё просто и понятно,спасибо!

  3. Игорь Квентор

    20.06.2010 в 00:10

    Вэлкам, друзья! :) Рад, что смог чем-то помочь

  4. mama_ua

    20.06.2010 в 14:28

    Дякую! Дуже корисно… давно чекала подібного поста… Відразу поставила собі на сторінку. Тепер і своїм друзям-чайникам покажу … як то робити.

  5. Игорь Квентор

    20.06.2010 в 17:48

    Спасибо на добром слове, Иветта! :)

  6. Серж

    12.08.2010 в 23:04

    Клева!!! Спасиб!

  7. Ang

    21.08.2010 в 17:13

    Спасибо большое!

  8. Natalya

    28.08.2010 в 19:01

    Спасибо большое) Оч полезная информация!

  9. Дмитрий

    03.10.2010 в 06:36

    спасибо, подробно и доступно, блин а на сайте не нашел бы не за что ссылку )

  10. Игорь Квентор

    04.10.2010 в 01:33

    Дмитрий, вэлкам! :)

  11. Kateryna

    09.08.2011 в 23:53

    Огромное спасибо!
    Мне повезло, что я сразу наткнулась на Ваш пост! Все очень просто и понятно!
    Вот только в твиттере слишком стандартные и “малюсенькие” кнопочки, а такой красивой как у вас - нет…

  12. Игорь Квентор

    10.08.2011 в 10:18

    Kateryna, увы, теперь там нет таких кнопок, вы правы. Однако их можно найти вот по этой ссылке http://twitter.com/about/resources/buttons

  13. Kateryna

    10.08.2011 в 10:36

    Спасибо!!!!!

  14. Kateryna

    10.08.2011 в 10:37

    Упс, эти я видела! - они маленькие, или у меня не все открываются…

Трэкбеки

Оставить комментарий