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

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
Просмотров: 23791
Правила перепечатки

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

^ Наверх ^