front-end

Jednoduché sdílení na sociální sítě pro Drupal 8

petr — Thu, 27 Sep 2018 23:52:31 +0000

Jednoduché sdílení na sociální sítě pro Drupal 8 petr Pá, 09/28/2018 - 01:52

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ší.

Podrobte webové stránky analýze během pár minut

hsponner — Sat, 15 Sep 2018 10:36:33 +0000

Podrobte webové stránky analýze během pár minut

Na webové stránky se lze dívat z mnoha pohledů a kromě subjektivního designu lze prakticky každý číselně vyhodnotit. V článku se dozvíte, jaké metriky jsou důležité pro vyhodnocení webu. Tyto metriky mají dopad jak na prožitek vašeho návštěvníka, tak v mnoha případech i na výsledky ve vyhledávačích. Ty už nějakou dobu berou v potaz jak podporu responzivního chování, tak i rychlost webu.

Rychlost načítání webu

Rychlé načítání webu je čím dál důležitější vlastnost. Pomalé weby jsou znevýhodňovány ve výsledcích vyhledávání, pomalé načítání odrazuje návštěvníky od kliknutí na další článek, stahování velkých objemů dat otráví každého mimo 4G signál. Jak zjistíte, jak si vedete a co můžete zlepšit? Zkuste následující online nástroje:

Obrázky

Bez obrázků se dnes moc webů neobejde. Tlak na 4k monitory a retina displeje nás vývojáře nutí používat obrázky s vysokým rozlišením. Ty by se ale neměly načítat zbytečně i pro menší zařízení. Obrázky taktéž můžete před umístěním na web převést do správného formátu a zkomprimovat. Zjistěte, zda máte prostor pro optimalizaci vašich obrázků: https://webspeedtest.cloudinary.com/ Zjistíte, že s Webp formátem dokážete ušetřit až 70 % velikosti obrázku. S využitím vektorové grafiky (SVG) se dostanete ještě na nižší čísla a ještě vás ušetří trápení s responzivním chováním.

Mobilní responzivita

Responzivní chování je komplexní UX analýza, kterou lze těžko vyhodnotit bez reálného uživatelského testování. I tak ale Google přišel se svým hodnotícím algoritmem, který můžete vyzkoušet zde:

https://search.google.com/test/mobile-friendly

Bezpečnost

Otestovat bezpečnost webových stránek online není vůbec jednoduché. Můžete si vyzkoušet penetrační testy (např. https://pentest-tools.com/cms-vulnerability-scanning/drupal-scanner), ale zpravidla se bude jednat o placené služby.

Využijte ale základní test hlaviček požadavků, které se odesílají: https://securityheaders.com/. Pokud získáte A hodnocení, máte velkou pravděpodobnost, že i ostatní aspekty bezpečnosti budou ošetřeny.

SEO

Obdobných online testovacích nástrojů SEO nastavení vašeho webu naleznete na internetu spousty, proto zde žádný nebudu upředňostňovat. Musíte ale počítat s faktem, že tyto nástroje hodnotí pouze technické on-page faktory, jako správně uvedené tagy (nechybí H1, Page Title, Page Description,...). V tuto chvíli nevím o online nástroji, který by plnohodnotně bral v potaz i váš business, analýzu klíčových slov, obsah webu, konkurenci, chování návštěvníků z měřících nástrojů. Pokud o nějakém víte, podělte se v komentáři.

Výkon PHP aplikace - pro pokročilé

Pokud disponujete vyšperkovaným front-endem, kvalitním hostingem a stále trpíte při každém načtení stránky, můžete zkusit analyzovat i PHP back-end aplikace pomocí https://blackfire.io/. Díky tomuto nástroji jste i v neplacené verzi schopni zjistit, co brzdí načítání celé stránky.

Drupal moduly

Když už jsme na Drupal.cz, uvedu i pár analytických modulů přímo pro Drupal, které vám pomohou i v rámci administrace webu.

Závěr

Metriky ve webovém prostředí se mění téměř ze dne na den. Co včera byla vyhovující, zítra může způsobit potíže. Především pokud se bavíme o bezpečnosti. Používáte další online nástroje pro analýzu webových stránek? Máte oblíbené další moduly, které vám třeba napoví, na co se soustředit? Dejte vědět v komentářích.

hsponner So, 09/15/2018 - 12:36

Komentáře

Nejen marketing

Docela tu chybí MarketingMinner. Nejen, že to umí analyzovat cizí weby, ale i ten váš a to včetně analýzy klíčových slov a jejich pozic. Minerů je tam hned několik, takže si každý najde ten svůj.

front-end

Jednoduché sdílení na sociální sítě pro Drupal 8

Bezpečnost především

Začneme jednoduše

Theming

Pro tip:

Závěrem

Poznámka na konec

Podrobte webové stránky analýze během pár minut

Rychlost načítání webu

Obrázky

Mobilní responzivita

Bezpečnost

SEO

Výkon PHP aplikace - pro pokročilé

Drupal moduly

Závěr

Komentáře

Nejen marketing

Přidat komentář