jQuery – Как загрузить кнопки AddToAny Share только по клику
Предлагаю не хитрый вариант отображения кнопок шаринга в социальные сети, только после того как был клик по кнопке.
Не для кого не секрет что подгрузка ресурсов из внешних источников влияет не положительно на загрузку страницы. А когда речь идет о сервисах шаринга страниц дак и подавно. Я решил сделать свое решение подгрузки скриптов и ресурсов кнопок шар AddToAny и оно выглядит следующим образом.
Принцип работы
В меню сайта есть кнопка с иконкой шары. Только после того как пользователь по ней кликнул скрипт из серверов AddToAny вставляется в DOM дерево страницы в header. И соответственно только после того как скрипт был вставлен начинается загрузка всех ресурсов для работы и отображения кнопок шары страницы.
1. Класс для кнопки
Кнопка на которую мы повесим функцию загрузки скрипта должна иметь класс .AddToAny_View ну а выглядеть она может и так:
<div class=".AddToAny_View">Кликни по мне</div> Кликни по мне
2. HTML код кнопок AddToAny
Естественно Вам нужно будет в поп добавить HTML так как он уже должен быть готов еще перед подключением срипта с сервера AddToAny.
Сконструировать свой вариант кнопок можно по данной ссылке: https://www.addtoany.com/buttons/for/website
3. jQuery скрипт
jQuery(document).ready(function ($) {
// Original Page
// <a class="vglnk" href="https://codepen.io/dydaevskiy/pen/zMXowN" rel="nofollow"><span>https</span><span>://</span><span>codepen</span><span>.</span><span>io</span><span>/</span><span>dydaevskiy</span><span>/</span><span>pen</span><span>/</span><span>zMXowN</span></a>
let loadScript = (scriptClass, url) => {
let isLoaded = document.querySelectorAll('.' + scriptClass);
if(isLoaded.length > 0) {
return false;
} else {
let myScript = document.createElement("script");
myScript.classList.add(scriptClass,'addedScript');
myScript.src = url;
document.body.appendChild(myScript);
}
};
// Функция загрузки скрипта
$('.AddToAny_View').click(function() {
{
loadScript("AddToAny_Script", "<a class="vglnk" href="https://static.addtoany.com/menu/page.js"" rel="nofollow"><span>https</span><span>://</span><span>static</span><span>.</span><span>addtoany</span><span>.</span><span>com</span><span>/</span><span>menu</span><span>/</span><span>page</span><span>.</span><span>js</span><span>"</span></a>);
}
});
});CodePin – пример работы в живую
Применяем для WordPress
Мой приер очен даже применим на сайте под управлением WordPress но начале…
В начале Вам нужно будет установить плагин для высплывающего окна, я катигорически рекомендую плагин PopUps:
Скачать плагин: https://ru.wordpress.org/plugins/popups/
2. HTML для попап окна
Как работать с данным плагином уверен Вы разберетесь и без меня. Для реализации попапа Вам нужно вставить код ниже в редактор попапа в режиме “текст”:
AddToAny_ViewВнешний вид кнопки меню:
Проблемы и их решения
Если у вас в связи с какими-то личными настройками или скриптами темы не отобразилось pop окно созданное в Popups плагине, попробуйте применить скрипт ниже:
// ———————————————————————-
// AddToAny загрузка скрипта сервиса по клику + открытие попап окна START
// ———————————————————————-
jQuery(document).ready(function ($) {
// Original Page
// <a class="vglnk" href="https://codepen.io/dydaevskiy/pen/zMXowN" rel="nofollow"><span>https</span><span>://</span><span>codepen</span><span>.</span><span>io</span><span>/</span><span>dydaevskiy</span><span>/</span><span>pen</span><span>/</span><span>zMXowN</span></a>
let loadScript = (scriptClass, url) => {
let isLoaded = document.querySelectorAll('.' + scriptClass);
if(isLoaded.length > 0) {
return false;
} else {
let myScript = document.createElement("script");
myScript.classList.add(scriptClass,'addedScript');
myScript.src = url;
document.body.appendChild(myScript);
}
};
// Функция загрузки скрипта
$('.AddToAny_View').click(function() {
{
loadScript("AddToAny_Script", "<a class="vglnk" href="https://static.addtoany.com/menu/page.js"" rel="nofollow"><span>https</span><span>://</span><span>static</span><span>.</span><span>addtoany</span><span>.</span><span>com</span><span>/</span><span>menu</span><span>/</span><span>page</span><span>.</span><span>js</span><span>"</span></a>);
console.log('Скрипт <a class="vglnk" href="https://static.addtoany.com/menu/page.js" rel="nofollow"><span>https</span><span>://</span><span>static</span><span>.</span><span>addtoany</span><span>.</span><span>com</span><span>/</span><span>menu</span><span>/</span><span>page</span><span>.</span><span>js</span></a> успешно подключен')
//———————————————
// Показываем попап окно с идентификатором 1064
SPU.show(1064);
// Отменяем вставку хеша в поле URL
return false;
}
});
});
// ———————————————————————-
// AddToAny загрузка скрипта сервиса по клику + открытие попап окна END
// ———————————————————————-