175 Твиттер, несомненно, популярная социальная сеть. И один из ключей ее успеха — это простой, но мощный API.
Одна из функций API позволяет платить за информацию твитом. Например, у вас есть какой-либо цифровой товар, который хочет скачать/посмотреть посетитель. А получит он свой товар после того, как отправит твит о вашем сайте. Это отличный способ для продвижения своего товара или сайта и при этом ничего не стоит вашему посетителю.
Построение такого функционала не сложно. Твиттер облегчил работу веб-разработчикам с помощью Web Intents. Таким образом интеграция платформы на ваш сайт стала очень простой. В этом руководстве мы создадим jQuery плагин, использующим этот API, который будет активировать кнопку загрузки после того, как пользователь отправит твит. Поехали!
HTML
Для начала строим HTML каркас.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Tweet to Download | Tutorialzine Demo</title> <!-- Our CSS stylesheet file --> <link rel="stylesheet" href="assets/css/styles.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1>Tweet to Download</h1> <h2><a href="http://tutorialzine.com/2011/05/tweet-to-download-jquery/">« Back to Tutorialzine</a></h2> </header> <section id="container"> <p>The button below is activated<br />only* after you tweet. <a href="#" id="tweetLink">Try it.</a></p> <a href="#" class="downloadButton">Download</a> </section> <footer>*Not exactly. Read more in the tutorial..</footer> <img src="assets/img/twitter_bird.png" alt="Twitter Bird" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="assets/js/jquery.tweetAction.js"></script> <script src="assets/js/script.js"></script> </body> </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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
(function($){ var win = null; $.fn.tweetAction = function(options,callback){ // Default parameters of the tweet popup: options = $.extend({ url:window.location.href }, options); return this.click(function(e){ if(win){ // If a popup window is already shown, // do nothing; e.preventDefault(); return; } var width = 550, height = 350, top = (window.screen.height - height)/2, left = (window.screen.width - width)/2; var config = [ 'scrollbars=yes','resizable=yes','toolbar=no','location=yes', 'width='+width,'height='+height,'left='+left, 'top='+top ].join(','); // Opening a popup window pointing to the twitter intent API: win = window.open('http://twitter.com/intent/tweet?'+$.param(options), 'TweetWindow',config); // Checking whether the window is closed every 100 milliseconds. (function checkWindow(){ try{ // Opera raises a security exception, so we // need to put this code in a try/catch: if(!win || win.closed){ throw "Closed!"; } else { setTimeout(checkWindow,100); } } catch(e){ // Executing the callback, passed // as an argument to the plugin. win = null; callback(); } })(); e.preventDefault(); }); }; })(jQuery); |
Чтобы открыть всплывающее окно с помощью window.open(), нам нужно передать список переменных, разделенных запятыми. Во всплывающем окне можно управлять следующими элементами: адресная строка, размеры и позиция окна.
После открытия </code> мы проверяем атрибут окна <code>closed каждые 100 ms с помощью запуска функции checkWindow() с интервалом setTimeout(). Это единственный способ проверки закрытия модального окна.
Вы можете видеть код самого плагина ниже:
script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(document).ready(function(){ // Using our tweetAction plugin. For a complete list with supported // parameters, refer to $('#tweetLink').tweetAction({ text: 'How to make a simple Tweet to Download system', url: 'http://tutorialzine.com/2011/05/tweet-to-download-jquery/', via: 'tutorialzine', related: 'tutorialzine' },function(){ // Callback function. Triggered when the user closes the pop-up window: $('a.downloadButton') .addClass('active') .attr('href','tweet_to_download.zip'); }); }); |
Во фрагменте выше, мы вызываем плагин tweetAction на анкоре #tweetLink. После того, как на нее щелкнут, мы отобразим всплывающее модальное окно, которое после закрытия выполнит обратный вызов. После этого активируем кнопку и присваиваем ее атрибуту href ссылку на требуемый материал.
CSS
Осталось только навести красоту с помощью CSS стилей. В статье будут представлены только самые интересные, остальные вы можете посмотреть в примере или в исходниках.
Мы используем мульти-бэкграунды на элементе html. Фоновые изображения отображаются друг под другом, начиная с самого верхнего – bg_gradient.jpg.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
html{ /* CSS3 Multiple backgrounds with a fallback */ background-color:#e4e4e4; background:url('../img/bg_gradient.jpg') no-repeat center center,url('../img/bg_tile.jpg'); } body{ color:#888; padding:10px; min-height:600px; font:14px/1.3 'Segoe UI',Arial, sans-serif; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7); } |
Дальше идут стили для иконки твиттера. Мы используем символ > для указания прямых потомков элемента body.
|
1 2 3 4 5 6 |
body > img{ /* The twitter illustration */ margin:50px auto 0; display:block; } |
В конце у нас есть раздел #container. С помощью псевдо-элементов :before/:after, мы отображаем тени над и под контейнером.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
#container{ width:450px; height:300px; padding:10px; text-align:center; margin:0 auto; position:relative; background-color:#fff; display:block; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } #container:before, #container:after{ /* Adding subtle shadows with before/after elements */ content:'.'; text-indent:-99999px; overflow:hidden; display:block; height:12px; width:470px; background:url('../img/shadows.png') no-repeat center top; position:absolute; left:0; top:-12px; } #container:after{ top:auto; bottom:-12px; background-position:center bottom; } |
На этом эксперимент с твитами закончен!
Но это еще не все! Не все работает, как надо!
Если вы тестировали пример, то наверное заметили, что кнопка активируется вне зависимости от того, твитнул ли посетитель или нет.
Дело в том, что с помощью API нельзя точно проверить, был ли опубликован твит. Можно попробовать покопать @Anywhere API, но даже, если и его приделать, то люди будут находить ссылку для скачивания в исходном коде страницы.
Так ли это важно?
Реальная цель этой технологии — стимулировать людей на твиты о вашем продукте/сайте и не более того.
Похожая вещь есть только с кнопкой Facebook, было бы не плохо если реализовать это с помощью нескольких соц сетей!