Cкачай за ретвит
6 марта 2012 года, Размещено в категории: PHP / MySQL
Данную хитрость я подсмотрел на одном буржуйском сайте, с помощью неё можно поставить запрет на скачивания чего-нибудь на сайте. Запрет можно будет снять, только после retweet-а записи.
Как это работает, вы можете посмотреть в прошлой записи - Плавный скроллинг к якорю на сайте.
Сейчас давайте разберём процесс установки и настройки скрипта. Исходники предоставлены в конце статьи.
Задача
Сделать активной кнопку закачки, после того, как посетитель кликнет на ссылку, которая откроет окно для ретвита записи, сделает ретвит и закроет окно.
Для этого добавляем ссылку для открытия окна:
<a href="#" id="tweetLink">ретвит</a> |
Эту ссылку вы так же можете оформить кнопкой или ещё как-нибудь, но я использую пока просто ссылку.
После этого, добавляем кнопку для скачивания:
<a href="#" class="downloadButton">Download</a> |
Оформление для кнопки у меня вот такое:
<style>a.downloadButton{display:inline-block;width:187px;height:69px;text-indent:-99999px; overflow:hidden;background:url('wp-content/themes/wminimal/img/buttons.png') no-repeat; cursor:default;border:none;text-decoration:none !important; margin-left:230px;} a.downloadButton.active{background-position:left bottom;cursor:pointer;}</style> |
Когда скриптом присваивается класс .active, у меня просто меняется расположение фонового изображения кнопки background-position:left bottom;
То есть, это спрайт – два изображения на одной картинке.
Теперь надо подключить скрипты, для того чтобы добавить динамики нашей кнопке.
Подключаем первый скрипт (скачать), который фиксирует открытие и закрытие окна твиттера:
<script src="http://dicim.net/wp-content/themes/wminimal/js/jquery.tweetAction.js"></script> |
А теперь подключаем скрипт, в котором указаны данные для ретвита – ссылка, текст сообщений и сама ссылка на скачиваемый файл, который будет добавлен к кнопке:
$(document).ready(function(){ $('#tweetLink').tweetAction({ text: 'Плавный скроллинг к якорю на сайте',//Текст в сообщении url: 'http://dicim.net/plavnyj-skrolling-k-yakoryu.html',//Ссылка в сообщении via: 'dicimetr', related: 'dicimetr' },function(){ // Добовление класса active и ссылка для скачивания $('a.downloadButton') .addClass('active') .attr('href','http://dicim.net/demo/scroll.rar'); }); }); |
Создайте файл с расширением js и скопируйте туда этот код, только не забудьте внести свои поправки. И подключите этот файл к странице, на которой вы будете устанавливать кнопку для скачивания за ретвит.
Рабочий исходник можете скачать тут.
После этого у вас должно всё работать, но есть одна проблема у такого способа.
Слабое место скрипта
Дело в том, что использую этот метод, вы не сможете размещать файлы для ретвитов на разных страницах, потому что мы указали данные для одной страницы:
$(document).ready(function(){ $('#tweetLink').tweetAction({ text: 'Плавный скроллинг к якорю на сайте', url: 'http://dicim.net/plavnyj-skrolling-k-yakoryu.html' |
И в любом месте сайта, где вы будете подключать данный скрипт - в сообщениях твиттера будут одни и те же данные. Поменять их динамически для WordPress можно, прописав этот скрипт в самом шаблоне, в таком виде:
$(document).ready(function(){ $('#tweetLink').tweetAction({ text: '<?php the_title(); ?>',//Текст в сообщении url: '<?php the_permalink(); ?>',//Ссылка в сообщении via: 'dicimetr', related: 'dicimetr' },function(){ // Добовление класса active и ссылка для скачивания $('a.downloadButton') .addClass('active') .attr('href','http://dicim.net/demo/scroll.rar'); }); }); |
Мы получим нужные урл и название статьи для ретвита, но поменять динамически адресс, для скачивания файла, так же не получится.
Выхода два - или использовать этот метод только для скачивания одного файла или для каждого файла создавать свой файл js, с текстом для сообщений твиттера и ссылкой на скачивания. И уже к каждой страницы подключать их.
Кстати javascript в WordPress можно подключать прям внутри поста, то есть вам не надо лезть в код вашего шаблона, чтобы прописать путь к скрипту.
Может быть есть ещё и третий выход 🙂 Но о нём я не знаю, может кто-нибудь из читателей подскажет.
Я всё про вёрстку пишу, а про
На этом всё, спасибо за внимание и пишите в комментариях если что-то не понятно или у вас есть интересный способ сделать такой ретвит за скачивание, как-нибудь по другому.
10 лет назад
Ясно.. Просто срабатывание на клик по ссылке и закрытие окна, без проверки ретвита.
Попробую в каком-нибудь посте. )
Спасибо.
10 лет назад
Пожалуйста, точнее проверка идёт на само закрытие окна твиттера.
10 лет назад
Тоже сегодня увидел эту функцию на зарубежном сайте и сначало не понял что к чему)
10 лет назад
Угу, хороший эффект. Особенно для сайтов, с контентом под закачку.
Max Human
10 лет назад
Полезная штука! А насчет динамического изменения ссылки для скачивание — что если попробовать подставлять ссылку на файл через динамическое поле? Когда пост создаешь, сразу добавляешь ссылку на файл, — должно получится!
10 лет назад
К сожалению нет много времени на тесты и т.п. Если у вас получиться такое реализовать, то не забудьте поделиться 🙂
10 лет назад
Круто, спасибо 🙂 А я правильно понимаю, что и на планшетах все должно быть ок?
10 лет назад
Да, там ведь стандартный браузер поддерживающий Java Script.
10 лет назад
А как зделать шоб просто по нажатию на силку кнопка срабатувала?