null

Popups – Social share – в попап окне

Как-то мне захотелось создать кнопку (расположенную в меню сайта под управлением WordPress) для распространения страницы или записи в социальных сетях, по нажатию на которую будет появляться попап окно в котором можно выбрать социальную сеть в которую хочется отправить страницу или запись. Для решения данной задачи я решил использовать мною любимый плагин Popups и код распространения (расшаривания) ссылок сервиса addtoany.com.

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

Внешний вид кнопки в меню сайта:

Внешний вид попап окна, после нажатия на кнопку:

Для создания кода “расшаривания” перейдите по ссылке ниже, или же воспользуйтесь готовым кодом здесь

Страница addtoany.com для создания кода:

https://www.addtoany.com/buttons/for/website

Готовый код (который подойдет для применения на любом сайте):

Сжатый код в NotePad++ (без отложенной загрузки):

Можно не заморачиваться с вариантами представленными ниже а прибегнуть к NotePad++. Достаточно в NotePad++ Выделить HTML код и нажать Ctrl+J, в следствии чего весь HTML “сожмется” в одну строку. И получится код ниже:

Сжатый код в NotePad++ (С ОТЛОЖЕННОЙ ЗАГРУЗКОЙ):

Так как нам очень важна скорость загрузки сайта, ниже расположен код предусматривающий отложенную загрузку скрипта AddToAny. Данный код ускорит загрузку сайта с попап окном в разы и не как не повлияет на скорость отображения (рендеринга) страницы:

Код в HTML не сжатый (без отложенной загрузки):

Переформатирование HTML в PHP:

http://www.andrewdavidson.com/convert-html-to-php/

Код в PHP (без отложенной загрузки):

На всякий случай плагин для создания шорткода из CSS JS PHP:

Бесплатный вариант:

Custom css-js-php

Нормальный платный вариант:

https://www.flippercode.com/shop/

Вставка кода

Далее вставляем выбранный Вами HTML в окно Popups не в визуальном режиме, а в режиме редактора (максимальная ширина попап окна – 665px;).

Добавление пункта меню

Внешний вид пункта меню:

При создании меню в поле “Текст ссылки” вставьте:

Это разметка отвечающая за отображение иконки. Так же не забудьте прописать “Атрибут title”, это визуально приукрасит кнопку при наведении курсора мышки на неё.

JS скрипт отвечающий за отображения попап окна при клике по кнопке меню:

В скрипте ниже не забудьте заменить #spu-1064 на ID Вашего попап окна соц. ссылок.

Addtoany локализация на другие языки:

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

Popups – Social share – в попап окне
5 (100%)
Всего проголосовало: 1