0
363
2018-09-15

Grav - Подключаем AddToAny для каждого поста в сетке постов блога

Во время создания данного блога (напомню что он базируется на CMS Grav) мне захотелось как-то выделиться и реализовать возможность публикации в социальных сетях любого поста из сетки блога, как это все получилось смастерить читайте здесь.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Вступление

Скажу честно реализовать шаринг постов из перечня постов блога не такая уж и серьезная задача для CMS WordPress но для Grav как обычно выяснилось что готового решения попросту нет. По этому придуманный велосипед (по другому не назову) пришлось мастерить самому. Теперь по порядку, и по подробнее.

AddToAny и переделка их стокового варианта для TWIG шаблона

И так AddToAny предлагает нам весьма удобное решение с которым можно ознакомиться здесь:

https://www.addtoany.com/buttons/customize/page_url_title

Ниже стоковый код от AddToAny:

<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="http://www.example.com/page.html" data-a2a-title="Example Page Title">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_twitter"></a>
    <a class="a2a_button_google_plus"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>

Как видно из кода необходимо чтобы атрибут data-a2a-url имел ссылку той страницы которую расшариваем. А атрибут data-a2a-title имел тайтл страницы которую шарим. Единственное чего здесь явно не хватает это картинки расшариваемоой страницы, это можно исправить добавлением атрибута data-img-url c прямым линком на картинку.

TWIG шаблон AddToAny

Наигравшись кодом мне удалось создать вот такой шаблон вывода, для каждого items’a сетки:

{% if truncate %}
{% if page.header.link %}
    <h2 class="p-name">
        {% if page.header.continue_link is not same as(false) %}
        <a href="{{ page.url }}"><i class="fa fa-angle-double-right u-url" aria-hidden="true"></i></a>
        {% endif %}
        <a href="{{ page.header.link }}" class="u-url">{{ page.title }}</a>
    </h2>  <a href="javascript:;" class="Popup-load" data-target="#AddToAnyPopup" data-this-share-url="https://techblog.sdstudio.top{{page.url}}" title="Добавить в социальные сети пост: {{page.title}}" data-img-url="{{ page.media['poster.jpg'].cropZoom(600,200).url() }}">
      <i class="fa fa-share-alt-square"></i></a>
{% else %}
    <h2 class="p-name"><a href="{{ page.url }}" class="u-url">{{ page.title }}</a></h2>  <a href="javascript:;" class="Popup-load" data-target="#AddToAnyPopup" data-this-share-url="https://techblog.sdstudio.top{{page.url}}" title="Добавить в социальные сети пост: {{page.title}}" data-img-url="{{ page.media['poster.jpg'].cropZoom(600,200).url() }}">
      <i class="fa fa-share-alt-square"></i></a>
{% endif %}
{% else %}

{% endif %}

Напомню что все это дело выглядит не много загадочно так как речь идет о выводе при помощи TWIG.

Как видим в коде у нас есть кнопка которая имеет нужные нам атрибуты, но как же красота? Все верно, для красоты нам необходимо попап окно в котором собственно и будут отображаться картинка, название и красивые кнопки для шары страницы.

Focus Popup - как идеальное решение для всплывающего окна

Узнать подробнее о плагине Focus Popup можно по ссылке ниже:

https://github.com/Elkfox/Focus

Пример работы с попап окнами от Focus

https://www.jqueryscript.net/lightbox/Popup-Plugin-jQuery-Focus-js.html

Теперь необходимо создать TWIG шаблон для вывода нашего попапа, ниже то что мне удалось наваять:

<!-----Sosial Linc AddToAny---->
<div class="popup overlay AddToAny" id="AddToAnyPopup">
  <div class="popup-inner">
    <div class="popup-content left">
      <div id="SDStudio_popup_content">

        <div class="h3 SDStudio_PopUp_Post_Title">Зашарить:</div>
        <div class="h4 SDStudio_PopUp_Post_Name"></div>
        <img src="/user/pages/01.home/Loader_255×350.gif"class="SDStudio_PopUp_Post_IMG"></div>
      <!-- ADDTOANY START -->
      <div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="#l" data-a2a-title="Example Page Title">
        <a class="a2a_button_viber"></a>
        <a class="a2a_button_skype"></a>
        <a class="a2a_button_telegram"></a>
        <a class="a2a_button_facebook"></a>
        <a class="a2a_button_facebook_messenger"></a>
        <a class="a2a_button_twitter"></a>
        <a class="a2a_button_google_plus"></a>
        <a class="a2a_button_google_gmail"></a>
        <a class="a2a_button_google_bookmarks"></a>
        <a class="a2a_button_email"></a>
        <a class="a2a_button_whatsapp"></a>
        <a class="a2a_button_copy_link"></a>
        <a class="a2a_button_evernote"></a>
        <a class="a2a_button_sms"></a>
        <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
      </div>

      <script async src="https://static.addtoany.com/menu/page.js"></script>
      <!-- ADDTOANY END -->
      <div>
        <a class="popup-close" data-close aria-label="common.close">X</a>
      </div>
    </div>
  </div>
<div class="My_Overlay"></div>

Не забываем подключить js и css Focus Popup’a

Естественно чтобы все это дело заработало нужно было намудрить JS’a, о чем речь пойдет ниже.

jQuery скрипт для обработки клика по кнопке шары и работы Focus Popup

В общем выкладываю как получилось, естественно что Вам нужно будет переработать даный код под свои нужды, и свою разметку.

// ------------------------------------------------
// AddToAny - Шарим айтомсы сетки и не только
// ------------------------------------------------
// AddToAny - Вешаемобработку шары на всех страницах, на кнопку в меню
// AddToAny - Вешаемобработку шары на всех страницах, на кнопку в меню
jQuery(document).ready(function($){
    $(document).ready(function () {
      /*Центрирование элемента - ФУНКЦИЯ*/
       jQuery.fn.center = function () {
           this.css("position","absolute");
           this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
           $(window).scrollTop()) + "px");
           this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
           $(window).scrollLeft()) + "px");
           return this;
       };

var SDStudio_UrlPageShare = window.location.href;
if (location.href.match('/')) {
    var SDStudio_TitlePageShare = $('title').text();
    var SDStudio_ImagePageShare = $('[property="og:image"]').attr('content');
} else {
    var SDStudio_TitlePageShare = $('h1.SDStudio_Page_Title_in_Head').text();
    var SDStudio_ImagePageShare = $('div#SDStudio_Img_Meta img#SDStudio_left_img').attr('src');
    // var SDStudio_ImagePageShare = $('div#SDStudio_Head_image_background img#SDStudio_left_img').attr('src');
}

$('a[aria-label="Social Shared"]').addClass('Popup-load').attr('data-target', '#AddToAnyPopup').attr('data-this-share-url', SDStudio_UrlPageShare).attr('data-img-url',SDStudio_ImagePageShare).attr('title',SDStudio_TitlePageShare);

$('a[aria-label="Social Shared"], div#SDStudio_Head_image_background i.fa.fa-share-alt-square').click(function(){
  // Показываем кнопку других шар
  $('a.a2a_dd').css('display','');
      // Теперь ищем и заменям значения для нашей шары из айтомса поста
      $('div#AddToAnyPopup').find('div.a2a_kit').attr('data-a2a-url',SDStudio_UrlPageShare);
      $('div#AddToAnyPopup').find('div.a2a_kit').attr('data-a2a-title',SDStudio_TitlePageShare);
      $('.h4.SDStudio_PopUp_Post_Name').text(SDStudio_TitlePageShare);
      $('img.SDStudio_PopUp_Post_IMG').attr('src',SDStudio_ImagePageShare).css('max-width','100%');

      var myPopup = new Focus('#AddToAnyPopup');
      // Применяем центрирование для попап окна
      $('.popup-content.left').center();
      // Показываем попап окно
      myPopup.show();

      });
// --------------------------
// Для шары в меню на странице + под главной картинкой + меню в футере
$('#social-1991-particle > div > a.Popup-load, #SDStudio_Meta_Block > div.SDStudio_metablog_blog_bosts > span > a, #social-4842-particle > div > a.Popup-load').click(function(){
  // И нчинаем переназначать переменки
  var SDStudio_TitlePageShare = $('h1.SDStudio_Page_Title_in_Head').text();
  var SDStudio_ImagePageShare = $('div#SDStudio_Head_image_background').attr('data-lazybgimage');
  // Показываем кнопку других шар
  $('a.a2a_dd').css('display','');
      // Теперь ищем и заменям значения для нашей шары из айтомса поста
      $('div#AddToAnyPopup').find('div.a2a_kit').attr('data-a2a-url',SDStudio_UrlPageShare);
      $('div#AddToAnyPopup').find('div.a2a_kit').attr('data-a2a-title',SDStudio_TitlePageShare);
      $('.h4.SDStudio_PopUp_Post_Name').text(SDStudio_TitlePageShare);
      $('img.SDStudio_PopUp_Post_IMG').attr('src',SDStudio_ImagePageShare).css('max-width','100%');

      var myPopup = new Focus('#AddToAnyPopup');
      // Применяем центрирование для попап окна
      $('.popup-content.left').center();
      // Показываем попап окно
      myPopup.show();

      });
// console.log(SDStudio_TitlePageShare);
// console.log(SDStudio_ImagePageShare);
// console.log(SDStudio_ImagePageShare);
    });
});

В общих чертах все получилось, надеюсь я ничего не упустил.