Загрузка контента по таймеру

На некоторых сайтах (и в особенности, предлагающих что-либо скачать), Вы наверняка встречали окошко с таймером, который отсчитывал секунды и предлагавший подождать чуть-чуть для получения заветной ссылки.
Кнопка с обратным отсчетов времени (код)

У такого функционала есть две стороны (как и у медали): позитивная - пользователь будет ждать, отведенное ему время (а куда он денется), накручивая таким образом поведенческие факторы (ПФ) и негативная - поисковые системы (ПС) не очень дружелюбны к такого рода махинациям со стороны вебмастера.

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

Кстати, с помощью такого ухищрения можно показывать по таймеру не только ссылку, но и контент (текст, фотографию и т.д.), область применения, я думаю, вы придумаете самостоятельно. Я же покажу, как это реализовать.

Код, который открывает скрытый текст по таймеру

В реализации кода, который открывает невидимый элемент через определенное время, ничего сложного:

<script type="text/javascript">
timer_num = 45;//сколько секунд будет отсчитывать таймер
function timer_fc(){
if(timer_num>0){
$('#timer_num').text(timer_num);
timer_num--;
setTimeout("timer_fc()", 1000)
}else{
$('#timer_1').hide(); $('#timer_2').show();
}}
timer_fc();
</script>

Текст, который скрыт при открытии страницы, должен быть обрамлен в элемент с id="timer_2":

<div style="display:none" id="timer_2">
Контент, который откроется по завершении таймера
</div>

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

Как пример использования, рассмотрим внедрение описанного функционала на сайты под управлением WordPress.

Контент с обратным отсчетом времени на WordPress

Если вам необходимо сделать подгрузку некоего контента (ссылка, текст, фото и т.д.) по таймеру на WordPress сайте, достаточно добавить в файл functions.php (вашей текущей темы) следующий код:

<?php
add_action('wp_head', 'add_script_timer');
function add_script_timer() {
?>
<script type="text/javascript">
timer_num = 45;//сколько секунд показывать таймер
function timer_fc(){
if(timer_num>0){
$('#timer_num').text(timer_num);
timer_num--;
setTimeout("timer_fc()", 1000)
}else{
$('#timer_1').hide(); $('#timer_2').show();
}}
timer_fc();
</script>
<?php
}

//добавляем кнопку в редактор WordPress
add_action( 'admin_print_footer_scripts', 'add_timer_text' );
function add_timer_text() {
if ( wp_script_is('quicktags') ){
?>
<script type="text/javascript">
QTags.addButton( 'eg_timer', 'timer', '<span id="timer_1"><b>Ожидайте контент:</b><span id="timer_num" style="font-size: 36px;"></span> сек.</span><div style="display:none" id="timer_2">', '</div>', 'q', 'Ожидание контента с таймером', 111 );
</script>
<?php
}
}

Этот код добавит в шапку вашего сайта JavaScript код, необходимый для работы скрипта и кнопку "timer" в редактор WordPress сайта, с помощью которой, вы можете пометить любую текстовую область, которая будет скрыта вашим таймером (в режиме редактора "Текст" выделите мышкой необходимый текст или область текста и нажмите кнопку "timer").

Кнопка скрытия контента

Если вы вы все сделали правильно, то при сохранении и открытии записи в WordPress, в том месте, где должен быть помеченный вами текст, вы увидите примерно следующее:

Ожидайте контент: 45 сек.

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

timer_num = 45;//сколько секунд показывать таймер

P.S. Если таймер не работает (не отсчитывает секунды), не забываем, что он работает на jquery. Подключить можно, например, так:

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (8 голоса, рейтинг: 3,75 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро...

11 комментарий

  1. Константин says:

    Здравствуйте. Что прописать, чтобы при обновлении страницы таймер не сбрасывался?
    Спасибо.

    1. Вячеслав Скоблей says:

      Реализация Вашей просьбы выйдет далеко за пределы данного функционала и не может быть выполнена в рамках этого кода.

  2. BT22002 says:

    Я так понимаю, что скрытый контент таким образом можно увидеть через консоль браузера >> просмотр исходного текста?
    Если так, то можно ли как-то скрыть код HTML через php ?

    1. Вячеслав Скоблей says:

      Код писался на js и в исходном коде можно подсмотреть скрытый текст заранее.
      На php не заморачивался.

  3. Привет, а не подскажите как к этому еще сделать get получение ссылки? допустим я хочу сделать /link.php?url=внешняя ссылка, и вот чтобы внешняя ссылка появилась после таймера кнопкой, как сделать?

    1. Вячеслав Скоблей says:
      <div style="display:none" id="timer_2">
      Сюда вставляете свою кнопку, она появится по истечении таймера
      </div>

      Или я вас не понял до конца.

  4. Саша says:

    Здравствуйте,
    1. такая же ошибка синтаксиса. Полностью копировал ваш код.
    2. таймер не запускается, если использую альтернативный/правленный код., куда вставить предложенный код ""?
    Прошу по простому, я не верстальщик, делаю своими руками ... Спасибо!)

  5. says:

    Мне разработчик подкрутил файл, могу скинуть на почту, чтобы и другие могли им пользоваться :)

    1. Вячеслав Скоблей says:

      Форму отправки на почту найти не трудно на этом сайте

  6. says:

    Здравствуйте, попробовал ваш код, выдает ошибку синтаксиса... Parse error: syntax error, unexpected '<' in - строка...
    Давно ищу такое решение для WordPress(

    1. Вячеслав Скоблей says:

      Правильно ли Вы его подключили?
      В файле functions.php вместо < ?php (что у вас в самом начале файле) скопируйте код с моего сайта полностью.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *