0
73
2018-12-04

jQuery - Как загрузить кнопки AddToAny Share только по клику

Предлагаю не хитрый вариант отображения кнопок шаринга в социальные сети, только после того как был клик по кнопке.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Не для кого не секрет что подгрузка ресурсов из внешних источников влияет не положительно на загрузку страницы. А когда речь идет о сервисах шаринга страниц дак и подавно. Я решил сделать свое решение подгрузки скриптов и ресурсов кнопок шар AddToAny и оно выглядит следующим образом.

Принцип работы

В меню сайта есть кнопка с иконкой шары. Только после того как пользователь по ней кликнул скрипт из серверов AddToAny вставляется в DOM дерево страницы в header. И соответственно только после того как скрипт был вставлен начинается загрузка всех ресурсов для работы и отображения кнопок шары страницы.

1. Класс для кнопки

Кнопка на которую мы повесим функцию загрузки скрипта должна иметь класс .AddToAny_View ну а выглядеть она может и так:

<div class=".AddToAny_View">Кликни по мне</div> 

2. HTML код кнопок AddToAny

Естественно Вам нужно будет в поп добавить HTML так как он уже должен быть готов еще перед подключением срипта с сервера AddToAny.

<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <a class="a2a_dd" href="https://www.addtoany.com/share">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_whatsapp"></a>
<a class="a2a_button_linkedin"></a>
<a class="a2a_button_telegram"></a>
<a class="a2a_button_evernote"></a>
<a class="a2a_button_skype"></a>
<a class="a2a_button_viber"></a>
<a class="a2a_button_trello"></a>
<a class="a2a_button_vk"></a>
<a class="a2a_button_livejournal"></a>
<a class="a2a_button_facebook_messenger"></a>
<a class="a2a_button_digg"></a>
<a class="a2a_button_tumblr"></a>
<a class="a2a_button_pocket"></a>
<a class="a2a_button_pinterest"></a>
</div>
<style>
    .a2a_kit.a2a_kit_size_32.a2a_default_style {
    max-width: 420px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

a.a2a_dd {
    padding-right: 0px;
    margin-right: -2px;
}

.a2a_kit.a2a_kit_size_32.a2a_default_style a {
    margin: 5px;
}
</style>
<script>
    var a2a_config = a2a_config || {
    }; a2a_config.onclick = 1; a2a_config.locale = "ru";
</script>

Сконструировать свой вариант кнопок можно по данной ссылке: https://www.addtoany.com/buttons/for/website

3. jQuery скрипт

jQuery(document).ready(function ($) {
    // Original Page
    // https://codepen.io/dydaevskiy/pen/zMXowN  
    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", "https://static.addtoany.com/menu/page.js");
    }

    });
});

CodePin - пример работы в живую

Применяем для WordPress

Мой приер очен даже применим на сайте под управлением Wordpress но начале...

1. Плагин для всплывающих окон - Popups

В начале Вам нужно будет установить плагин для высплывающего окна, я катигорически рекомендую плагин PopUps:

Popups плагин на странице магазна WordPress

Скачать плагин: https://ru.wordpress.org/plugins/popups/

2. HTML для попап окна

Как работать с данным плагином уверен Вы разберетесь и без меня. Для реализации попапа Вам нужно вставить код ниже в редактор попапа в режиме "текст":

<!-- AddToAny BEGIN --> <div class="a2a_kit a2a_kit_size_32 a2a_default_style">     <a class="a2a_dd" href="https://www.addtoany.com/share"> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_whatsapp"></a> <a class="a2a_button_linkedin"></a> <a class="a2a_button_telegram"></a> <a class="a2a_button_evernote"></a> <a class="a2a_button_skype"></a> <a class="a2a_button_viber"></a> <a class="a2a_button_trello"></a> <a class="a2a_button_vk"></a> <a class="a2a_button_livejournal"></a> <a class="a2a_button_facebook_messenger"></a> <a class="a2a_button_digg"></a> <a class="a2a_button_tumblr"></a> <a class="a2a_button_pocket"></a> <a class="a2a_button_pinterest"></a> </div> <style>     .a2a_kit.a2a_kit_size_32.a2a_default_style {     max-width: 420px;     text-align: center;     margin-left: auto;     margin-right: auto; }  a.a2a_dd {     padding-right: 0px;     margin-right: -2px; }  .a2a_kit.a2a_kit_size_32.a2a_default_style a {     margin: 5px; } </style> <script>     var a2a_config = a2a_config || {     }; a2a_config.onclick = 1; a2a_config.locale = "ru"; </script>

3. Добавляем кнопку в меню

Теперь добавим кноку в меню после клика на которую и будет подключен наш скрипт. Я использую тему "Cactus" и в моме случае на title пункта меню можно назначить иконку, в Вашем же случае возможно назначение иконки должно происходить иначе.

Назначаем иконку:

<i class="fa fa-share-alt-square" aria-hidden="true"></i>

Назначаем класс для кнопки:

AddToAny_View

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

Внешний вид пункта меню на который навешен класс для функции

Проблемы и их решения

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

// ----------------------------------------------------------------------
// AddToAny загрузка скрипта сервиса по клику + открытие попап окна START
// ----------------------------------------------------------------------
jQuery(document).ready(function ($) {
    // Original Page
    // https://codepen.io/dydaevskiy/pen/zMXowN  
    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", "https://static.addtoany.com/menu/page.js");
      console.log('Скрипт https://static.addtoany.com/menu/page.js успешно подключен')
        //---------------------------------------------
        // Показываем попап окно с идентификатором 1064
        SPU.show(1064);
        // Отменяем вставку хеша в поле URL
        return false;
    }

    });
});

// ----------------------------------------------------------------------
// AddToAny загрузка скрипта сервиса по клику + открытие попап окна END
// ----------------------------------------------------------------------