Добавляем поддержку @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
А мне понравилась вот эта кнопка-подпись под комментарием с ссылкой на тви-акк коментатора: Follow me on twitter. Надо себе такую сделать.
@Makermoney: как сделать такую кнопку — читайте в статье «Обустраиваем рабочее место комментатора».
Функция интересная. Но вот задумался тут над таким вопросом — все больше и больше социальных сетей и т.п. делают различные сервисы для сайтов. К чему же в конце концов придет интернет... Может к тому, что в конце концов это окажется настоящей паутиной — каждый сайт как нитями будет опутан разного рода ссылками на соцсети, а социальные сети наоборот?
Мануал действительно хороший , думаю что разберётся даже человек который не разбирается в пхп и прочих премудростях. Твитер рулит.
На досуге попробую привинтить. Думаю это очень полезно, хотя твиттер у нас не особо развит.
@MIKL: спасибо за комментарий.
Не совсем только понимаю, а почему он не особо развит?
А у меня ту же задачу решает Disqus. Можно поставить галочку и копия коммента автоматом уйдет в Твиттер. Это лучше, чем у вас, потому что пользователь оставляет 2 коммента — на блоге и в твиттере. Да и у самого нет никаких проблем с наполнением твит-ленты, туда идет часть ответов на комменты. Минус, правда, что не все регистрируются в Disqus, но его популярность растет.
@justsoblogger: спасибо за комментарий.
«Эту» — это какую из? :) Задач, которые решает такого рода интеграция — несколько.
А зачем оставлять комментарий в твиттере? Более того, лично мне такой вариант не нравится по 3-м причинам:
1. Комментарий чаще всего больше 140 символов. Всякого рода «спасибо» и т.д. мы не учитываем.
2. Комментарий чаще всего — ответ на саму статью, следовательно он оторван от контекста. Твиттер все же — микроблог, а не сборник рваных цитат.
3. Не смотря на то, что я зарегистрирован в Дискусе, я никогда не сипользую этот функционал. Мне не нравится такой вариант, поскольку мне интересно читать законченные твиты, а не какие-то непонятные обрывки непонятно откуда взявшиеся.
Кроме того, этот функционал позволяет просто отправлять твиты из блога — я привел ссылку на данную статью в качестве текста по-умолчанию для демонстрации работы переменной.
А у меня и так нет проблем с ее наполнением :) Кроме того, ИМХО, но как я уже сказал выше, забивать ленту рваными обрывками непонятного текста — совсем не комильфо.
И глючность, кстати, тоже. Я вот, например, вчера пытался у Вас же в блоге отредактировать комментарий — попытки не увенчались успехом, Дискус упрямо писал «Секундочку» и на этом все заканчивалось.
Поставил, всё работает, спасибо. Вопрос: а как поменять цвет кнопки?
@dionis: отлично :) Честно говоря, я не задавался этим вопросом — нужно поискать в Twitter API. Ссылка есть в тексте статьи.