Твитни, чтобы скачать!

Twitter - чрезвычайно популярная социальная сеть. Одной из самых сильных сторон данного продукта является простой для понимания и мощный, с точки зрения функциональности, API, который даёт вам возможность придумывать всё, что угодно.

demo
sourse

Одним из применений может быть “оплата за твит сообщение”. Например, вы выкладываете какой-то бесплатный продукт (электронная книга, mp3 или что-то ещё), и предлагаете это на скачку за сообщение. Это - отличный способ продвинуть ваши продукты и одновременно стать немного популярнее.

Вы думаете, это сложно реализовать? Twitter уже почти всё сделал за вас. В этом уроке мы покажем вам, как реализовать подобную систему. Чего же вы ждёте? Вперёд!

HTML

Для начала нам нужна HTML разметка.

index.html

<!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 сожержит в себе 2 ссылки.

Первая ссылка – #tweetLink предназначена для вызова плагина и всплывающего окна. Вторая – #downloadButton - это ссылка на файл для скачки.

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

Теперь давайте перейдём к jQuery.

jQuery

Как вы можете увидеть из документации Web Intents, мы можем использовать всплывающее окно для того, чтобы взаимодействовать с Twitter. Для этого нужно просто передать URL во всплывающее окно, а дальше передать GET параметры с текстом сообщения, именем пользователя Twitter и т.д.

Теперь давайте воспользуемся jQuery плагином:

jquery.tweetAction.js
(function($){

    var win = null;

    $.fn.tweetAction = function(options,callback){

        options = $.extend({
            url:window.location.href
        }, options);

        return this.click(function(e){

            if(win){
                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(',');

            win = window.open('http://twitter.com/intent/tweet?'+$.param(options),
                        'TweetWindow',config);

            (function checkWindow(){

                try{

                    if(!win || win.closed){
                        throw "Closed!";
                    }
                    else {
                        setTimeout(checkWindow,100);
                    }
                }
                catch(e){

                    win = null;
                    callback();
                }

            })();

            e.preventDefault();
        });

    };
})(jQuery);

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

После того, как мы открываем http://twitter.com/intent/tweet, проверяем атрибут closed каждые 100 миллисекунд, запуская функцию checkWindow() с setTimeout (). Это единственный способ, с помощью которого мы можем быть уверены, что popup был закрыт.

Использование плагина продемонстрировано ниже:

script.js

$(document).ready(function(){

    $('#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(){


        $('a.downloadButton')
                .addClass('active')
                .attr('href','tweet_to_download.zip');

    });

});

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

CSS

Единственная вещь, которую нам остаётся сделать, - это добавить некоторые необычные стили CSS. Тут я опишу только несколько из них. Остальные вы можете найти в assets/css/styles.css.

Для элемента html мы применяем несколько свойств.

html{
    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.

body > img{

    margin:50px auto 0;
    display:block;
}

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

#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{

    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;
}

Эти два псевдо элемента очень часто встречаются в коде, так что я выделил их в отдельную группу.

Вот наш эксперимент и подошёл к концу!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.tutorialzine.com/2011/05/tweet-to-download-jquery/
Перевел: Станислав Протасевич
Урок создан: 28 Июня 2011
Просмотров: 22471
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 28 Июня 2011 21:39
    Kapi
    чесно, маразм.
  • 28 Июня 2011 21:43
    ADIODAS
    А по мне так здорово!
  • 28 Июня 2011 22:16
    Денис Жушман
    Нажал,потом закрыл окно,и ВУА-ЛЯ... Появилась кнопка... Совсем не обязательно было авторизовыватся!
    • 7 Октября 2011 20:27
      nik7even
      тоже самое
  • 28 Июня 2011 22:16
    Илья Карлеоне
    маленький баг, при нажатии на "Try it", если у вас даже отсутствует аккаунт в твиттере, ссылка на скачивание всё равно появится =)
  • 29 Июня 2011 00:06
    notbot
    Маленький баг, у большинства пользователей рунета нет твиттера. Поэтому тут надо пользоваться ВКонтакте и не передирать иностранные уроки, не актуальные для рунета.
    • 29 Июня 2011 11:25
      art_reklama_com
      "у большинства пользователей рунета нет твиттера" вы глубоко заблуждаетесь! Почитайте, это данные только за 2010 год! http://sitequest.ru/node/95 ЗЫ: Сам я твиттер не люблю, но аккаунт завел и просто делаю перепост из контакта туда в автоматическом режиме. По уроку: хорошая тема, я считаю, для привлечения траффика на сайт.
      • 29 Июня 2011 14:27
        rubyx
        я тоже ненавижу "канарейку" :))
  • 29 Июня 2011 21:48
    Olegeo
    знаете в чем прикол? можно нажать твитни и закрыть окно ты не твитнешь а скачать сможешь так что имхо - бред
  • 30 Июня 2011 18:02
    Тима Мельник
    Автор просто "забыл" кое что перевести в самой нижней части оригинального урока а именно: But wait! This doesn’t work! And you are entirely correct. As you can see from the code (and confirm from the demo), we assume that closing the popup window equals a published tweet. It does not. As this is a cross domain interaction, there is no way to subscribe for when a tweet is actually published. The only way to do this would be to use Twitter’s more complex @Anywhere API, but even then people could just hotlink to your file. Does it even matter? The real purpose of this technique is to give people an incentive to tweet about your product/service, something that a lot of folks would love to do just for the feeling of receiving your “members-only” download.
    • 8 Октября 2011 14:34
      Hamey
      Спасибо!!!
  • 7 Июля 2011 12:09
    Никита_Белоусов
    если руки не из попы то все можно поправить. а так спасибо за соль))да и твиттер по моему отличная сеть, всегда свежие новости из первых рук
  • 8 Июля 2011 15:03
    Gazel
    Лучше сделать систему наподобии, как на twite.ru/, чтобы добавленное сообщение проверялось, а если его нет, то не давать ссылку.
  • 23 Июля 2013 21:00
    tretyak.oleg
    Добрый день!Ребят, столкнулся с такой проблемой, после помещения скрипта в модальное окно - он не работает. Может кто что подскажет как решить эту проблему? Скрипт в модельном окне http://promsiz.info/test/ и тот же скрипт без него http://promsiz.info/?modals=like Заранее благодарен!
^ Наверх ^