Как-то мне захотелось создать кнопку (расположенную в меню сайта под управлением 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:
Бесплатный вариант:
Нормальный платный вариант:
https://www.flippercode.com/shop/
Вставка кода
Далее вставляем выбранный Вами HTML в окно Popups не в визуальном режиме, а в режиме редактора (максимальная ширина попап окна — 665px;).
Внешний вид пункта меню:
При создании меню в поле “Текст ссылки” вставьте:
Это разметка отвечающая за отображение иконки. Так же не забудьте прописать “Атрибут title”, это визуально приукрасит кнопку при наведении курсора мышки на неё.
В скрипте ниже не забудьте заменить #spu-1064 на ID Вашего попап окна соц. ссылок.
Addtoany локализация на другие языки:
https://www.addtoany.com/buttons/translate/
Источник записи: https://mediadoma.com