До недавнего времени, внедрение возможности взаимодействия с Twitter API на сайт было процессом не самым простым. Приходилось скачивать и разбираться с библиотеками, либо писать их самому, а потом еще запихивать все это в код и отлаживать. Ничего невозможного нет, но времени отнимало достаточно.
Теперь Твиттер представил нам новое решение под названием @Anywhere, которое позволит, с помощью нескольких строчек кода, добавить на Ваш сайт возможность работы с Twitter.
Пост получился достаточно громоздкий, но тут действует принцип (немного перефразирую) «Лучше час потерять, зато потом за пять минут долететь» 
.
Данная платформа очень проста в применении, но на данный момент обладает меньшим функционалом по сравнению с Twitter API.
Давайте посмотрим, что умеет @Anywhere, и как это применить на практике. Оригинальное описание системы можете найти здесь. Я постараюсь объяснить не менее понятно и попробую дополнить от себя. Начнем.
Регистрируем приложение @Anywhere
Для начала, нам нужно зарегистрировать приложение. Авторизуйтесь в Твиттере и переходите сюда, заполните форму, указав название и описание приложения (например, «Блог Дяди Яши»), его адрес и тип (browser). Default Access type устанавливайте в Read & Write.
После регистрации Вы получите API key, который в дальнейшем нам пригодится.
Загружаем код @Anywhere
Чтобы использовать возможности платформы @Anywhere, нам нужно добавить загрузку anywhere.js в код тех страниц, где планируем его применять:
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> |
В качестве параметра передается API key и номер версии @Anywhere (на данный момент существует только версия 1).
Инициализируем @Anywhere
Скрипт создает объект twttr. Для использования @Anywhere, вызовите метод anywhere и получите экземпляр клиента Twitter API (решено называть его «T») в качестве аргумента. Все возможности платформы являются частью этого клиента и реализуются через вызов методов объекта «T».
Простейший пример, думаю, все объяснит:
1 |
<script type="text/javascript"> |
3 |
twttr.anywhere(function (T) { |
Метод hovercards позволяет автоматически превращать текст вида @uncleyaru в ссылку на одноименный твиттер-аккаунт, а также выводит информацию о данном аккаунте в виде всплывающего окна (для краткости, я назвал это окно «карточкой»). Я подготовил наглядный пример. Быстренько ознакомьтесь и продолжим.
Метод anywhere может вызываться неограниченное количество раз в коде страницы.
Возможности @Anywhere
- Автоматическая замена текста @uncleyaru на ссылку вида @uncleyaru (Auto-linkification).
- Карточки (Hovercards), мы познакомились с ними в первом примере.
- Кнопки Follow.
- Окно отправки сообщений (Tweet Box).
- Авторизация и регистрация с помощью твиттер.
Auto-linkification
Для автозамены нам нужно вызвать метод T.linkifyUsers():
1 |
<script type="text/javascript"> |
3 |
twttr.anywhere(function (T) { |
Данный код заменит на ссылки все подходящие (слова длиной от 1 до 20 символов, начинающиеся с @ и включающие символы a…zA…Z0…9 и символ «_») твиттер-ники в пределах тега <body>.
Чтобы ограничить действие метода, передайте в качестве параметра объекта CSS селектор. В результате, действие метода будет распространяться только на имена, расположенные внутри элемента с заданным селектором. Например:
1 |
<script type="text/javascript"> |
3 |
twttr.anywhere(function (T) { |
4 |
T("#linkify-this-content").linkifyUsers(); |
Здесь, воздействию подвергнутся имена, находящиеся внутри элемента с id="linkify-this-content".
По умолчанию, метод linkifyUsers() присваивает именам стилевой класс twitter-anywhere-user, т.е. они обрамляются тегом вида <a class='twitter-anywhere-user'></a>. Чтобы изменить имя класса, просто задайте свойство className при вызове метода:
1 |
<script type="text/javascript"> |
3 |
twttr.anywhere(function (T) { |
4 |
T("#linkify-this-content").linkifyUsers({ className: 'my-tweep' }); |
В данном случае, именам будет присвоен класс my-tweep.
Карточки Hovercards
Возможности данного метода мы рассмотрели в первом примере. Ниже я повторил код вызова метода:
1 |
<script type="text/javascript"> |
3 |
twttr.anywhere(function (T) { |
Более подробно об этом и других методах я расскажу в следующем посте. Не переключайтесь
9 комментариев to Интегрируем Twitter на сайт за 5 минут с @Anywhere
Евгений
2 мая, 2010 at 22:15
Дядя Яша, баян какой-то гоните
Видеоурок на youtube в буржнете с аналогичным названием 
Дядя Яша
2 мая, 2010 at 22:37
Потерто…Евгений, я свои посты пишу, основываясь на личном опыте. Я стараюсь давать качественный материал, а не заниматься перепостингом «видеоуроков из буржунета».
TiamatInc
3 мая, 2010 at 12:29
Даже если бы это был перевод, то что в этом такого. Далеко не все обладают хорошим знанием буржуйского, чтобы свободно смотреть видео на нем.З.Ы. Прошу прощения, что немного не в тему поста.
modia
23 мая, 2010 at 21:02
Главное,что информация полезная,а буржуйская или нет не столь важно
Ирина
24 июня, 2010 at 22:35
Спасибо за инструкцию по интеграции твиттера. Очень помогли.
dim
29 июля, 2010 at 13:58
Нужно будет попробовать интегрировать, спасибо за инструкцию, а вдруг пригодится!
Михаил
30 июля, 2010 at 14:38
Отличный мануал по интеграции Твиттера. Сохранил в закладки.
Владимир
8 августа, 2010 at 09:11
Правильно сказал TiamatInc. Я вот совершенно не владею иностранным язком, так для меня инфа идет только на пользу.
Вячеслав
13 сентября, 2010 at 01:11
Да ладно вам, высказался парень ничего страшного
По теме, перебрал кучу плагинов уже для твиттера, чтобы самостоятельно код в сайдбар вгонять (виджет не устраивает). Очень не хотелось прибегать к этому методу с API, но видимо придется. Сбоев нет? 