將社交網路新增至 ASP.NET Web Pages (Razor) 網站

作者:Tom FitzMacken

本文說明如何新增 Facebook、Twitter、Reddit 和 Digg to pages in an ASP.NET Web Pages (Razor) 網站中的社交網路連結,以及如何包含 Twitter 摘要、Xbox 遊戲卡和 Gravatar 影像。

您將學到什麼:

  • 如何讓使用者將網站加入書簽/連結。
  • 如何新增 Twitter 摘要。
  • 如何將 Facebook Like 按鈕新增至頁面。
  • 如何轉譯 Gravatar.com 影像。
  • 如何在您的網站顯示 Xbox 遊戲卡。

教學課程中使用的軟體版本

  • ASP.NET Web Pages (Razor) 2
  • ASP.NET Web Helper Library (NuGet 套件)

本教學課程也適用于 ASP.NET Web Pages 3,但使用 ASP.NET Web 協助程式程式庫的元件除外。

在社交網路網站上連結您的網站

如果使用者喜歡您網站上的某個專案,他們通常會想要與朋友分享。 您可以藉由顯示字元 (圖示) 讓使用者按一下以在 Digg、Reddit、Facebook、Twitter 或類似網站上共用頁面,讓此作業變得簡單。

若要顯示這些字元,請將 LinkSharecode 協助程式新增至頁面。 人員流覽頁面的人員可以按一下個別圖像。 如果他們有該社交網路網站的帳戶,他們就可以在該網站上張貼頁面的連結。

圖 1

  1. 如在ASP.NET Web Pages網站中安裝協助程式中所述,將 ASP.NET Web 協助程式程式庫新增至您的網站。- 建立名為ListLinkShare.cshtml的頁面,並新增下列標記:

    @using Microsoft.Web.Helpers;
    
    <!DOCTYPE html>
    <html>
      <head>
        <title>LinkShare Example</title>
      </head>
      <body>
        <h1>LinkShare Example</h1>
        Share: @LinkShare.GetHtml("LinkShare Example", linkSites: new[]{
            LinkShareSite.Reddit, LinkShareSite.Facebook, LinkShareSite.Twitter})
      </body>
    </html>
    

    在此範例中 LinkShare ,當協助程式執行時,頁面標題會當做參數傳遞,接著會將頁面標題傳遞至社交網路網站。 不過,您可以傳入任何您想要的字串。 此範例也會指定要包含在清單中的社交網路網站。 您可以指定與您的網站相關的社交網路網站。

  2. 在瀏覽器中執行 ListLinkShare.cshtml 頁面。 (執行之前,請先確定已在 [ 檔案] 工作區中選取頁面。)

  3. 針對您註冊的其中一個網站按一下圖像。 此連結會帶您前往所選社交網路網站上的頁面,您可以在其中共用連結。 例如,如果您按一下 [Reddit] 連結,就會前往 submit to reddit Reddit 網站上的頁面。

    圖 2

新增 Twitter 摘要

如需使用與目前 Twitter API 版本相容之 Twitter 協助程式的相關資訊,請參閱 Twitter 協助程式。 此範例示範如何撰寫自己的協助程式,以便輕鬆地重複使用許多頁面的程式碼。

顯示 Facebook 的 [贊] 按鈕

在某些情況下,最好的選擇是直接從社交網路提供者取得程式碼,而不是依賴協助程式。 如果社交網路提供者更新其選項的速度比協助程式更新更快,尤其如此。

若要將 Facebook 功能 (例如 [贊] 按鈕) 新增至您的網站,您可以從 developers.facebook.com 網站擷取程式碼片段。 在 Facebook 網站上,您可以使用其工具來產生與您網站相關的程式碼片段。

下列醒目提示的程式碼是從 developers.facebook.com 網站上的 [贊] 按鈕工具擷取的程式碼。 您必須提供自己的應用程式識別碼。

<!DOCTYPE html>
<html>
  <head>
    <title>Facebook Like Example</title>
  </head>
  <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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=<provide appId>";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
    <h1>Facebook Like Example</h1>
    <div class="fb-like" data-href="/web-pages/overview" data-layout="standard" 
        data-action="like" data-show-faces="true" data-share="true"></div>
  </body>
</html>

轉譯 Gravatar 影像

Gravatar (「全域辨識的虛擬人偶」) 是一個影像,可用於多個網站上作為您的虛擬人偶,也就是代表您的影像。 例如,Gravatar 可以在論壇文章、部落格批註等中識別人員。 (您可以在 Gravatar 網站註冊自己的 Gravatar,網址為 http://www.gravatar.com/ .) 如果您想要在網站上顯示人員名稱或電子郵件地址旁的影像,您可以使用 Gravatar 協助程式。

在此範例中,您會使用代表自己的單一 Gravatar。 使用 Gravatar 的另一種方式是讓使用者在網站上註冊時指定其 Gravatar 位址。 (您可以瞭解如何讓使用者在將安全性和成員資格新增至 ASP.NET Web Pages Site.) 然後,當您顯示該使用者的資訊時,您只要將 Gravatar 新增至顯示使用者名稱的位置即可。

  1. 如尚未在ASP.NET Web Pages網站中安裝協助程式中所述,將 ASP.NET Web 協助程式程式庫新增至您的網站。

  2. 建立名為 Gravatar.cshtml的新網頁。

  3. 將下列標記新增至 檔案:

    @using Microsoft.Web.Helpers;
    <!DOCTYPE html>
    <html>
        <head>
            <title>Gravatar Example</title>
        </head>
        <body>
            <h1>Gravatar Example</h1>
            @Gravatar.GetHtml("<Your Gravatar account here>")
            &nbsp;&nbsp;&nbsp;
            @Gravatar.GetHtml("<Your Gravatar account here>", 40)
        </body>
    </html>
    

    方法 Gravatar.GetHtml 會在頁面上顯示 Gravatar 影像。 若要變更影像的大小,您可以包含數位做為第二個參數。 預設大小為 80。 小於 80 的數位會使影像更小。 大於 80 的數位會使影像變大。

  4. 在 方法中 Gravatar.GetHtml ,將 取代 <Your Gravatar account here> 為您用於 Gravatar 帳戶的電子郵件地址。 (如果您沒有 Gravatar 帳戶,您可以使用執行該帳戶的人員電子郵件地址。)

  5. 在瀏覽器中執行頁面。 頁面會顯示您指定電子郵件地址的兩個 Gravatar 影像。 第二個影像小於第一個影像。

    圖片 4

顯示 Xbox Gamer 卡片

當人們在線上播放 Microsoft Xbox 遊戲時,每個使用者都有唯一識別碼。 每個玩家的統計資料都會以遊戲卡的形式保留,以顯示其信譽、玩家分數和最近玩過的遊戲。 如果您是 Xbox 玩家,您可以使用協助程式,在網站的 GamerCard 頁面上顯示您的玩家卡片。

  1. 如尚未在ASP.NET Web Pages網站中安裝協助程式中所述,將 ASP.NET Web 協助程式程式庫新增至您的網站。

  2. 建立名為 XboxGamer.cshtml 的新頁面,並新增下列標記。

    @using Microsoft.Web.Helpers;
    <!DOCTYPE html>
    <html>
      <head>
        <title>Xbox Gamer Card</title>
      </head>
      <body>
        <h1>Xbox Gamer Card</h1>
        @GamerCard.GetHtml("major nelson")
      </body>
    </html>
    

    您可以使用 GamerCard.GetHtml 屬性來指定要顯示之玩家卡片的別名。

  3. 在瀏覽器中執行頁面。 此頁面會顯示您指定的 Xbox 遊戲卡。

    圖 5