Existuje množství online nástrojů i hotových modulů s jejich integrací pro pohodlné sdílení stránek. Často jsou závislé na JavaScriptu, nejen proto je bezpečnost uživatelů diskutabilní. V tomto článku se dozvíte jak si vytvořit vlastní, jednoduchou ale flexibilní integraci bez JavaScriptu.

Bezpečnost především

V dnešní době se na bezpečnost uživatelů v online světě kladou stále větší nároky. Nástroje na sdílení jako např AddToAny, poskytují nepřeberné množství sociálních sítí, ale samozřejmě za to něco chtějí. Při kliknutí na jejich widget jste nejpre spojeni se serverem dané služby, který váš požadavek zpracuje a následně ho teprve pošle na cílový server. Mají tedy přístup jak k tomu co jste "lajknuli", hlavně jsou ale schopní vás sledovat přes různé weby. Díky tomu vytvoří váš uživatelský profil, a to je v dnešní době velice hodnotná informace. Další možností narušení bezpečnosti spočívá v tom, že tyto scripty jsou šířeny z CDN serverů a vy nemáte možnost ovlivnit jestli se ve scriptu neobjeví nějaká nová funkce, nebo nedejbože, že daný script někdo hackne a na počítače uživatelů se dostane něco zcela jiného. Něco takového na svém webu nechci a klienti většinou také ne. :)

Naštěstí můžeme využít přímo i jednoduchý způsob sdílení bez prostředníka.

Začneme jednoduše

Nejdříve si vytvoříme Vlastní typ bloku (Custom block type), ale můžete klidně použít i oblíbený modul paragraphs.

Jméno vlastního typu bloku: Sociální sítě
Strojové jméno: [social_share]

Nyní přihoďtě pár polí typu boolean. Jedno pro každou službu.

Popiska pole: [Název pro lidi] např. “Twitter”
Strojové jméno: [strojove_jmeno] např. “social_share_twitter” – toto jméno budeme později potřebovat.

Přejděte na Zprávu zobrazení bloku (/admin/structure/block/block-content/manage/social_share/display) a změňte výstup polí na Vlastní. Vyplňte hodnotu pro TRUE textem, který budete chtít vidět na odkazu např. "Sdílet na Twitteru".

Tím máme připravený způsob pro zádávání dat a můžeme vytvořit první blok Sociální sítě a zaškrtnout požadované služby. Na webu uživatelé nyní uvidí pouze Popisky polí.

Theming

Zábavnější část je změna výstupu pole z obyčejné popisky na opravdý link na sdílení. Na začátku je dobré vědět, jak má výsledný link vypadat a jaké informace se prodstřednictím odkazu přenáší. Každá služba má trochu jiné požadavky.

Příklady odkazů:

Facebook:
http://www.facebook.com/share.php?u=[PAGE_URL]&title=[PAGE_TITLE]

Twitter:
http://twitter.com/intent/tweet?status=[PAGE_TITLE]+[PAGE_URL]

LinkedIn:
http://www.linkedin.com/shareArticle?mini=true&url=[PAGE_URL]&title=[PAGE_TITLE]&source=[BASE_PATH]

E-mail:
mailto:?subject=Interesting page [PAGE_TITLE]&body=Check out this site I came across [PAGE_URL]

Z toho vidíme, že pro zprovoznění odkazu pro Twitter budeme potřebovat jméno stránky [PAGE_TITLE] a její URL adresu [PAGE_URL]. Například LinkedIn navíc požaduje i základní cestu [BASE_PATH]. V základním nastavení se v TWIG templatě dostaneme pouze k URL adrese. Další proměné si musíme připravit v preprocesu.

Proto si do souboru theme_name.theme přidáme

/**
* Implements template_preprocess_field().
*/
function theme_name_preprocess_field(&$variables, $hook) {
  switch ($variables['field_name']) {
    case 'field_social_share_twitter':
      $request = \Drupal::request();
      $route_match = \Drupal::routeMatch();
      $title = \Drupal::service('title_resolver')
        ->getTitle($request, $route_match->getRouteObject());

  if (is_array($title)) {
    $variables['node_title'] = $title['#markup'];
  }
  else {
    $variables['node_title'] = (string) $title;
  }

  $variables['base_path'] = base_path();     
    break;
  }
}

Je pravděpodobné, že budete chtít přidat více služeb najednou, proto bude vhodnejší použít DRY (Don't repeat yourself) přístup, abychom kód zbytečně neopakovali. Vytvoříme si tedy pomocnou funkci pro generování proměných.

/**
* Preprocess field_social_share.
*/
function _theme_name_preprocess_field__social_shares(&$variables) {
  $request = \Drupal::request();
  $route_match = \Drupal::routeMatch();
  $title = \Drupal::service('title_resolver')
    ->getTitle($request, $route_match->getRouteObject());

  if (is_array($title)) {
    $variables['node_title'] = $title['#markup'];
  }
  else {
    $variables['node_title'] = (string) $title;
  }

  $variables['base_path'] = base_path();
}

Tuto funkci si následně můžeme zavolat pro různé příležitosti.

/**
 * Implements template_preprocess_field().
 */
function theme_name_preprocess_field(&$variables, $hook) {
  switch ($variables['field_name']) {
    case 'field_social_share_twitter':   
    case 'field_social_share_facebook':
    case 'field_social_share_linkedin':
    case 'field_social_share_email':
_theme_name_preprocess_field__social_shares($variables);
    break;
  }
}

Nyní máme připravený titulek stránky a základní cestu pro použití v šablonách.

Zapněte si Twig debug a v prohlížeči se podívejte na zdrojový kód checkboxů. Nad polem uvidíte seznam návrhů jmen pro šablony, to které heldáme je field--field-social-share-twitter.html.twig.

Protože výstup má být jendoduchý odkaz můžeme předpokládat, že můžeme odebrat podmínky pro zobrazení popisek polí a kontroly vícenásobného pole. Na druhou stranu je důležité zajistit aby se pole nezobrazilo, pokud není checkbox zaškrtnutý. To není v TWIGU úplně jednoduché, protože mu chybí informace o stavu zatržítka. Máeme přístup pouze k aktuální hodnotě. Protože ale používáme vlastní snadno změnitelnou hodnotu nemůžeme tento přístup použít. Naštěstí můžeme použít malý trik. Vzpomínáte jak jsme nenastavili žádnou hodnotu pro FALSE? Díky tomu můžeme testovat jestli pole vrací nějaký #markup. Prázdná hodnota FALSE nevytvoří žádný markup a podmínka se tím pádem nevykoná.

{% if item.content['#markup'] %}

Zde je kompletní kód šablony pro pole.

{%
  set classes = [
  'social-share__service',
  'social-share__service--twitter',
]
%}
{% for item in items %}
  {% if item.content['#markup'] %}
    <a {{ attributes.addClass(classes) }} href="http://twitter.com/intent/tweet?status={{ node_title }}+{{ url('<current>') }}" title="Share to {{ item.content }}">{{ item.content }}</a>
  {% endif %}
{% endfor %}

Pro další služby bude potřeba šablonu samozřejmě upravit, postup bude ale stále stejný.

A máme hotovo. Nyní by měl blok vracet správné odkazy pro sdílení na sociální sítě.

Pro tip:

Zatím jsme nepoužily ani jeden rozšiřující modul. Samozřejmě váš zákazník se nespokojí s obyčejným vzhledem odkazu a bude chtít něco hezčího.

Můžete si vzhled přidat přímo to tématu, ale to nebude příliš flexibilní. Naštěstí existují moduly jako Entity Class Formater pomocí kterého můžete snadno přidat potřebnou třídu například ze select listu. Pro přehlednost můžete vytovřit několik seznamů s třídami – Velikost, Barva, Zaoblení rohů a podobně. Tím dáte editorovi potřebnou variabilitu.

Závěrem

Nyní jsme v bodě, kdy máme náš blok hotový. V každé jeho instanci můžeme zvolit, které ze služeb se na něm zobrazí a jak budou vypadat. Např. na blogu můžete mít sdílení na Twitter, Facebook  a E-mail nastylované jako malé kruhové ikonky. Pro stránku s nabídkou pracovních pozicí bude ale vhodnější zobrazit velkou čtvercovou ikonu s popiskem LinkedIn. 

Poznámka na konec

Den po dopsání draftu tohoto článku byl vydán modul Better Social Sharing Buttons který funguje na podobném principu. Je snažší ho nastavit protože má předdefinované styly i služby, to ale může být zároveň nevýhodou. Pokud budete chtít styl změnit, nebo přidat jiné služby může to být složitější.