TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

SocialLocker – даем доступ к контенту только через Social Sharing

716

В ходе работы мне приходиться посещать довольно много блогов, и то, что я видел на многих из них, – это “панелька” для скрытия контента. Принцип работы данной панельки достаточно прост. Например, чтобы разблокировать кнопку загрузки файла, или прочесть определенную часть страницы необходимо нажать на одну из кнопок шаринга на данной панели.
https://techblog.sdstudio.top/wp-content/uploads/2020/04/post-10148-5e9f5e6d23e51.png
Данная панель в GitHub’e называется Social Locker (в дальнейшем так и будем её именовать) и является отличным вариантом для раскрутки Вашего ресурса.

Я сделал больше исследований в чтобы найти подходящий блокировщик контента, но большинство из них – платные плагины или очень простые варианты на Git’e.

Поэтому я решил написать свою собственную версию, основу для которой я взял у данного товарища по цеху:

https://codeshack.io/create-your-own-content-locker-html-javascript/

Она не требует большого количества кода, и вы можете настроить ее так, как хотите, хотя вам понадобится опыт работы в HTML, CSS, и jQuery.

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

Блок к которому применен Social Locker выглядит вот так:
https://techblog.sdstudio.top/wp-content/uploads/2020/04/post-10148-5e9f5e6d78871.png
Пользователь наводит курсор мышки на данный блок и перед ним благодаря анимации открывается вот такая панелька с кнопками для шаринга страницы:
https://techblog.sdstudio.top/wp-content/uploads/2020/04/post-10148-5e9f5e6da7996.png
После того как пользователь сделал клик по выбранной им социальной сети появится окно iframe от AddToAny в котором пользователь и совершит шаринг страницы.

После шаринга страницы появится попап окно c текстом. “Спасибо что поделился”

Выглядит данное окно вот так:
https://techblog.sdstudio.top/wp-content/uploads/2020/04/post-10148-5e9f5e6de4a11.png
Внимательно изучив файл по пути

/SDStudio_SocialLocker_Plus_AddToAny/script.js

В строке 38, Вы увидите код раскомментировав который (и заменив в нем значения на свои) у Вас появится возможность встраивать свою рекламу от Google в данное попап окно.

После того как попап окно исчезнет Smart Locker будет отключен, и у пользователя появится возможность загрузить файл. Причем достаточно один раз разшарить страницу и смарт локер будет снят со всех “залокированных” ссылок.

Как подключить к себе на сайт


В начале Вам нужно скачать мой смарт локер по ссылке ниже:

Загрузить SDStudio Smart Locker:

<a href="https://techblog.sdstudio.top/wp-content/uploads/2020/04/sdstudio_sociallocker_plus_addtoany.zip">SocialLocker_Plus_AddToAny</a>

И соответственно подключить файлы style.css и script.js из загруженной папки к своему сайту.

Мой скрипт предполагает что на Вашем сайте уже подключены FontAwesome и AddToAny.

При написании поста Вам необходимо поместить ссылку для применения Social Locker в блок:

<div class = "sociallocker" > <a href = "/file.zip" > Загрузить файл </a> </div>

Содержимое файла style.css:

.sociallocker { background-color: #EEEEEE; text-align: center; position: relative; max-width: 500px; height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; } .sociallocker-overlay { background-color: rgba(0, 0, 0, 0.6); font-size: 20px; padding-right: 15px; padding-left: 15px; font-weight: bold; color: #ffffff; transition: all 0.2s ease; } .sociallocker-overlay i { margin-right: 10px; margin-left: 25px; } .sociallocker:hover .sociallocker-overlay { top: -100%; transition: all 0.2s linear; } .sociallocker:hover .sociallocker-content { top: 100%; transition: all 0.2s linear; } .sociallocker-content a { display: inline-block; text-decoration: none; padding: 10px 20px; background-color: #777777; color: #f9f9f9; border-radius: 4px; font-weight: bold; } .sociallocker-overlay, .sociallocker-content, .sociallocker-links { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; top: 0; left: 0; } .sociallocker-content { background-color: #ccc; transition: all 0.2s ease; } .social-1 { text-decoration: none; color: #ffffff; display: inline-block; width: 60px; height: 60px; overflow: hidden; margin-right: 5px; } .social-1 i { display: flex; align-items: center; justify-content: center; height: 100%; } .social-1:hover i { background-color: rgba(0, 0, 0, 0.1); transform: scale(1.2); transition: all 0.2s; } .fb { background-color: #4561A8; } .tw { background-color: #17ADEA; } .gp { background-color: #BF3B28; } .in { background-color: #1679B1; } .pi { background-color: #D9303C; } .su { background-color: #E84930; } div# a2apage_thanks_kit { min - height: 50 px; } @media screen and (max-width: 560px) { .sociallocker-overlay { font-size: 15px; } } /* Высотаота*/ .a2a_kit a { min-height: 45px !important; } div.sociallocker-content a { color: white !important; border: white 2px solid; background-color: #777777; } div.sociallocker-content a:hover { color: #002467 !important; border: #002467 2px solid; background-color: #ffffff; }

 

Если же у Вас несколько ссылок придется каждую из них помещать в блок:

<div class = "sociallocker" > ссылка </a>

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

Минусы моего Smart Locker


При клике на кнопку локера на мобильных устройствах:
https://techblog.sdstudio.top/wp-content/uploads/2020/04/post-10148-5e9f5e6e34481.png
Панель с социальными кнопками не успевает отображаться и сразу происходит переход на iframe социальной сети + срабатывает отображение попап окна и автоматическое открытие ссылок. В ближайшем будущем я постараюсь данный баг исправить. А пока предлагаю просто не подключать социал локер для мобильных устройств. Файлы с мобильного скачивают редко.

Для того что бы подключить социал локер только для ПК воспользуйтесь решением ниже (подключаем скрипт локера только для устройств ширина экрана которых больше 768px):

Полезности

jquery-watch


Для реализации задуманного мне пришлось весьма потрудиться для правильного запуска скрипта разблокировки контента после того как пользователь “зашарил страницу”. Все дело в том что необходимо отслеживать отобразился ли попап после шаринга. Для этого мне пришел на помощь данный скрипт, а точнее библиотека:

https://github.com/RickStrahl/jquery-watch

Пример кода для тестирования плагина. В данном фрагменте кода мы следим за изменением стилей и свойств блока с классами ‘.modal-wrapper.styled’:

jQuery(document).ready(function($){ // watch the content $(".modal-wrapper.styled").watch({ properties: "top,left,opacity,display,attr_class", watchChildren: true, callback: function (data, i) { console.log("text changed"); } }); });

Без данного плагина мне бы не удалось отследить атрибут style – display у элемента страницы $("#a2apage_overlay"). От себя отмечу что это единственное решение которое работает как нужно и практически во всех браузерах.

AddToAny


Если У Вас появится желание сделать свой вариант возможно Вам понадобится документация. В данном случае основной акцент будет на скрипт для социальной шары от AddToAny.

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

https://www.addtoany.com/buttons/customize/

Источник записи: https://techblog.sdstudio.top/blog/web-sociallocker-ili-daem-dostup-k-kontentu-tolko-cherez-social-sharing

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее