Документация для Социального замка

Установка плагина

Пример установки плагина на обычный html лендинг пейдж, без cms и бекенда. Если у вас самописный движек, то сделайте по аналогии, только редактируйте свой html шаблон для сайта.

Если вы используете CMS Ucoz или Joomla, можете сразу перейти к видео инструкции:

Установка социального замка на UCOZ (видео)
Установка социального замка на Joomla (видео)

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

1. Этап. Загрузка файлов на сервер.
2. Этап. Настройка социального замка.
3. Этап. Подключение файлов.
4. Этап. Оборачивание контента.
5. Этап. Инициализации замка

1. Этап. Загрузка файлов на сервер.

После покупки jQuery версии Социального замка, вам на почту должен прийти архив с плагином (если не пришел, обратитесь в нашу службу поддержки).

Скачиваем и распаковываем архив.
Открываем ftp менеджер, я использую filezilla (вы можете использовать любой менеджер, который работает с ftp).
В корневую директорию вашего сайта, копируем папку plugin из распакованного архива.

Переименуем папку plugin в sociallocker.

Первый этап завершен. Переходим к следующему.

2. Этап. Настройка социального замка

Откройте конструктор социального замка по ссылке
Настройте социальный замок по вашему усмотрению.

Внимание! Для кнопок вконтакте необходимо установить id приложения и токен доступа.

Читайте инструкции:

Внимание! Для кнопки facebook поделиться, также необходимо установить id приложения.

Читайте инструкции:

Как получить id приложения в facebook?

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

Второй этап завершен. Переходим к следующему.

3. Этап. Подключение файлов плагина

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

Открываем ftp менеджер.
Переходим в корневую директорию сайта.
Скачиваем файл index.html и открываем его в html редакторе.
Вставляем скопированный код подключения файлов перед закрывающимся тегом </head>

Проверяем, если у вас уже установлена библиотека jQuery, то первую строчку (<script src="js/libs/jquery.min.js"></script>) нужно удалить. Как проверить установлена у вас библиотека jQuery или нет, перейдите по ссылке.
Настраиваем пути к файлам плагина. Вспомним куда мы загрузили файлы плагина, в корневую директорию мы загрузили папку plugin, после мы ее переименовали в папку sociallocker. Давайте сформируем корректные пути:

После того, как мы сформировали корректные пути к файлам плагина. Сохраняем index.html и загружаем его на сервер, заменяем старый index.html.
Проверяем корректно ли мы настроили пути к файлам плагина. Переходим на наш сайт и вызываем правой кнопкой мыши контекстное меню страницы, выбираем пункт “Просмотр кода страницы” или же нажмите сочетание клавиш Ctrl+U.
Найдите в открытом коде страницы ваш код подключения плагина и нажимайте поочередно на ссылки.

Если страница открылась с непонятным кодом, значит путь корректный.

Если вы видите ошибку 404, значит вы неправильно настроили пути к файлам, проверьте их внимательно.

Этап завершен. Переходим к следующему этапу.

4. Этап. Оборачивание контента

Чтобы социальный замок понимал какой контент нужно закрыть, этот контент нужно обозначить. Либо к html блоку нужно добавить класс или id, либо создать html блок с классом или id.

Создадим html блок с классом my-class <div class="my-class"></div>
Поместим контент который мы хотим скрыть в созданный нами html блок.

<div class="my-class">
    Мой скрытый контент
    <a href="http://вашсайт.ру/архив-с-видеокурсом.рар">Скачать мой видео-курс</a>
</div>

На нашем примере открываем файл index.html в редакторе и вставляем наш Html блок в то место, где мы хотим, чтобы отображался социальный замок и скрытый контент.

Сохраняем. Страницу в редакторе мы не закрываем, он нам понадобится для следующего этапа.

Этап завершен. Переходим к следующему.

5. Этап. Инициализации замка

Переходим в конструктор социального замка (https://sociallocker.ru/sl-generator/).
В поле css селектор вводим класс нашего html блока, перед классом должна быть точка, если это id, то решетка.

Кликаем мимо поля, чтобы убрать курсор и внести изменения в настройки замка.
Нажимаем кнопку "Сгенерировать код для вставки"
Копируем код в открывшемся окне

Вставляем код в index.html, перед тегом </head>.

Внимание! Код нужно вставлять после кода подключения файлов.

Сохраняем index.html и загружаем его на сервер. Заменяем старый index.html.
Переходим на наш сайт и обновляем страницу.

Поздравляем! Установка успешно завершена.