Tato kapitola vysvětluje, jak web integrovat se službami sociálních sítí.
V této kapitole se dozvíte, jak uživatelům umožnit vytvoření záložky/odkazu na váš web na webech služeb, jako je například Facebook nebo Digg, jak přidat na web mikroblogy služby Twitter nebo jak web ozdobit pomocí obrázků služby Gravatar či karet hráče služby Xbox.
Co se naučíte:
V této kapitole budou představeny následující principy programování pomocí technologie ASP.NET:
LinkShareTwitterGravatarGamerCardFacebook
Lidé často chtějí sdílet s ostatními to, co se jim na vašem webu líbí. Můžete jim to usnadnit tím, že na webu zobrazíte piktogramy (ikony), na které uživatelé mohou kliknout a sdílet tak stránku na webech služeb Digg, Reddit, Facebook, Twitter nebo jiných podobných služeb. Tyto piktogramy můžete na stránku přidat s použitím pomocné třídy LinkShare (Sdílení odkazu). Návštěvníci vaší stránky pak budou moci kliknout na jednotlivé piktogramy. Pokud budou mít účet příslušné služby sociálních sítí, budou na něm moci publikovat odkaz na váš web.
<!DOCTYPE html> <html> <head> <title>LinkShare Example</title> </head> <body> <h1>LinkShare Example</h1> Sdílet: @LinkShare.GetHtml("LinkShare Example") </body> </html>
V tomto příkladu je při spuštění pomocné třídy LinkShare této třídě předán jako parametr nadpis stránky. Ta jej následně předá webu sociálních sítí. Třídě můžete ale předat libovolný textový řetězec.
del.icio.us, přejdete na stránku Save Bookmark (Uložit záložku) na webu Delicious.
ASP.NET poskytuje pomocné objekty, pomocí nichž je možné přidat na stránku mikroblog služby Twitter. Když ve svém kódu použijete metodu Twitter.Profile (Twitter.Profil), můžete na webové stránce zobrazit mikroblog služby Twitter určitého uživatele služby Twitter. Když ve svém kódu použijete metodu Twitter.Search (Twitter.Vyhledat), můžete určit kritéria vyhledávání pomocí služby Twitter (slov, značek hash nebo jiného prohledávatelného textu) a výsledky zobrazit na stránce. Obě metody pomocné třídy umožňují nakonfigurovat nastavení, jako je například šířka, výška nebo styly.
Informace služby Twitter jsou veřejně přístupné, a proto metody pomocné třídy Twitter můžete na svých stránkách používat i v případě, že nemáte účet služby Twitter.
Následující postup ukazuje, jak vytvořit webovou stránku, která předvádí použití obou metod pomocné třídy Twitter.
<!DOCTYPE html> <html> <head> <title>Twitter Example</title> </head> <body> <table> <tr> <td>Twitter profile helper</td> <td>Twitter search helper</td> </tr> <tr> <td>@Twitter.Profile("<Insert User Name>")</td> <td>@Twitter.Search("<Insert search criteria here>")</td> </tr> </table> </body> </html>
Twitter.Profile nahraďte text <Insert User Name> (<sem vložte uživatelské jméno>) názvem mikroblogu, který chcete zobrazit. Twitter.Search nahraďte text <Insert search criteria here> (<sem vložte kritéria vyhledávání>) textem, který chcete vyhledat. Gravatar („globally recognized avatar“ – globálně rozpoznatelný avatar) je obrázek, který můžete na různých webech použít jako svůj avatar, tedy obrázek, který vás zastupuje. Gravatar může například uživatele identifikovat v příspěvcích fóra, komentářích blogu atd. (Svůj vlastní gravatar si můžete zaregistrovat na webu služby Gravatar na adrese http://www.gravatar.com/.) Pro zobrazení obrázků vedle jmen nebo e-mailových adres na webu je možné použít pomocnou třídu Gravatar.
V tomto příkladu použijete jeden gravatar představující vás samotné. Další způsobem použití gravatarů je umožnit uživatelům, aby při registraci na webu uvedli svou adresu služby Gravatar. (Více informací o tom, jak uživatelům umožnit registraci, najdete v kapitole 16 – Přidání zabezpečení a členství.) Při zobrazení informací o uživateli pak budete moci přidat gravatar všude tam, kde je zobrazeno jméno uživatele.
<!DOCTYPE html> <html> <head> <title>Gravatar Example</title> </head> <body> <h1>Gravatar Example</h1> @Gravatar.GetHtml("<Your Gravatar account here>") @Gravatar.GetHtml("<Your Gravatar account here>", 40) </body> </html>
Metoda Gravatar.GetHtml (Gravatar.Získat kód HTML) zobrazí na stránce obrázek služby Gravatar. Budete-li chtít změnit velikost obrázku, můžete uvést jako druhý parametr číslo. Výchozí velikost je 80. Čísla menší než 80 obrázek zmenšují. Čísla větší než 80 obrázek zvětšují.
Gravatar.GetHtml nahraďte text <Your Gravatar account here> (<Sem přijde účet služby Gravatar>) e-mailovou adresou, kterou používáte pro svůj účet služby Gravatar. (Pokud nemáte účet služby Gravatar, můžete použít e-mailovou adresu někoho, kdo účet má.)
Při online hraní her Microsoft Xbox mají všichni uživatelé své jedinečné ID. Pro každého hráče je vedena statistika ve formě karty hráče, která zobrazuje pověst hráče, jeho skóre a hry, které v poslední době hrál. Jste-li hráčem služby Xbox, můžete na stránkách svého webu zobrazit svou kartu hráče s použitím pomocné třídy GamerCard (Karta hráče).
<!DOCTYPE html> <html> <head> <title>Xbox Gamer Card</title> </head> <body> <h1>Xbox Gamer Card</h1> @GamerCard.GetHtml("major nelson") </body> </html>
Pomocí vlastnosti GamerCard.GetHtml (Karta hráče.Získat kód HTML) určíme alias pro kartu hráče, která má být zobrazena.
S použitím pomocné třídy Facebook a její metody LikeButton (Tlačítko To se mi líbí) můžete uživatelům usnadnit sdílení vašeho obsahu s přáteli ve službě Facebook.
Pomocná třída Facebook vykreslí samotné tlačítko Like (To se mi líbí) a také informace (načtené se služby Facebook) o tom, kolikrát uživatelé na tlačítko Like pro tuto stránku klikli:
Když uživatelé kliknou na tlačítko Like (To se mi líbí) služby Facebook na vašem webu, v seznamu jejich příspěvků ve službě Facebook se objeví odkaz s označením, že se jim stránka líbí.
Metoda LikeButton (Tlačítko To se mi líbí) pomocné třídy Facebook ve výchozím nastavení vygeneruje tlačítko Like (To se mi líbí), které se odkazuje na aktuální stránku. To je nejobvyklejší způsob použití — zobrazené tlačítko Like (To se mi líbí) poskytuje možnost vytvořit odkaz na webu služby Facebook na obsah, který si uživatel právě prohlíží. Pomocné třídě Facebook můžete při použití metody LikeButton případně předat adresu URL. V tom případě se bude odkaz Like (To se mi líbí) na webu služby Facebook odkazovat na zadanou stránku. To je užitečné v případě, že na aktuální stránce jsou uvedeny další weby a vy chcete pro tyto weby vytvořit samostatná tlačítka Like.
Metoda LikeButton (Tlačítko To se mi líbí) umožňuje zadat mimo jiné následující možnosti pro zobrazení tlačítka Like:
light – světlé, nebo dark – tmavé) pro zobrazení tlačítka Like (To se mi líbí) V následujícím příkladu vytvoříme dvě tlačítka Like (To se mi líbí). Jedno se odkazuje na aktuální stránku a druhé na konkrétní adresu URL (web ASP.NET WebMatrix). Abyste příklad mohli otestovat, musíte mít účet služby Facebook.
Facebook se nachází v jiné knihovně než celá řada dalších pomocných tříd.) <!DOCTYPE html> <html> <head> <title>Facebook 'Like' Button</title> <style>body {font-family:verdana;font-size:9pt;}</style> </head> <body> <p>Points to the current page, uses default settings:</p> @Facebook.LikeButton() <p>Points to the ASP.NET Web site:</p> @Facebook.LikeButton( href: "http://www.asp.net/webmatrix", action: "recommend", width: 250, buttonLayout: "button_count", showFaces: true, colorScheme: "dark") </body> </html>
První instance metody Facebook.LikeButton využívá všechna výchozí nastavení, a proto se odkazuje na aktuální stránku. Druhá instance zahrnuje volitelné možnosti. Pomocí parametru url určíme adresu URL, která se má uživatelům líbit. Abychom změnili typ odkazu Like (Líbí se) na Recommend (Doporučuje), nastavíme parametr action (akce) na hodnotu "recommend" ("doporučuje") – výchozí hodnotou je "like" ("líbí se"). Zobrazení počtu ve stylu tlačítka je možné zvolit nastavením parametru layout (rozložení) na hodnotu "button_count" (počet jako tlačítko) místo hodnoty "standard" (standardní) nebo "box_count" (počet jako okénko). Profilové obrázky služby Facebook můžete pod tlačítkem Like zobrazit nastavením parametru showFaces (Zobrazit tváře) na hodnotu true. A konečně, barvené schéma můžete zvolit nastavením parametru colorScheme (barevné schéma) na hodnotu "dark" (tmavé). Výchozím nastavením je hodnota "light" (světlé).
Pokud stránku testujete v prostředí WebMatrix, nebudete moci otestovat první odkaz (tlačítko Like, které se odkazuje na aktuální stránku). Protože je stránka spuštěna na místním počítači (s použitím adresy URL localhost), služba Facebook nemůže vytvořit zpětný odkaz. Až bude web veřejně přístupný, bude odkaz fungovat.