Vytvárame webové stránky, 16. časť
Internetové stránky dnes obsahujú interakciu so sociálnymi sieťami rôzneho druhu. Či už ide oFacebook, Google+, alebo rôzne iné na zdieľanie záložiek, odosielanie „tvítov“ na Twitter. Okrem pár špeciálnych webov ide oneodmysliteľnú súčasť. Pozrime sa teda, ako si interaktívne prvky pridať na stránku.
Začnime základným prvkom, teda tlačidlom Páči sa mi. Jeho pridanie je vcelku nenáročné akód vygeneruje priamo konkrétna sociálna sieť, vnašom prípade Facebook. Včasti Developer nájdete postup, ako si nechať pripraviť kód pre vašu stránku vrátane prispôsobenia vzhľadu aktívneho prvku. Náš návod však prináša niečo navyše, čo vám umožní prestať tápať azisťovať, prečo daný kód nefunguje.
Aplikácia je vytvorená zatiaľ vrežime testovania, ateda nie je verejne použiteľná
Prvý krok je zaregistrovať si aplikáciu.
Áno, aj zdanlivo obyčajný prvok funguje vponímaní sociálnych sietí ako
samostatná aplikácia svlastným ID. To je potrebné na to, aby ste vybrali,
ktorý prvok sa bude zobrazovať na stránke abude sa dať „lajkovať“.
Vzobrazení FB je vhornej lište ozubené koliesko. Kliknutím naň sa
zobrazí menu apoložka Správa aplikací vás navedie do režimu ich
správy avytvárania nových.
Kliknutím na tlačidlo Vytvořit novou aplikaci sa zobrazí dialógové okno na zadanie jej názvu. Pomenovanie je ľubovoľné, jej názov nemusí byť zhodný spomenovaním FB stránky komunít, na ktorú chceme odkazovať. Zabezpečenie prehľadnosti je prvoradé, preto odporúčame výstižné pomenovanie, aby bolo vždy jasné, kam aplikácia vedie, keďže aplikácií si môžete vytvoriť neobmedzené množstvo. Kategóriu netreba vyberať. Vďalšom kroku treba vyplniť kód CAPTCHA, aby nedochádzalo k automatickému registrovaniu servermi.
Konfigurácia
Nasleduje detailné prispôsobenie nastavení aplikácie, ktorá zatiaľ beží vtzv. režime Sandbox. Signalizuje to jednak opis pod názvom aaj oranžové koliesko. Aplikácia nie je dostupná navonok anepodarí sa vám sprevádzkovať interaktívne prvky na stránke, pokiaľ ju neprepnete do plného režimu. Včasti Režim pískoviště je prepínač nastavený na Povoleno avo finále ho po všetkých úpravách bude treba neskôr prepnúť do režimu Zakázáno. Zmena je ohlasovaná sodstupom pár minút, naše skúsenosti ztvorby viacerých takýchto prvkov hovoria, že ide skôr osekundy. Kým uložíte svoju webovú stránku spridaným kódom aobnovíte na serveri, bude snajväčšou pravdepodobnosťou plnofunkčná. Ďalej uvádzame spôsoby, ako sa bude aplikácia FB integrovať na vaše stránky avaplikáciách FB, iOS alebo Androide. Na začiatok je pre nás podstatná integrácia na webe anetreba vypĺňať ďalšie kroky.
Rozšírené voľby
Vrámci definovania politiky používania ostatnými používateľmi (napríklad možnosť „lajkovať“ vašu stránku na webe) sa dá vynútiť politika prístupu amožností presne tak ako pri zakladaní komunitnej stránky. Možno teda vybrať geografické územie, pre ktoré bude prvok určený. Obmedzenia sa aplikujú na web, prípadne ak propagujete alkohol alebo podobné nápoje, je nevyhnutné vrámci dodržania obchodných podmienok amožných legislatívnych úprav iných štátov zaškrtnúť túto informáciu vnastaveniach. Pokročilé úpravy sa definujú aj na IP adresy serverov, čo pravdepodobne nebude nevyhnutné.
Aktivácia
Až keď prejdete všetkými krokmi (nezabudnite vypnúť režim pieskovisko), treba špecifikovať, ako vlastne tlačidlo na stránke bude vyzerať. Či pôjde osvetlé alebo tmavé pozadie, akú šírku bude mať prvok, či bude zobrazovať fotky používateľov, ktorí sa pridali medzi priaznivcov, alebo bude obsahovať len počet používateľov, ktorým sa stránka páči. Včasti Facebook Developers – Social Plugins – Like Button definujete potrebné parametre. Okrem toho sa dá tlačidlo Like prepnúť do režimu Recommend.
Príprava návrhu tlačidla Páči sa mi
Keď je všetko nastavené, tlačidlom Get code sa vygeneruje kód azobrazí vsamostatnom okne. Môžete použiť kód kompatibilný sHTML5, IFRAME, URL alebo XBFML (Facebook Markup Language). Vrámci kompatibility, ktorej sme sa venovali aj vpredchádzajúcej časti, odporúčame využiť zápis pre formát HTML5. Najmä ak tvoríte responzívny web scieľom zobrazovania aj na mobilných platformách. Kód pozostáva zdvoch častí. Prvú treba vložiť hneď za element BODY, druhú časť kódu na miesto, kde sa má prvok zobrazovať.
Ďalšie aplikácie
Uvedené tlačidlo je len jeden zmnohých spôsobov, ako si integrovať podobné prvky na web. Kďalším patria dialógové okná na zdieľanie obsahu, tzv. Embedded Posts. Ak teda máte blog achcete ho šíriť ďalej, dá sa používateľom vopred pripraviť takýto obsah sadresou aj obrázkom príspevku. Je to lepšie na rýchle zdieľanie, nemusia tak písať vlastné komentáre ani nijako uvádzať príspevok. Rovnako sa dá integrovať možnosť zobrazovania komentárov kdanej téme. Dáta sa agregujú zfacebookového profilu, na ktorý sa viaže aplikácia. Špecialitou je tzv. Like Box. Na stránkach je dosť obľúbený amôže zobrazovať fotky priateľov danej stránky a príspevky od jednotlivých používateľov. Dá sa definovať aj jeho veľkosť azobrazenie záhlavia. Vzávislosti od veľkosti sa bude zobrazovať aj počet fotografií priateľov. Pri každej zmene vidno okamžitý náhľad, takže sa dá veľkosť vzhľadom nazobrazený obsah prispôsobovať ešte pred vygenerovaním finálneho kódu. Ako pri všetkom aj tu odporúčame striedmosť, aby obsah stránky nebol vyslovene prepchatý podobnými pluginmi azbytočne nekazil celý dojem zwebu.
Prvok Like Box možno veľmi často vidieť na webových stránkach
Ikona pre iOS
To, že každý web má svoju ikonu, je bežné. Favicon pozná každý, kto vytvára webové stránky, no zaujímavá možnosť je rozšíriť ikonu aj pre mobilné zariadenia Apple. Ak si používatelia budú chcieť vytvoriť odkaz na váš web priamo na ploche iPhonu či iPadu, je vhodné aj pre túto skupinu pripraviť zodpovedajúcu ikonu. Rozdielne veľkosti ikon sú podporované od verzie iOS 4.2. Veľkosti sú takéto: iPhone: 57 × 57 pixelov, iPad: 72 × 72 pixelov, iPhone 4 a vyšší: 114 × 114 pixelov. Ikony musia byť umiestnené vkoreňovom adresári webu astránky musia obsahovať tento kód. Tu je príklad pre všetky tri veľkosti ikon.
