Добавляем поддержку @anywhere от Twitter в WordPress блог

Добавляем поддержку @anywhere от Twitter в WordPress

На днях Twitter анонсировал свою платформу для взаимодействия со сторонними сайтами, под названием @anywhere. Эта платформа позволяет интегрировать Twitter в ваш сайт, используя всего лишь несколько простых строк JavaScript-кода.

Ее применение позволит вам получать больше твитов, больше трафика, больше фолловеров, более активное их участие, больше пользователей для блога и более глубокую интеграцию. Согласитесь, очень неплохо.

Теперь вы получите возможность вставлять специальное поле для публикации твитов, позволяющее пользователям твитить прямо с со страниц вашего блога. Кроме того, использование платформы  @anywhere позволяет автоматически добавлять ко всем именам пользователей Twitter, найденным на страницах вашего блога, ссылки на соответствующие Twitter-профили (например, @Proofsite).

Если вы включите опцию всплывающей карточки пользователя, посетители вашего блога будут видеть всплывающее окно, содержащее информацию о Twitter-пользователе и кнопку Follow (аналог этой функции можно увидеть в web-интерфейсе Twitter).

И на закуску — присутствует специальная форма, позволяющая отправлять твиты непосредственно со странице блога.

На мой взгляд, новая платформа будет играть огромную роль в будущем, в качестве инструмента популяризации и роста самого Twitter. В этой статье я продемонстрирую вам — как добавить элементы из новой платформы @anywhere от Twitter на ваш WordPress-блог.

Шаг 1: Регистрируемся в API

Перед тем как добавить поддержку платформы @anywhere для вашего блога, необходимо зарегистрироваться в API. Заполнять данные необходимо вот так, для примера:

Twitter-платформа @anywhere - регистрация в API

После регистрации вы получите API ключ — Consumer key. Затем необходимо убедиться в том, что уровень прав выставлен на «Чтение» и «Запись», в противном случае у пользователей не будет возможности кликнуть на кнопку «Follow». В данный момент эта функция работает несколько неправильно по вине самого Twitter, но разработчики занимаются ее устранением. Но, на всякий случай, я покажу вам как это сделать:

  1. для начала кликните на ссылку http://twitter.com/oauth;
  2. на открывшейся странице вы увидите зарегистрированное вами приложение;
  3. нажав на названии приложения, вы увидите страницу с детальной информацией о приложении;
  4. на этой же странице есть кнопка, которая называется «Edit Application Settings»;
  5. нажмите на эту кнопку и прокрутите страницу редактирования до раздела «Default Access type»;
  6. измените положение переключателя на «Read & Write»;
  7. Сохраните сделанные изменения, нажав на кнопку «Save».

Шаг 2. Интегрируем приложение в блог

Учитывая тот факт, что платформа обладает достаточно широким спектром функций, мы будем последовательно рассматривать каждую из них. Для начала подключения функционала, вам необходимо настроить вызов основного JavaScript-кода. Twitter рекомендует разместить этот скрипт в файле header.php (между тегами <head> и </head>):


<script src="http://platform.twitter.com/anywhere.js?id=YourAPIKey&v=1" type="text/javascript"></script>
Помните, что вместо слова «YourAPIKey» необходимо вставить ваш собственный ключ.

Теперь посмотрим на индивидуальные особенности платформы, доступные для для вашего блога.

Автоматическая ссылка на имена пользователей Twitter

Эта функция платформы @anywhere от Twitter позволяет создавать автоматические ссылки на имена пользователей Twitter в записях и комментариях вашего блога.

Если на странице или в записи вы упомянете имя Twitter-пользователя в следующем формате: @Proofsite, платформа автоматически поставит ссылку на учетную запись в Twitter.

Эта функция позволит вам экономить много времени при написании статей и упоминания определенных Twitter-пользователей. Для того, чтобы активировать эту опцию, просто вставьте нижеследующий код в заголовок сайта, после основного Javascript-кода.

<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter.linkifyUsers();
};
</script>

Пример работы функции можно увидеть прямо в этой статье:

Автоматическая ссылка на имена пользователей Twitter

Функция позволяет автоматически проставить ссылки на имена пользователей Twitter, исключая ссылки, скрипты, фреймы, текстовые области, теги заголовков и другие кнопки.

Автоматическая ссылка на имена пользователей Twitter с всплывающей карточкой

Эта опция платформы @anywhere от Twitter  позволит вам автоматически вставлять ссылки на все найденные на странице профили пользователей в Twitter, а кроме того — выводит всплывающую подсказку при наведении курсора мыши на ссылку.

То есть, теперь, когда посетитель вашего блога подведет курсор мыши к имени пользователя Twitter (например, @Proofsite), он увидит вот такую всплывающую подсказку:

Автоматическая ссылка на имена пользователей Twitter с всплывающей подсказкой

Если он кликнет на кнопке «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>
Не забудьте поменять «Proofsite» на ваше имя пользователя в Twitter.

Окно публикации твитов на вашем блоге

С помощью платформы @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.

Команда SEO-специалистов агентства интернет-рекламы «ИДЕАЛ», базируясь на многолетнем опыте и современных технологиях, обеспечит продвижение сайта и вывод в лидеры поисковых систем в кратчайшие сроки.
команда SEO-специалистов, базируясь на многолетнем опыте и современных технологиях, обеспечит продвижение и раскрутку сайта, и вывод в лидеры поисковых систем в кратчайшие сроки.

32 комментария к “Добавляем поддержку @anywhere от Twitter в WordPress блог”

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

    Но дело не в этом. А в том, что у меня сделано именно так все, но не работает. Пишет:

    При авторизации с кнопкой или формой пишет ошибку:

    The provided callback url twtt.ru/twitter-tips/screencast-money.html is not authorized for the client registered to 'http://www.twtt.ru'.

    !? Помогите, в чем проблема?

    ОтветитьОтветить
  2. Спасибо за подробный мануал! Тоже закинул к себе на блог форму отправки да преобразователь имен в ссылки. Полезные вещицы :)

    Ярослав, сорри за офтоп, но у меня к вам вопрос по поводу доп. поля в форме комментариев, в которое можно добавить ник в Twitter. Как вы решаете проблему с редактированием? Ведь в админской это поле на странице редактирования не появляется.

    ОтветитьОтветить
  3. Очень интересная штука, обязательно попробую !

    ОтветитьОтветить
  4. @Игорь Квентор: спасибо за комментарий.

    Как вы решаете проблему с редактированием?

    Хороший вопрос — честно говоря, никак не решаю и даже никогда не задумывался на эту тему.

    А какая в этом есть необходимость? Если комментатор неверно ввел ник, то эта проблема будет единоразовой — только для одного комментария. При отправке следующего — он уже может откорректировать свое имя.

    Если бы комментарии могли отправлять только зарегистрированные пользователи — тогда конечно, это было бы проблемой. А так — думаю, особого смысла нет.

    ОтветитьОтветить
  5. А мне понравилась вот эта кнопка-подпись под комментарием с ссылкой на тви-акк коментатора: Follow me on twitter. Надо себе такую сделать.

    ОтветитьОтветить
  6. Функция интересная. Но вот задумался тут над таким вопросом — все больше и больше социальных сетей и т.п. делают различные сервисы для сайтов. К чему же в конце концов придет интернет... Может к тому, что в конце концов это окажется настоящей паутиной — каждый сайт как нитями будет опутан разного рода ссылками на соцсети, а социальные сети наоборот?

    ОтветитьОтветить
  7. Мануал действительно хороший , думаю что разберётся даже человек который не разбирается в пхп и прочих премудростях. Твитер рулит.

    ОтветитьОтветить
  8. На досуге попробую привинтить. Думаю это очень полезно, хотя твиттер у нас не особо развит.

    ОтветитьОтветить
  9. @MIKL: спасибо за комментарий.

    Не совсем только понимаю, а почему он не особо развит?

    ОтветитьОтветить
  10. А у меня ту же задачу решает Disqus. Можно поставить галочку и копия коммента автоматом уйдет в Твиттер. Это лучше, чем у вас, потому что пользователь оставляет 2 коммента — на блоге и в твиттере. Да и у самого нет никаких проблем с наполнением твит-ленты, туда идет часть ответов на комменты. Минус, правда, что не все регистрируются в Disqus, но его популярность растет.

    ОтветитьОтветить
  11. @justsoblogger: спасибо за комментарий.

    А у меня ту же задачу решает Disqus.

    «Эту» — это какую из? :) Задач, которые решает такого рода интеграция — несколько.

    Это лучше, чем у вас, потому что пользователь оставляет 2 коммента — на блоге и в твиттере.

    А зачем оставлять комментарий в твиттере? Более того, лично мне такой вариант не нравится по 3-м причинам:

    1. Комментарий чаще всего больше 140 символов. Всякого рода «спасибо» и т.д. мы не учитываем.

    2. Комментарий чаще всего — ответ на саму статью, следовательно он оторван от контекста. Твиттер все же — микроблог, а не сборник рваных цитат.

    3. Не смотря на то, что я зарегистрирован в Дискусе, я никогда не сипользую этот функционал. Мне не нравится такой вариант, поскольку мне интересно читать законченные твиты, а не какие-то непонятные обрывки непонятно откуда взявшиеся.

    Кроме того, этот функционал позволяет просто отправлять твиты из блога — я привел ссылку на данную статью в качестве текста по-умолчанию для демонстрации работы переменной.

    Да и у самого нет никаких проблем с наполнением твит-ленты, туда идет часть ответов на комменты.

    А у меня и так нет проблем с ее наполнением :) Кроме того, ИМХО, но как я уже сказал выше, забивать ленту рваными обрывками непонятного текста — совсем не комильфо.

    Минус, правда, что не все регистрируются в Disqus, но его популярность растет.

    И глючность, кстати, тоже. Я вот, например, вчера пытался у Вас же в блоге отредактировать комментарий — попытки не увенчались успехом, Дискус упрямо писал «Секундочку» и на этом все заканчивалось.

    ОтветитьОтветить
  12. Поставил, всё работает, спасибо. Вопрос: а как поменять цвет кнопки?

    ОтветитьОтветить
  13. @dionis: отлично :) Честно говоря, я не задавался этим вопросом — нужно поискать в Twitter API. Ссылка есть в тексте статьи.

    ОтветитьОтветить
  14. @© Yaroslav.CH: Спасибо, попробую поискать в Twitter API, о результатах отпишусь. Я думаю многим будет интересно всё таки подобрать цвет кнопки к цвету своего шаблона.

    ОтветитьОтветить
  15. @dionis:

    о результатах отпишусь

    Буду благодарен — тоже подумывал над сменой цвета кнопки (в сущности, потому пока и не использую ее на блоге), но нет времени сесть и предметно поискать.

    Если найдете информацию и механизм решения — с меня постовой в статье :)

    ОтветитьОтветить
  16. Статья класная, возможно и полезная, но как насчёт того, что это лишняя ссылка на ресурс — её надо закрывать спец. тегами или нет?

    ОтветитьОтветить
  17. Спасибо огромное за столь подробную статью про @anywhere, как раз искал, чтобы установить себе в блог.

    ОтветитьОтветить
  18. Спасибо за подробное описание этой платформы, обязательно попробую у себя на блоге. Сделел ретвит и зафолловил прямо с этой страницы ;-)

    ОтветитьОтветить
  19. Замечательный у вас блог спасибо большое за полезную информацию!

    ОтветитьОтветить
  20. Твиттер скорее игрушка. Указанные плагины на сайт бы себе не ставил. добавил себе только кнопку фолловинга — дань моде, чтобы не отличаться от других.

    ОтветитьОтветить
  21. @AdsenSe Devvver: ну тут уж, как говорится, «ту хум хау» :) Мне Твиттер нравится/удобен и как сервис, и как средство коммуникации.

    ОтветитьОтветить
  22. Спасибо, статья нужная. Поставил на свой сайт — нравиться. Буду пользоваться и другим советую.

    ОтветитьОтветить
  23. Очень интересная статья.Узнал много нового.Единственное неудобно смотреть у вас скриншоты всегда перекидывает в начало статьи, и если читаешь где нибудь в середине или в конце приходится скролить.Советую использовать другие плагины для картинок.

    ОтветитьОтветить
  24. ОГРОМНОЕ СПАСИБО! Сори что кричу. Просто надоело гуглить.Впринципе и сам разобрался но информация как раз та которая мне нужна. Жаль только что без api кода не работает(. Надеялся что так прокатит.Аа для каждого сайта нужно каждый раз регистрировать? Не подскажите? Спасибо

    ОтветитьОтветить
  25. У меня на блоге есть «добавить статью» и транслируется лента моего твиттера, но предложенная вами форма, конечно будет результативней.

    ОтветитьОтветить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *