DC ⋙ Cesta webmastera ⋙

CW(2,2) - SOCIAL BOOKMARKING ikony na vašem webu, social presence

Dalším doplňkem enginu je úplná kravina, která je čím zbytečnější, tím více vyžaduje tvůrčí invence, ale bohužel je dnes v kurzu. Její bublina se náhle nafoukla po roce 2010 a pomalu zase zplaskává, až zanikne úplně. Bohužel dnes žijeme v době, kdy se nám tvůrci webů hromadně domnívají, že bez social bookmarkingu se web dneška neobejde.

Tohle je tehdejší postup před ix lety a najdete si aktuální pokyny pro každou síť zvlášť.

Jak říkám, už mě to dnes (2019) nezajímá.

Takže do toho:

Problém je kromě jiného ten, že každá socsíť má svoje požadavky na javascript a vlastní html tagy úplně jiné. A kvůli každé ikoně musíte dost zásadně zasáhnout do svého způsobu generování stránky. Minimálně přidat jejich javascript.

Tak třeba Facebook

Ten vyvinul svoje vlastní funkční html tagy, říká jim Open Graph Markup. Než vám ikona na sdílení stránky do FB začne fungovat, musíte nějak dostat Open Graph Markup do hlavičky svého html. To si udělá každý sám ve své PHP či ASP nebo jiné aplikaci. Je to vlastně podobné jako Rich text snippets, které zase prosazuje kvůli něčemu jinému Google. My weboví tvůrci jsme jim holt vydáni na milost. FB nabízí více různých možností, jak propojit web s FB. Já zde popisuji pouze klasický Share button.

Oficiální pokyny:

https://developers.facebook.com/docs/sharing/web
https://developers.facebook.com/docs/plugins/share-button/

Podle jejich oficiálního návodu 2020 koukám, že to o něco zjednodušili, než jak jsem to musel dělat před třemi lety.

Nejdřív po vás chtějí, abyste přidal jejich metatagy do každé hlavičky své stránky, na které má být ikona FB share.

Jak vidno, musíte se postarat o vygenerování meta OG tagu s: URL, jejich typologií, title, description a link na úvodní image.
<head>
<meta property="og:url"
content="https://www.your-domain.com/your-page.html" />
<meta property="og:type"
content="website" />
<meta property="og:title"
content="Your Website Title" />
<meta property="og:description"
content="Your description" />
<meta property="og:image"
content="https://www.your-domain.com/path/image.webp" />
</head>

Poté si musíte zasvinit svoje <body> jejich javascriptem:
<body>
<div id="fb-root"></div>
<script>function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-share-button"
data-href="https://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>
</body>

A teď naštěstí snad už nepožadují, aby URL byla ošetřena od nepovolených znaků. Já jsem kdysi musel v PHP vygenerovat správný formát adresy, čili:
$fbURLencoded = urlencode($_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);

Pak si v PHP vytvořit funkci, která bere data přímo z bussiness logiky vaší aplikace a dává je do OG tagů:
function socpres1head() { //*****social1bookmarking**vloží do head
global $ARTICdata, $URLencoded, $fbURLencoded;
?>
<meta property="og:url" content="<?= $fbURLencoded; ?>"/>
<meta property="og:title" content="<?= $ARTICdata[0]['TEX1nadpis'] ?> - Digitální Cestovatel"/>
<meta property="og:description" content="<?= $ARTICdata[0]['METAdescription'] ?>"/>
<meta property="og:image" content="<?= $ARTICdata[0]['IMGintro'] ?>"/>
<script src="https://apis.google.com/js/platform.js" async defer>
{
lang: 'cs'
}
</script>
<?php } ?>

Pak si v PHP vytvořit funkci, která bere data přímo z bussiness logiky vaší aplikace a dává je do jejich divů a javascriptu ve vašich body:
function socpres2body() {
?>
<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/cs_CZ/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<?php } ?>

A nakonec PHP funkci, která přidává jejich ikony s vašimi daty do vašeho body:
function socpres3article() {
global $ARTICdata, $URLencoded, $fbURLencoded;
?>
<div class="fb-share-button" data-href="<?= $URLencoded; ?>" data-layout="button">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?= $fbURLencoded; ?>%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Sdílet</a></div>
<?php } ?>

A s těmito třemi zhůvěřilostmi si zasvinit každou stránku obsahu vašeho webu. Průser je, že s těmito doplňky dopředu musí počítat řídící logika vaší aplikace, a druhým průserem je, že kvůli jediné FB ikoně zasviňujete třikrát. V případě umístění do body umisťujete ještě víckrát, protože chcete mít social bookmarking pod nadpisem článku, pod koncem článku a nejlépe ještě v hlavní šabloně celého webu.

To je povyku kvůli jediné blbé FB ikoně!

A jak říkám, časem po několika letech přijdete na to, že social presence webu je v podstatě na nic a zejména na česky psaných webech nepřináší žádný účinek, jenom je s ní dost práce a zaprasí vaše stránky cizím kódem.

Následuje Twitter

A teď samozřejmě tu samou fantasmagorii musíte dělat znovu pro Twitter, ale už podle pokynů Twitteru, zase kvůli jediné ikoně:

Twitter dělá vlastně to samé, umisťuje na vaši stránku svoji ikonu s kódem, který dovolí uživateli snadněji přidat vaši stránku webu na svůj Twitter účet a založit jeho nový tweet. Oficiální pokyny zde:

https://dev.twitter.com/web/tweet-button

Svoje PHP funkce obohatíte kódem platným pro Twitter. Podívejte se na ofic. pokyny, od 2020 to také o dost zjednodušili, vypadá to, že Twitter dokonce nepožaduje javascript, což by bylo super! Následující záběry berte proto pouze jako ilustrační!

Twitter požaduje URL článku enkódovanou a se slovem HTTP:
$URLencoded = urlencode("http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);

Funkci socpres2body v PHP obohatíte kódem platným pro Twitter:
function socpres2body() {
?>
<script>window.twttr = (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id))
return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function (f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
<?php } ?>

Pro Twitter upravíte zase také PHP funkci socpres3article pro body elementy.
function socpres3article() {
global $ARTICdata, $URLencoded, $fbURLencoded;
?>
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet?text=<?= $ARTICdata[0]['TEX1nadpis'] ?>&url=<?= $URLencoded ?>">
Tweet</a>
<?php } ?>

Musíte ji doplnit o nové parametry hashtags a via, na to se podíváte v jejich pokynech. To za mě nebylo.

Tedy, jak správně tušíte, cílem mých PHP funkcí je nasázet všechny social bookmarking ikony vedle sebe do řádku, aby to působilo kompaktně a bylo v jediném řádku vedle sebe.

To se vám ale stejně nepovede, protože každá socsíť má jiné rozměry svých ikon a bude to působit kostrbatě. Při naprosté pečlivosti proto budete muset vytvořit ještě CSS kód, který bude upravovat vertikální centrování ikon a výšku řádku, aby ikony byly přesně v jedné ose.

To je sraní se social ikonami, co?

Ostatní socsítě

Zdaleka nejjednodušší to měl Google+, který holt přišel po boomu FB+Tw a byl tak skvělý, že musel zaniknout. Ale ono je to dobře, aspoň je o jednu socsíť méně.

Tam bylo prostě jen potřeba dát do socpres3article {
<g:plus action="share"></g:plus>
}
Toť vše.

Návod pro Google+ byste našli zde (dnes již nepotřebný):
https://perishablepress.com/google-share-button/

No a budete-li chtít ještě Instagram, LinkedIn, Pinterest a co já vím, budete muset pro každou ikonu postupovat podle oficiálního návodu každé socsítě zvlášť.

DC ⋙ Cesta webmastera ⋙