«
»
CMSGravJavaScriptjQueryWEB

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

В ходе работы мне приходиться посещать довольно много блогов, и то, что я видел на многих из них, – это “панелька” для скрытия контента. Принцип работы данной панельки достаточно прост. Например, чтобы разблокировать кнопку загрузки файла, или прочесть определенную часть страницы необходимо нажать на одну из кнопок шаринга на данной панели.
Один из многочисленных видов панели Social Locker
Данная панель в GitHub’e называется Social Locker (в дальнейшем так и будем её именовать) и является отличным вариантом для раскрутки Вашего ресурса.

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

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

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

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

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

Блок к которому применен Social Locker выглядит вот так:
Внешний вид блока SocialLocker
Пользователь наводит курсор мышки на данный блок и перед ним благодаря анимации открывается вот такая панелька с кнопками для шаринга страницы:
Вид блока Social Locker после наведения на него курсора
После того как пользователь сделал клик по выбранной им социальной сети появится окно iframe от AddToAny в котором пользователь и совершит шаринг страницы.

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

Выглядит данное окно вот так:
AddtoAny благодарственное окно после шаринга страницы
Внимательно изучив файл по пути

/SDStudio_SocialLocker_Plus_AddToAny/script.js

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

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

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

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

Загрузить SDStudio 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:

Содержимое файла 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

Минусы моего Smart Locker
При клике на кнопку локера на мобильных устройствах:
image alt text
Панель с социальными кнопками не успевает отображаться и сразу происходит переход на iframe социальной сети + срабатывает отображение попап окна и автоматическое открытие ссылок. В ближайшем будущем я постараюсь данный баг исправить. А пока предлагаю просто не подключать социал локер для мобильных устройств. Файлы с мобильного скачивают редко.

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

Полезности

Полезности

jquery-watch

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
Если У Вас появится желание сделать свой вариант возможно Вам понадобится документация. В данном случае основной акцент будет на скрипт для социальной шары от AddToAny.

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

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

Связанные записи
WEBПолезные сайты

9 способов определить шрифты из изображений и веб-текста и как загрузить шрифты на свой сайт

Contact Form 7WEBWEB - PHPWordPressВсе для functions.phpПлагины

Как заставить Wordpress отправлять почту из Amazon EC2 с помощью SES

Chrome AppsGoogleGoogle ChromeWEBWordPressПолезные сайты

Как улучшить английский язык при написании в WordPress или автоматическая проверка грамматики в браузере.

LinuxWEBWEB - PHPWordPressВсе для разработки плагиновВсе для разработки шаблонов

Определите минимальную версию PHP для вашего кода?