Твитни, чтобы скачать!
Twitter - чрезвычайно популярная социальная сеть. Одной из самых сильных сторон данного продукта является простой для понимания и мощный, с точки зрения функциональности, API, который даёт вам возможность придумывать всё, что угодно.
Одним из применений может быть “оплата за твит сообщение”. Например, вы выкладываете какой-то бесплатный продукт (электронная книга, 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; }
Эти два псевдо элемента очень часто встречаются в коде, так что я выделил их в отдельную группу.
Вот наш эксперимент и подошёл к концу!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/BZKK9cxZmHI/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Каждый человек имеет право на собственное мнение — при условии, что оно совпадает с нашим Шоу Джордж Бернард - 1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.