Twitter — один из сервисов во Всемирной Паутине, способный существенно расширить функциональность вашего сайта. Все началось с официальной кнопки Твиттера, потом появилась платформа Twitter Anywhere, и сравнительно недавно — новая кнопка для фолловеров.

Вам наверняка интересно, чем кнопка для фолловеров отличается от обычной кнопки для ретвитов. В этой статье попробуем разобраться, в чем заключается эта разница, узнать, что такое кнопка Твиттера под названием "Follow", и как ее добавить в ваш сайт на основе WordPress.

Что за кнопка Twitter Follow?

Кнопка для фолловеров от Twitter представляет собой маленький виджет, при помощи которого пользователи микроблогов могут легко зафолловить ваш аккаунт с любого сайта. Кнопка Follow использует ту же модель встраивания виджетов, что и кнопка Tweet, и ее легко интегрировать в любой существующий сайт. Демо-версию того, как это будет выглядеть, вы можете видеть на скриншоте ниже (кнопка в левом верхнем углу скриншота). Когда вы кликните по этой кнопке, откроется всплывающее окно с дополнительной информацией о данном пользователе.

Кнопка "Twitter Follow" не только показывает количество фолловеров, но и очень просто и легко добавляется на сайт (см. пример далее):


Как добавить официальную кнопку Twitter Follow на ваш WordPress-сайт

Вы можете перейти на страницу кнопки "Follow" и там сгенерировать код для вставки на ваш сайт. Или же просто скопируйте код, который видите ниже:

<a href="http://twitter.com/Wordpresso" class="twitter-follow-button" data-show-count="true">Follow @Wordpresso</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

При этом не забудьте заменить "username" на ваше имя пользователя. Если вы используете на своём сайте официальную кнопку Tweet, нет смысла дважды вставлять скрипт. В вашем случае надо добавить всего 1 строку кода, и добавляемый на сайт код будет вот таким:

<a href="http://twitter.com/Wordpresso" data-show-count="true">Follow @Wordpresso</a>

Опять же — не забудьте отредактировать имя пользователя. Этот код вы можете добавить где угодно в рамках вашей темы оформления WordPress-сайта. Большинство пользователей для этой цели вставляют код в файл sidebar.php. Впрочем, если вы не хотите трогать файл темы, можете использовать виджеты WordPress для этой цели.

Практически во всех темах есть боковые панели для виджетов. Все, что вам надо, — просто добавить в эту панель в виджет с кодом.

Перейдите в меню Внешний вид → Виджеты. Добавьте название виджета и вставьте код. Это будет выглядеть примерно вот так:

Для того, чтобы провести такую настройку, никакой плагин вам не понадобится.

Дополнительная настройка

Эта часть нашей заметки — для дизайнеров и разработчиков, которые хотят настроить внешний вид новой кнопки так, чтобы он соответствовал цветовой схеме сайта и теме оформления.

Twitter позволяет вам настроить цвет кнопки, цвет ссылки, язык, форму виджета и выравнивание выбранного плагина. Для настроек используются следующие переменные JavaScript:

  • data-show-count (true или false)
  • data-button (blue или grey)
  • data-text-color (hex code)
  • data-link-color (hex code)
  • data-lang (en, fr, de, es) – используется код на базе двух букв в стандарте ISO-639-1
  • data-width – (300px)
  • data-align – (right)

В коде эти параметры будут выглядеть примерно так:

<a href="http://twitter.com/Wordpresso" class="twitter-follow-button" data-button="grey" data-text-color="#FFFFFF" data-link-color="#ffa24f" data-show-count="true">Follow @Wordpresso</a>
Источник: WP Beginner.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

3 комментария

сначала новые
по рейтингу сначала новые по хронологии

Хорошая статья.Спасибо)))

Людмила

Спасибо за статью! У меня вопрос: у меня была рядом со статьей на сайте кнопка Твиттер, а через некоторое время она исчезла, в чем дело?

Сам Twiter мог обновить или изменить API-вызов для работы кнопки. Лучше всего будет зайти на сайт Twitter и найти там коды для вставки кнопок, выбрать нужный тип кнопки и вставить на сайт новый код.