Добавляем поддержку @anywhere от Twitter в WordPress блог
21-04-2010 | Автор: Yaroslav.CH |
Рубрика: Twitter
Метки: Разработчику
32
Эта статья относится к серии: Настройка и кастомизация WordPress
На днях 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 позволит пользователям фолловить вас прямо со страниц вашего блога. Вы можете разместить кнопку в записи или где вам будет удобно.
Вот живой пример этой кнопки, попробуйте:
Для того, чтобы активировать эту функцию, во-первых вставьте нижеследующий код в файл 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>
Вот живой пример работы формы, попробуйте:
Выводы
В репозитории WordPress есть несколько плагинов, которые позволяют добавлять для WordPress-блога такие вещи как всплывающая карточка Twitter-пользователя или автоматическое проставление ссылок на профили Twitter. Вы можете использовать эти плагины, если хотите, но установка функций настолько проста, что вы легко можете сделать все сами, без использования плагинов.
Если вам понравилась эта статья, пожалуйста, воспользуйтесь новым функционалом и ретвитните ее, а также не забудьте зафолловить меня в Twitter — @Proofsite.
В статье использованы материалы сайта wpbeginner.
3 
170 
13
Спасибо за статью, уже сделал все так же, за бугром уже успели пару тройку подробных мануалов накидать, похоже на переработку.
Но дело не в этом. А в том, что у меня сделано именно так все, но не работает. Пишет:
При авторизации с кнопкой или формой пишет ошибку:
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:
Тоже верно. Даже если будет ошибка, то большого вреда не случится :)