13 – Přidání sociálních sítí na web

 
 

 

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:

 

 

Odkazy na váš web na webech sociálních sítí

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.

ch13socialnetworking-1

  1. Pokud jste ji ještě nepřidali, přidejte na svůj web knihovnu pomocných webových tříd ASP.NET tak, jak popisuje kapitola 1 – Začínáme se sadou WebMatrix a webovými stránkami ASP.NET.
  2. Vytvořte stránku s názvem ListLinkShare.cshtml a přidejte do ní následující kód značkovacího jazyka:
    <!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.

  3. Spusťte stránku ListLinkShare.cshtml v prohlížeči. (Před jejím spuštěním ověřte, zda je stránka vybrána v pracovním prostředí Files – Soubory.)
  4. Klikněte na piktogram některého z webů, na kterém jste zaregistrováni. Pomocí tohoto odkazu přejdete na stránku zvoleného webu sociálních sítí, kde budete moci vytvořit sdílený odkaz. Pokud například kliknete na odkaz del.icio.us, přejdete na stránku Save Bookmark (Uložit záložku) na webu Delicious.

    ch13socialnetworking-2

Přidání mikroblogu služby Twitter

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.

ch13socialnetworking-3

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.

  1. Pokud jste ji ještě nepřidali, přidejte na svůj web knihovnu pomocných webových tříd ASP.NET tak, jak popisuje kapitola 1.
  2. Přidejte na web novou stránku s názvem Twitter.cshtml.
  3. Do této stránky přidejte následující programový kód a kód značkovacího jazyka:
    <!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>
  4. V příkazu Twitter.Profile nahraďte text <Insert User Name> (<sem vložte uživatelské jméno>) názvem mikroblogu, který chcete zobrazit.
  5. V příkazu Twitter.Search nahraďte text <Insert search criteria here> (<sem vložte kritéria vyhledávání>) textem, který chcete vyhledat.
  6. Spusťte stránku v prohlížeči.

Zobrazení obrázku služby Gravatar

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.

  1. Pokud jste ji ještě nepřidali, přidejte na svůj web knihovnu pomocných webových tříd ASP.NET tak, jak popisuje kapitola 1.
  2. Vytvořte novou webovou stránku s názvem Gravatar.cshtml.
  3. Do stránky přidejte následující kód značkovacího jazyka:
    <!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í.

  4. Ve voláních metody 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á.)
  5. Spusťte stránku v prohlížeči. Stránka zobrazí dva obrázky služby Gravatar pro uvedenou e-mailovou adresu. Druhý obrázek bude menší než ten první.

    ch13socialnetworking-4

Zobrazení karty hráče služby Xbox

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).

  1. Pokud jste ji ještě nepřidali, přidejte na svůj web knihovnu pomocných webových tříd ASP.NET tak, jak popisuje kapitola 1.
  2. Vytvořte novou stránku s názvem XboxGamer.cshtml a přidejte do ní následující kód značkovacího jazyka.
    <!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.

  3. Spusťte stránku v prohlížeči. Stránka zobrazí určenou kartu hráče služby Xbox.

    ch13socialnetworking-5

Zobrazení tlačítka Like (To se mi líbí) služby Facebook

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:

ch13socialnetworking-06

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

ch13socialnetworking-07

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:

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.

  1. Pokud jste ji ještě nepřidali, přidejte na svůj web knihovnu Facebook.Helper tak, jak popisuje kapitola 1. (Všimněte si, že pomocná třída Facebook se nachází v jiné knihovně než celá řada dalších pomocných tříd.)
  2. Vytvořte novou stránku s názvem FacebookLikeBtn.cshtml a přidejte do ní následující kód značkovacího jazyka.
    <!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é).

  3. Spusťte webovou stránku v prohlížeči. Stránka zobrazí tlačítka Like služby Facebook, která jste vytvořili.

    ch13socialnetworking-10

  4. Klikněte na tlačítko Recommend (Doporučit), které se odkazuje na web ASP.NET. Pokud nejste ke službě Facebook přihlášeni, budete vyzváni, abyste se přihlásili. Po přihlášení na své zdi uvidíte odkaz Recommend (Doporučuje).

    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.

Další materiály

Referenční příručka pro webové stránky ASP.NET se syntaxí Razor