Cкачай за ретвит

Данную хитрость я подсмотрел на одном буржуйском сайте, с помощью неё можно поставить запрет на скачивания чего-нибудь на сайте. Запрет можно будет снять, только после 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 можно подключать прям внутри поста, то есть вам не надо лезть в код вашего шаблона, чтобы прописать путь к скрипту.

Может быть есть ещё и третий выход 🙂 Но о нём я не знаю, может кто-нибудь из читателей подскажет.

Я всё про вёрстку пишу, а про оптимизацию вордпресс забыл полностью. Пора начинать свой блог продвигать хоть как-нибудь. А то трафика совсем маловато на сайте 🙂

На этом всё, спасибо за внимание и пишите в комментариях если что-то не понятно или у вас есть интересный способ сделать такой ретвит за скачивание, как-нибудь по другому.