За последние несколько месяцев, Одноклассники много раз меняли вид своих виджетов, поэтому мне приходится делать новые превиджеты, которые показываются пользователям, перед тем как отправить на настоящий виджет и выглядеть этот процесс должен непалевно. Делаю я это, чтобы поднять количество публикаций, это прямо влияет на вирусность ссылки в Одноклассниких.
Встречайте видео локер. При клике на фейковый плеер на нашем сайте, открывается всплывающее окно с превиджетом публикации.
Фишка в том, что пользователь действительно получает видео, после взаимодействия с виджетом публикации. Но так как OK против любой мотивации на классы, то с баном ссылки все равно придется столкнуться.
Нам понадобятся
- Картинка фейк плеера
- Картинка локера
- Картинка стрелочки
- Страница плеера
- Страница превиджета
Картинка фейк плеера
Нужно взять интересную картинку, и в фотошопе прицепить кнопку плей в центр, вот такую например.
Картинка локера
Эта картинка используется в превиджете, берется только ее нижняя часть, с помощью CSS. Я мог бы переписать стили виджета, чтобы вместо этой длинной картинки, использовалась маленькая и квадратная, но стараюсь вносить в код минимальные изменения, чтобы создать у юзера ощущение, что это оригинальный виджет Одноклассников.
Картинка анимированной стрелочки
Сама стрелка не GIF и приводится в движение через Javascript, чтобы загружалась как можно быстрее.
Страница плеера
Тут код базовой страницы с фейк плеером, можно лить так, можно доработать, добавив свой код.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Смотреть видео</title>
<style type="text/css">
.vid {
cursor: pointer;
}
#shtorka {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-color: #000000;
opacity: 0.75;
z-index: 999;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="shtorka"></div>
<div>
<div><img onclick="openW()" class="vid" src="ссылка_на_картинку_плеера"></div>
</div>
<script type="text/javascript">
function openW() {
var seconds = 0;
$("#shtorka").css("display", "block");
width = 555;
height = 529;
posx = window.screenX + ((window.parent.innerWidth - width) / 2);
posy = window.screenY + ((window.parent.innerHeight - height) / 2);
var w = window.open("ссылка_на_превиджет", "share", "width="+width+", height="+height+", left="+posx+", top="+posy);
$("#shtorka").click(function() {
clearInterval(interval);
openW();
});
var interval = setInterval(function() {
seconds = seconds + 1;
if(w.closed && seconds > 10) {
clearInterval(interval);
$("#shtorka").css("display", "none");
window.location.href = 'ССЫЛКА_НА_ВИДЕО_КОТОРАЯ_ОТКРОЕТСЯ_ПОСЛЕ_ЗАКРЫТИЯ_ВИДЖЕТА';
}
else if(w.closed) {
clearInterval(interval);
$("#shtorka").css("display", "none");
}
}, 1000);
}
</script>
</body>
</html>
Страница превиджета
Тут мотивируем на публикацию ссылки, перед просмотром.
<!DOCTYPE html>
<html class=""><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Одноклассники</title>
<link href="//st.mycdn.me/res/css/prod/widget/share_content.ccf6a8f2.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.ext-widget-like-confirm_ic {
background: url('ссылка_на_картинку_локера');
background-position: 0 -225px;
background-size: 176px 401px;
}
</style>
</head>
<body>
<div id="shtorka"></div>
<div id="hook_Block_WidgetLikeConfirm" class="hookBlock">
<div class="ext-widget" id="widget-el">
<div class="ext-widget_h">
<a href="https://ok.ru" class="ext-widget_h_ico" target="_blank"></a>
<div class="ext-widget_h_tx"></div>
<div class="ext-widget_menu __enabled"></div>
</div>
<div class="ext-widget_cnt-w __center">
<div class="ext-widget_cnt js-ext-widget-content">
<div class="ext-widget-like-confirm">
<div class="ext-widget-like-confirm_ic"></div>
<div class="ext-widget-like-confirm_h">Нажмите кнопку Опубликовать, что бы смотреть видео!</div>
<div class="ext-widget-like-confirm_question">
Опубликуйте, чтобы смотреть видео.
</div>
</div>
</div>
</div>
<div class="ext-widget_f" style="right: 22px;text-align: right;">
<a class="button-pro" href="https://connect.ok.ru/offer?url=ссылка_которую_нужно_опубликовать">Опубликовать</a>
<div id="arrow" style="position: fixed;bottom: 88px;right: 38px;text-align: right;width: 100%;"><img src="ссылка_на_стрелочку" style=" width: 29%; max-width: 100px; "></div>
</div>
</div>
</div>
<script type="text/javascript">
var i = 0;
function arrowan() {
if(i == 0) {
i = 1;
$("#arrow").animate({
"bottom": "-=50px",
}, function() {
arrowan();
});
}
else if(i == 1) {
i = 0;
$("#arrow").animate({
"bottom": "+=50px",
}, function() {
arrowan();
});
}
}
arrowan();
</script>
</body>
</html>
Личное
Блоггинг
Арбитраж трафика
Заработок в интернете
Создание сайта
Раскрутка сайта
ICQ: 444202890
Skype: erikobox
