Как увеличить количество твитов о вашем продукте или сайте с помощью системы загрузки

Твиттер, несомненно, популярная социальная сеть. И один из ключей ее успеха — это простой, но мощный API.

Одна из функций API позволяет платить за информацию твитом. Например, у вас есть какой-либо цифровой товар, который хочет скачать/посмотреть посетитель. А получит он свой товар после того, как отправит твит о вашем сайте. Это отличный способ для продвижения своего товара или сайта и при этом ничего не стоит вашему посетителю.

Построение такого функционала не сложно. Твиттер облегчил работу веб-разработчикам с помощью Web Intents. Таким образом интеграция платформы на ваш сайт стала очень простой. В этом руководстве мы создадим jQuery плагин, использующим этот API, который будет активировать кнопку загрузки после того, как пользователь отправит твит. Поехали!

HTML

Для начала строим HTML каркас.

index.html

Мы используем тэги из HTML5: в заголовке, в разделе и в подвале, чтобы логически разделить страницу на три части. Наш раздел #container содержит два анкора.

Первая ссылка – #tweetLink будет вызывать всплывающую форму для отправления твита. Вторая – #downloadButton оформлена в стиле кнопки с атрибутом href, содержащим ссылку на скачиваемый файл.

В конце файла вызываются следующие библиотеки: jQuery 1.6, плагин tweetAction.js и script.js, которые следят за кликами по ссылкам и за тригерами.

Теперь перейдем в раздел jQuery.

jQuery

Как вы можете видеть из документации Web Intents, интерфейс взаимодействия с Твиттером может быть всплывающим модальным окном. Вам нужно просто загрузить конкретные intent URL во всплывающем окне и передать параметры GET с помощью текста твита, имени пользователя в Твиттере и так далее. Это все создаcт форму, с помощью которой пользователь сможет отправлять новый твит, отвечать или следовать за вами. Конечно, можно не заморачиваться и заказать создание подобного скрипта на бирже удаленной работы http://www.weblancer.net/

Давайте положим все вместе в один jQuery плагин:

jquery.tweetAction.js

Чтобы открыть всплывающее окно с помощью window.open(), нам нужно передать список переменных, разделенных запятыми. Во всплывающем окне можно управлять следующими элементами: адресная строка, размеры и позиция окна.

После открытия </code> мы проверяем атрибут окна <code>closed каждые 100 ms с помощью запуска функции checkWindow() с интервалом setTimeout(). Это единственный способ проверки закрытия модального окна.

Вы можете видеть код самого плагина ниже:

script.js

Во фрагменте выше, мы вызываем плагин tweetAction на анкоре #tweetLink. После того, как на нее щелкнут, мы отобразим всплывающее модальное окно, которое после закрытия выполнит обратный вызов. После этого активируем кнопку и присваиваем ее атрибуту href ссылку на требуемый материал.

CSS

Осталось только навести красоту с помощью CSS стилей. В статье будут представлены только самые интересные, остальные вы можете посмотреть в примере или в исходниках.

Мы используем мульти-бэкграунды на элементе html. Фоновые изображения отображаются друг под другом, начиная с самого верхнего – bg_gradient.jpg.

Дальше идут стили для иконки твиттера. Мы используем символ > для указания прямых потомков элемента body.

В конце у нас есть раздел #container. С помощью псевдо-элементов :before/:after, мы отображаем тени над и под контейнером.

На этом эксперимент с твитами закончен!

Но это еще не все! Не все работает, как надо!

Если вы тестировали пример, то наверное заметили, что кнопка активируется вне зависимости от того, твитнул ли посетитель или нет.

Дело в том, что с помощью API нельзя точно проверить, был ли опубликован твит. Можно попробовать покопать @Anywhere API, но даже, если и его приделать, то люди будут находить ссылку для скачивания в исходном коде страницы.

Так ли это важно?
Реальная цель этой технологии — стимулировать людей на твиты о вашем продукте/сайте и не более того.


Один комментарий на “Как увеличить количество твитов о вашем продукте или сайте с помощью системы загрузки

  1. Похожая вещь есть только с кнопкой Facebook, было бы не плохо если реализовать это с помощью нескольких соц сетей!

Оставить комментарий