Добавляем поддержку @anywhere от Twitter в WordPress блог
Дата: 21-04-2010 |
Автор: Yaroslav.CH
| Рубрика: Twitter
Метки: Разработчику
32
Серия: Настройка и кастомизация Wordpress. Часть: 2 из 9
На днях Twitter анонсировал свою платформу для взаимодействия со сторонними сайтами, под названием @anywhere. Эта платформа позволяет интегрировать Twitter в ваш сайт, используя всего лишь несколько простых строк JavaScript-кода.
Ее применение позволит вам получать больше твитов, больше трафика, больше фолловеров, более активное их участие, больше пользователей для блога и более глубокую интеграцию. Согласитесь, очень неплохо.
Теперь вы получите возможность вставлять специальное поле для публикации твитов, позволяющее пользователям твитить прямо с со страниц вашего блога. Кроме того, использование платформы @anywhere позволяет автоматически добавлять ко всем именам пользователей Twitter, найденным на страницах вашего блога, ссылки на соответствующие Twitter-профили (например, @Proofsite).
Если вы включите опцию всплывающей карточки пользователя, посетители вашего блога будут видеть всплывающее окно, содержащее информацию о Twitter-пользователе и кнопку Follow (аналог этой функции можно увидеть в web-интерфейсе Twitter).
И на закуску — присутствует специальная форма, позволяющая отправлять твиты непосредственно со странице блога.
На мой взгляд, новая платформа будет играть огромную роль в будущем, в качестве инструмента популяризации и роста самого Twitter. В этой статье я продемонстрирую вам — как добавить элементы из новой платформы @anywhere от Twitter на ваш WordPress-блог.
Шаг 1: Регистрируемся в API
Перед тем как добавить поддержку платформы @anywhere для вашего блога, необходимо зарегистрироваться в API. Заполнять данные необходимо вот так, для примера:
После регистрации вы получите API ключ — Consumer key. Затем необходимо убедиться в том, что уровень прав выставлен на «Чтение» и «Запись», в противном случае у пользователей не будет возможности кликнуть на кнопку «Follow». В данный момент эта функция работает несколько неправильно по вине самого Twitter, но разработчики занимаются ее устранением. Но, на всякий случай, я покажу вам как это сделать:
- для начала кликните на ссылку http://twitter.com/oauth;
- на открывшейся странице вы увидите зарегистрированное вами приложение;
- нажав на названии приложения, вы увидите страницу с детальной информацией о приложении;
- на этой же странице есть кнопка, которая называется «Edit Application Settings»;
- нажмите на эту кнопку и прокрутите страницу редактирования до раздела «Default Access type»;
- измените положение переключателя на «Read & Write»;
- Сохраните сделанные изменения, нажав на кнопку «Save».
Шаг 2. Интегрируем приложение в блог
Учитывая тот факт, что платформа обладает достаточно широким спектром функций, мы будем последовательно рассматривать каждую из них. Для начала подключения функционала, вам необходимо настроить вызов основного JavaScript-кода. Twitter рекомендует разместить этот скрипт в файле header.php (между тегами <head> и </head>):
<script src="http://platform.twitter.com/anywhere.js?id=YourAPIKey&v=1" type="text/javascript"></script>
Теперь посмотрим на индивидуальные особенности платформы, доступные для для вашего блога.
Автоматическая ссылка на имена пользователей Twitter
Эта функция платформы @anywhere от Twitter позволяет создавать автоматические ссылки на имена пользователей Twitter в записях и комментариях вашего блога.
Если на странице или в записи вы упомянете имя Twitter-пользователя в следующем формате: @Proofsite, платформа автоматически поставит ссылку на учетную запись в Twitter.
Эта функция позволит вам экономить много времени при написании статей и упоминания определенных Twitter-пользователей. Для того, чтобы активировать эту опцию, просто вставьте нижеследующий код в заголовок сайта, после основного Javascript-кода.
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter.linkifyUsers();
};
</script>
Пример работы функции можно увидеть прямо в этой статье:
Функция позволяет автоматически проставить ссылки на имена пользователей Twitter, исключая ссылки, скрипты, фреймы, текстовые области, теги заголовков и другие кнопки.
Автоматическая ссылка на имена пользователей Twitter с всплывающей карточкой
Эта опция платформы @anywhere от Twitter позволит вам автоматически вставлять ссылки на все найденные на странице профили пользователей в Twitter, а кроме того — выводит всплывающую подсказку при наведении курсора мыши на ссылку.
То есть, теперь, когда посетитель вашего блога подведет курсор мыши к имени пользователя Twitter (например, @Proofsite), он увидит вот такую всплывающую подсказку:
Если он кликнет на кнопке «Follow», он сможет напрямую зафолловить вас прямо со страницы вашего блога. А нажатие на ссылку «more» — позволит ему посмотреть подробную информацию о вашем профиле в Twitter.
Для того, чтобы активировать эту функцию, просто вставьте нижеследующий код в файл header.php, сразу после основного JavaScript-кода.
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter.hovercards();
};
</script>
Умная кнопка «Follow» для Twitter
Умная кнопка платформы @anywhere позволит пользователям фолловить вас прямо со страниц вашего блога. Вы можете разместить кнопку в записи или где вам будет удобно.
Вот живой пример этой кнопки, попробуйте: [insert-html-here 1]
Для того, чтобы активировать эту функцию, во-первых вставьте нижеследующий код в файл header.php, сразу после основного JavaScript-кода.
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter('#follow-Proofsite').followButton("Proofsite");
};
</script>
И во-вторых, вставьте вот такой тег div там, где вы хотите отобразить эту кнопку:
<div id="follow-Proofsite"></div>
Окно публикации твитов на вашем блоге
С помощью платформы @anywhere от Twitter, вы можете также создать специальное поле, используя которое пользователи получат возможность отправлять твиты непосредственно из вашего блога, даже не открывая страницу самого Twitter.
Для того, чтобы активировать эту функцию, во-первых — вставьте нижеследующий код в файл header.php, сразу после основного JavaScript-кода.
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter("#custom-tweetbox").tweetBox({
label: "Ваш твит:",
defaultContent: "RT @proofsite Как добавить поддержку @anywhere от Twitter в WordPress | Proofsite: ваш cайт должен продавать! http://bit.ly/andSn2 ;)",
height: 50,
width: 250,
});
};
</script>
где:
- label — заголовок формы;
- defaultContent — информация, которая размещается в форме по-умолчанию, сразу при загрузке;
- height — высота формы в пикселях;
- width — ширина формы в пикселях.
И во-вторых, вставьте вот такой тег div там, где вы хотите отобразить это поле:
<div id="custom-tweetbox"></div>
Вот живой пример работы формы, попробуйте:
[insert-html-here 2]
Выводы
В репозитории WordPress есть несколько плагинов, которые позволяют добавлять для WordPress-блога такие вещи как всплывающая карточка Twitter-пользователя или автоматическое проставление ссылок на профили Twitter. Вы можете использовать эти плагины, если хотите, но установка функций настолько проста, что вы легко можете сделать все сами, без использования плагинов.
Если вам понравилась эта статья, пожалуйста, воспользуйтесь новым функционалом и ретвитните ее, а также не забудьте зафолловить меня в Twitter — @Proofsite.
В статье использованы материалы сайта wpbeginner.
Спасибо за статью, уже сделал все так же, за бугром уже успели пару тройку подробных мануалов накидать, похоже на переработку.
Но дело не в этом. А в том, что у меня сделано именно так все, но не работает. Пишет:
При авторизации с кнопкой или формой пишет ошибку:
The provided callback url twtt.ru/twitter-tips/screencast-money.html is not authorized for the client registered to 'http://www.twtt.ru'.
!? Помогите, в чем проблема?
@Евгений: а Вы, случайно, с функцией «onTweet» не игрались?
Кстати, не совсем понял — в Twitter говорите, «ну так не интересно все молчат, че никто API Twitter не знает ? :) я нет :)», а тут через 3 минуты — «уже все сделал, но не работает» ;)
onTweet, неа. Даже не представляю где она :)
@Евгений:
Тогда проверьте в настройках API строку «Registered OAuth Callback URL» — там указан
www.twtt.ruилиtwtt.ru?Спасибо за подробный мануал! Тоже закинул к себе на блог форму отправки да преобразователь имен в ссылки. Полезные вещицы :)
Ярослав, сорри за офтоп, но у меня к вам вопрос по поводу доп. поля в форме комментариев, в которое можно добавить ник в Twitter. Как вы решаете проблему с редактированием? Ведь в админской это поле на странице редактирования не появляется.
Очень интересная штука, обязательно попробую !
@Игорь Квентор: спасибо за комментарий.
Хороший вопрос — честно говоря, никак не решаю и даже никогда не задумывался на эту тему.
А какая в этом есть необходимость? Если комментатор неверно ввел ник, то эта проблема будет единоразовой — только для одного комментария. При отправке следующего — он уже может откорректировать свое имя.
Если бы комментарии могли отправлять только зарегистрированные пользователи — тогда конечно, это было бы проблемой. А так — думаю, особого смысла нет.
Спасибо за информацию, сделел ретвит поста.
@Rostislav.: надеюсь, информация была полезна и спасибо за ретвит!
@© Yaroslav.CH:
Тоже верно. Даже если будет ошибка, то большого вреда не случится :)
А мне понравилась вот эта кнопка-подпись под комментарием с ссылкой на тви-акк коментатора: Follow me on twitter. Надо себе такую сделать.
@Makermoney: как сделать такую кнопку — читайте в статье «Обустраиваем рабочее место комментатора».
Функция интересная. Но вот задумался тут над таким вопросом — все больше и больше социальных сетей и т.п. делают различные сервисы для сайтов. К чему же в конце концов придет интернет... Может к тому, что в конце концов это окажется настоящей паутиной — каждый сайт как нитями будет опутан разного рода ссылками на соцсети, а социальные сети наоборот?
Мануал действительно хороший , думаю что разберётся даже человек который не разбирается в пхп и прочих премудростях. Твитер рулит.
На досуге попробую привинтить. Думаю это очень полезно, хотя твиттер у нас не особо развит.
@MIKL: спасибо за комментарий.
Не совсем только понимаю, а почему он не особо развит?
А у меня ту же задачу решает Disqus. Можно поставить галочку и копия коммента автоматом уйдет в Твиттер. Это лучше, чем у вас, потому что пользователь оставляет 2 коммента — на блоге и в твиттере. Да и у самого нет никаких проблем с наполнением твит-ленты, туда идет часть ответов на комменты. Минус, правда, что не все регистрируются в Disqus, но его популярность растет.
@justsoblogger: спасибо за комментарий.
«Эту» — это какую из? :) Задач, которые решает такого рода интеграция — несколько.
А зачем оставлять комментарий в твиттере? Более того, лично мне такой вариант не нравится по 3-м причинам:
1. Комментарий чаще всего больше 140 символов. Всякого рода «спасибо» и т.д. мы не учитываем.
2. Комментарий чаще всего — ответ на саму статью, следовательно он оторван от контекста. Твиттер все же — микроблог, а не сборник рваных цитат.
3. Не смотря на то, что я зарегистрирован в Дискусе, я никогда не сипользую этот функционал. Мне не нравится такой вариант, поскольку мне интересно читать законченные твиты, а не какие-то непонятные обрывки непонятно откуда взявшиеся.
Кроме того, этот функционал позволяет просто отправлять твиты из блога — я привел ссылку на данную статью в качестве текста по-умолчанию для демонстрации работы переменной.
А у меня и так нет проблем с ее наполнением :) Кроме того, ИМХО, но как я уже сказал выше, забивать ленту рваными обрывками непонятного текста — совсем не комильфо.
И глючность, кстати, тоже. Я вот, например, вчера пытался у Вас же в блоге отредактировать комментарий — попытки не увенчались успехом, Дискус упрямо писал «Секундочку» и на этом все заканчивалось.
Поставил, всё работает, спасибо. Вопрос: а как поменять цвет кнопки?
@dionis: отлично :) Честно говоря, я не задавался этим вопросом — нужно поискать в Twitter API. Ссылка есть в тексте статьи.
@© Yaroslav.CH: Спасибо, попробую поискать в Twitter API, о результатах отпишусь. Я думаю многим будет интересно всё таки подобрать цвет кнопки к цвету своего шаблона.
@dionis:
Буду благодарен — тоже подумывал над сменой цвета кнопки (в сущности, потому пока и не использую ее на блоге), но нет времени сесть и предметно поискать.
Если найдете информацию и механизм решения — с меня постовой в статье :)
Статья класная, возможно и полезная, но как насчёт того, что это лишняя ссылка на ресурс — её надо закрывать спец. тегами или нет?
Спасибо огромное за столь подробную статью про @anywhere, как раз искал, чтобы установить себе в блог.
Спасибо за подробное описание этой платформы, обязательно попробую у себя на блоге. Сделел ретвит и зафолловил прямо с этой страницы ;-)
Замечательный у вас блог спасибо большое за полезную информацию!
Твиттер скорее игрушка. Указанные плагины на сайт бы себе не ставил. добавил себе только кнопку фолловинга — дань моде, чтобы не отличаться от других.
@AdsenSe Devvver: ну тут уж, как говорится, «ту хум хау» :) Мне Твиттер нравится/удобен и как сервис, и как средство коммуникации.
Спасибо, статья нужная. Поставил на свой сайт — нравиться. Буду пользоваться и другим советую.
Очень интересная статья.Узнал много нового.Единственное неудобно смотреть у вас скриншоты всегда перекидывает в начало статьи, и если читаешь где нибудь в середине или в конце приходится скролить.Советую использовать другие плагины для картинок.
ОГРОМНОЕ СПАСИБО! Сори что кричу. Просто надоело гуглить.Впринципе и сам разобрался но информация как раз та которая мне нужна. Жаль только что без api кода не работает(. Надеялся что так прокатит.Аа для каждого сайта нужно каждый раз регистрировать? Не подскажите? Спасибо
У меня на блоге есть «добавить статью» и транслируется лента моего твиттера, но предложенная вами форма, конечно будет результативней.