Как сделать замечательную систему — Твитни, чтобы скачать, с использованием JQuery и CSS

Разместил Александр / Просмотров: 1 850

Приветствую Вас, дорогие читатели блога beloweb.ru. Сегодня я хочу рассказать Вам как сделать довольно таки, очень интересную систему — Твитни, чтобы скачать. Что это значит? А это значит то, что мы сегодня будем делать страницу с кнопкой «скачать», которая станет активной только после того как пользователь не твитнит эту самую запись.

Интересно звучит не правда ли? :-) Я знаю, очень интересно и заманчиво, тем более эта система, я уверен, даст Вам не малый прирост твитов.

Хочу сказать, что выражаю огромную благодарность за идею tutorialzine.com

В общем давайте начинать.

Посмотреть пример и скачать

Как это работает?

Эта система не так уж и сложна как кажется на первый взгляд. Нам нужно создать одну html страницу, на которой в действие вступают 2 скрипта. Вот они и активируют кнопку «Скачать» только после того как читатель твитнит ту ссылку, которую Вы захотите.

Правда есть один нюанс — пользователь может не твитнуть запись, а просто закрыть всплывающее окно, и скачать файл. Да, Вы не ослышались, кнопка станет активной. Как этот вопрос решить, я пока что не приложу ума. :-) Но всё равно задумка очень интересная.

Ну, а теперь давайте создавать эту замечательную систему.

HTML

Для начала нам нужно создать одну html страниц. Для примера я её уже создал, и вот как она выглядит:

< !DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />

<title>Система - твитни, чтобы скачать</title>

<!-- Файл стилей CSS  -->
 <link rel="stylesheet" href="assets/css/styles.css" />

<!--&#91;Для IE 9&#93;>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 < !&#91;endif&#93;-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<script src="assets/js/jquery.tweetAction.js"></script>
 <script src="assets/js/script.js"></script>

</head>

<body>

<header>
 <h1>Твитни, чтобы скачать</h1>
 <h2><a href="">&laquo; Вернуться на Беловеб</a></h2>
 </header>

<section id="container">
 <p>Кнопка <strong>Скачать</strong> станет активной<br />после того ка Вы <a href="#" id="tweetLink">Твитните</a></p>
 <a href="#" class="downloadButton">Скачать</a>
 </section>

<img src="assets/img/twitter_bird.png" alt="Twitter Bird" />
 </body>

</html>

Затем задаём нашей странице соответствующие стили CSS:

CSS

/*-------------------------
 Отступ
--------------------------*/
*{
 margin:0;
 padding:0;
}
/*-------------------------
 Общие стили
--------------------------*/
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);

}

a, a:visited {
 text-decoration:none;
 outline:none;
 color:#e35858;
 -moz-transition: color 0.3s 0.01s ease;
 -o-transition: color 0.3s 0.01s ease;
 -webkit-transition: color 0.3s 0.01s ease;
}

a:hover{
 text-decoration:underline;
 color:#ae4343;
}
/*----------------------------
 Хидер и футер
-----------------------------*/
header{
 display:block;
}

h1{
 height:50px;
 text-indent:-99999px;
 overflow:hidden;
 background:url('../img/h1.png') no-repeat center center;
 margin:150px auto 60px;
 text-align:center;
}

h2{
 font-size: 17px;
 font-style: italic;
 font-weight: normal;
 left: 27px;
 position: absolute;
 top: 36px;
}

footer{
 color: #999999;
 font-size: 15px;
 line-height: 1.6;
 padding: 40px 20px 0;
 text-align: center;
 display:block;
}

footer b{
 color: #888888;
 display: block;
 font-size: 10px;
 font-weight: normal;
}

body > img{

 margin:50px auto 0;
 display:block;
}
/*----------------------------
 Середина
-----------------------------*/
#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;
}

#container p{
 font:24px/1.3 'Segoe UI Light','Segoe UI',Arial,sans-serif;
 padding: 70px 0 48px;
}
/*----------------------------
 Кнопка скачать
-----------------------------*/
a.downloadButton{
 display:inline-block;
 width:187px;
 height:69px;
 text-indent:-99999px;
 overflow:hidden;
 background:url('../img/buttons.png') no-repeat;
 cursor:default;
 border:none;
 text-decoration:none !important;
}

a.downloadButton.active{
 background-position:left bottom;
 cursor:pointer;
}

Естественно данную страницу Вы можете изменить под Ваш вкус как угодно.

В конечном итоге у нас получилась вот такая страница:

После того как мы создали страницу, будем подробнее рассматривать скрипты.

jquery

Как видите, что мы между тегами <head> и </head> мы прикрепили библиотеку jquery — jquery.min.js с версией 1,6,0. А также ещё 2 скрипта , которые находятся в исходниках:

jquery.tweetAction.js — этот скрипт вызывает всплывающее окно Твиттера.
script.js — а этот скрипт активирует кнопку «скачать».

Теперь давайте рассмотрим эти 2 скрипта подробнее.

jquery.min.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(',');

// Ссылка на скрипт для всплывающего окна от  twitter API:
 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);

Этот скрипт вызывает всплывающее окно привычного для наc Твиттера. Но и это ещё не всё, теперь нам нужно поставить правильную ссылку в всплывающее окно, вернее ту ссылку, которую мы хотим, чтобы твитнул пользователь. А так же мы сможем узнать, кто нас ретвитнул. Всё это делает вот этот скрипт:

script.js

$(document).ready(function(){

$('#tweetLink').tweetAction({
 text: 'Как сделать систему - Твитни, чтобы загрузить с jquery', // Заголовок в всплыв. окне
 url: '/', //Ссылка на запись
 via: 'doublecemik',
 related: 'doublecemik'
 },function(){

// Кнопка становится активной, когда пользователь закрывает окно:

$('a.downloadButton')
 .addClass('active')
 .attr('href','http://demo.tutorialzine.com/2011/05/tweet-to-download-jquery/tweet_to_download.zip'); // Ссылка на файл

});

});

Вот этот скрипт нужно изменить под себя:

В поле text: Пишем свой заголовок, который будет отображаться в всплывающем окне.
url: Нужно задать ссылку на запись.
via: и related: здесь нужно написать Ваш логин из твиттера.
В поле .attr нужно написать ссылку на файл, который пользователи будут скачивать.

Вот пример того, что у меня получилось в всплывающем окне:

Посмотреть пример и скачать

И после того как пользователь твитнит эту запись он сможет скачать мой заветный файл.

Я новичок и всё равно ничего не понял

И такое бывает :-) Скачиваем исходные файлы системы и видим следующее:

index.html — это и есть наша заветная страница html, которую мы создавали Выше.

Далее заходим в папку assets, затем в папку js, и открываем скрипт script.js, например с помощью блокнота. Далее просто редактируем его под свои ссылки и логины из Твиттера. Какие именно поля редактировать, опять же, я описывал выше.

Потом эту страницу вместе с папкой скидываем на Ваш хостинг аккаунт, и радуемся приплыву ретвитов. :-)

Вывод

Друзья, я не могу Вам точно сказать соберёт ли эта система большое количество ретвитов или нет. Но попробовать стоит. Ещё я бы не рекомендовал использовать эту систему для всех файлов на сайте, ну потому что это не практично, и большинство пользователей, скорее всего, отпугнёт. Ну а там возможно я и ошибаюсь.

Вот и всё, друзья. Если у Вас что то не будет получаться или же возникнут какие либо вопросы, Ваши комментарии всегда приветствуются. До скорых встреч.

Метки: CSS HTML JQuery Скачать Твитнуть скачать

Блог > JavaScript и JQuery > Вёрстка > Новичкам > Полезное

Как сделать замечательную систему — Твитни, чтобы скачать, с использованием JQuery и CSS

Посмотреть пример и скачать

Как это работает?

HTML

CSS

jquery

Посмотреть пример и скачать

Я новичок и всё равно ничего не понял

Вывод