Интегрируем Twitter на сайт за 5 минут с @Anywhere

2 мая
2010

До недавнего времени, внедрение возможности взаимодействия с Twitter API на сайт было процессом не самым простым. Приходилось скачивать и разбираться с библиотеками, либо писать их самому, а потом еще запихивать все это в код и отлаживать. Ничего невозможного нет, но времени отнимало достаточно.
Теперь Твиттер представил нам новое решение под названием @Anywhere, которое позволит, с помощью нескольких строчек кода, добавить на Ваш сайт возможность работы с Twitter.

Пост получился достаточно громоздкий, но тут действует принцип (немного перефразирую) «Лучше час потерять, зато потом за пять минут долететь» .

Данная платформа очень проста в применении, но на данный момент обладает меньшим функционалом по сравнению с Twitter API.
Давайте посмотрим, что умеет @Anywhere, и как это применить на практике. Оригинальное описание системы можете найти здесь. Я постараюсь объяснить не менее понятно и попробую дополнить от себя. Начнем.

Регистрируем приложение @Anywhere

Для начала, нам нужно зарегистрировать приложение. Авторизуйтесь в Твиттере и переходите сюда, заполните форму, указав название и описание приложения (например, «Блог Дяди Яши»), его адрес и тип (browser). Default Access type устанавливайте в Read & Write.
После регистрации Вы получите API key, который в дальнейшем нам пригодится.

Загружаем код @Anywhere

Чтобы использовать возможности платформы @Anywhere, нам нужно добавить загрузку anywhere.js в код тех страниц, где планируем его применять:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Anywhere Sample</title>
    <script src="http://platform.twitter.com/anywhere.js?id=ВАШ_API_KEY&v=1" type="text/javascript"></script>
  </head>
  <body>
    ...
  </body>
</html>

В качестве параметра передается API key и номер версии @Anywhere (на данный момент существует только версия 1).

Инициализируем @Anywhere

Скрипт создает объект twttr. Для использования @Anywhere, вызовите метод anywhere и получите экземпляр клиента Twitter API (решено называть его «T») в качестве аргумента. Все возможности платформы являются частью этого клиента и реализуются через вызов методов объекта «T».
Простейший пример, думаю, все объяснит:

<script type="text/javascript">

  twttr.anywhere(function (T) {
    T.hovercards();
  });
</script>

Метод hovercards позволяет автоматически превращать текст вида @uncleyaru в ссылку на одноименный твиттер-аккаунт, а также выводит информацию о данном аккаунте в виде всплывающего окна (для краткости, я назвал это окно «карточкой»). Я подготовил наглядный пример. Быстренько ознакомьтесь и продолжим.
Метод anywhere может вызываться неограниченное количество раз в коде страницы.

Возможности @Anywhere

Автоматическая замена текста @uncleyaru на ссылку вида @uncleyaru (Auto-linkification).
Карточки (Hovercards), мы познакомились с ними в первом примере.
Кнопки Follow.
Окно отправки сообщений (Tweet Box).
Авторизация и регистрация с помощью твиттер.

Auto-linkification

Для автозамены нам нужно вызвать метод T.linkifyUsers():

<script type="text/javascript">

  twttr.anywhere(function (T) {
    T.linkifyUsers();
  });
</script>

Данный код заменит на ссылки все подходящие (слова длиной от 1 до 20 символов, начинающиеся с @ и включающие символы a...zA...Z0...9 и символ «_») твиттер-ники в пределах тега <body>.
Чтобы ограничить действие метода, передайте в качестве параметра объекта CSS селектор. В результате, действие метода будет распространяться только на имена, расположенные внутри элемента с заданным селектором. Например:

<script type="text/javascript">

  twttr.anywhere(function (T) {
    T("#linkify-this-content").linkifyUsers();
  });
</script>

Здесь, воздействию подвергнутся имена, находящиеся внутри элемента с id="linkify-this-content".
По умолчанию, метод linkifyUsers() присваивает именам стилевой класс twitter-anywhere-user, т.е. они обрамляются тегом вида <a class='twitter-anywhere-user'></a>. Чтобы изменить имя класса, просто задайте свойство className при вызове метода:

<script type="text/javascript">

  twttr.anywhere(function (T) {
    T("#linkify-this-content").linkifyUsers({ className: 'my-tweep' });
  });
</script>

В данном случае, именам будет присвоен класс my-tweep.

Карточки Hovercards

Возможности данного метода мы рассмотрели в первом примере. Ниже я повторил код вызова метода:

<script type="text/javascript">

  twttr.anywhere(function (T) {
    T.hovercards();
  });
</script>

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

Не забудьте подписаться на RSS.

Еще интересно почитать:

Рубрики: twitter
Теги: anywhere, twitter, твиттер

25 комментариев к Интегрируем Twitter на сайт за 5 минут с @Anywhere

Евгений

мая 2, 2010 | 22:15

Дядя Яша, баян какой-то гоните Видеоурок на youtube в буржнете с аналогичным названием

Дядя Яша

мая 2, 2010 | 22:37

Потерто...

Евгений, я свои посты пишу, основываясь на личном опыте. Я стараюсь давать качественный материал, а не заниматься перепостингом «видеоуроков из буржунета».

TiamatInc

мая 3, 2010 | 12:29

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

З.Ы. Прошу прощения, что немного не в тему поста.

modia

мая 23, 2010 | 21:02

Главное,что информация полезная,а буржуйская или нет не столь важно

Ирина

июня 24, 2010 | 22:35

Спасибо за инструкцию по интеграции твиттера. Очень помогли.

dim

июля 29, 2010 | 13:58

Нужно будет попробовать интегрировать, спасибо за инструкцию, а вдруг пригодится!

Михаил

июля 30, 2010 | 14:38

Отличный мануал по интеграции Твиттера. Сохранил в закладки.

Владимир

августа 8, 2010 | 9:11

Правильно сказал TiamatInc. Я вот совершенно не владею иностранным язком, так для меня инфа идет только на пользу.

Вячеслав

сентября 13, 2010 | 1:11

Да ладно вам, высказался парень ничего страшного

По теме, перебрал кучу плагинов уже для твиттера, чтобы самостоятельно код в сайдбар вгонять (виджет не устраивает). Очень не хотелось прибегать к этому методу с API, но видимо придется. Сбоев нет?

алекс

ноября 16, 2010 | 3:51

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