Интегрируем 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 в код тех страниц, где планируем его применять:

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

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

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

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

1 <script type="text/javascript">
2
3   twttr.anywhere(function (T) {
4     T.hovercards();
5   });
6 </script>

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

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

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

Auto-linkification

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

1 <script type="text/javascript">
2
3   twttr.anywhere(function (T) {
4     T.linkifyUsers();
5   });
6 </script>

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

1 <script type="text/javascript">
2
3   twttr.anywhere(function (T) {
4     T("#linkify-this-content").linkifyUsers();
5   });
6 </script>

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

1 <script type="text/javascript">
2
3   twttr.anywhere(function (T) {
4     T("#linkify-this-content").linkifyUsers({ className: 'my-tweep' });
5   });
6 </script>

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

Карточки Hovercards

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

1 <script type="text/javascript">
2
3   twttr.anywhere(function (T) {
4     T.hovercards();
5   });
6 </script>

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

Подписаться на дядю Яшу


Введите свой e-mail адрес:


 

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

Avatar

Евгений

Май 2nd, 2010 at 22:15

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

Avatar

Дядя Яша

Май 2nd, 2010 at 22:37

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

Avatar

TiamatInc

Май 3rd, 2010 at 12:29

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

Avatar

modia

Май 23rd, 2010 at 21:02

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

Avatar

Ирина

Июнь 24th, 2010 at 22:35

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

Avatar

dim

Июль 29th, 2010 at 13:58

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

Avatar

Михаил

Июль 30th, 2010 at 14:38

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

Avatar

Владимир

Август 8th, 2010 at 09:11

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

Avatar

Вячеслав

Сентябрь 13th, 2010 at 01:11

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

Комментировать

Наверх