На днях 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.