ASP.NET Web Sayfaları (Razor) Sitelerine Sosyal Ağ Ekleme

  • Makale

yazan: Tom FitzMacken

Bu makalede, ASP.NET Web Sayfaları (Razor) web sitesindeki sayfalara Facebook, Twitter, Reddit ve Digg için sosyal ağ bağlantılarının nasıl ekleneceği ve Twitter akışları, Xbox oyuncu kartları ve Gravatar görüntülerinin nasıl ekleneceği açıklanır.

Öğrenecekleriniz:

  • Kişilerin sitenize yer işareti eklemesine/sitenizi bağlamasına izin verme.
  • Twitter akışı ekleme.
  • Sayfalara Facebook Beğen düğmesi ekleme.
  • Gravatar.com görüntüleri işleme.
  • Sitenizde Xbox oyuncu kartı görüntüleme.

Öğreticide kullanılan yazılım sürümleri

  • ASP.NET Web Sayfaları (Razor) 2
  • ASP.NET Web Yardımcısı Kitaplığı (NuGet paketi)

Bu öğretici, ASP.NET Web Yardımcısı Kitaplığı'nı kullanan bölümler dışında ASP.NET Web Sayfaları 3 ile de çalışır.

Web Sitenizi Sosyal Ağ Sitelerine Bağlama

İnsanlar sitenizdeki bir şeyi beğeniyorsa, bunu genellikle arkadaşlarınızla paylaşmak isterler. İnsanların Digg, Reddit, Facebook, Twitter veya benzer sitelerdeki bir sayfayı paylaşmak için tıklayabileceği glifleri (simgeleri) görüntüleyerek bunu kolaylaştırabilirsiniz.

Bu glifleri görüntülemek için yardımcıyı LinkSharecode bir sayfaya ekleyin. Sayfanızı ziyaret eden Kişiler tek bir karakteri tıklatabilir. Bu sosyal ağ sitesine sahip bir hesapları varsa, bu sitedeki sayfanıza bir bağlantı gönderebilirler.

Resim 1

  1. ASP.NET Web Yardımcıları Kitaplığı'nı, henüz eklemediyseniz , ASP.NET Web Sayfaları Sitesine Yardımcı Yükleme bölümünde açıklandığı gibi web sitenize ekleyin.- ListLinkShare.cshtml adlı bir sayfa oluşturun ve aşağıdaki işaretlemeyi ekleyin:

    @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>

    Bu örnekte, yardımcı çalıştırıldığında LinkShare , sayfa başlığı parametre olarak geçirilir ve bu da sayfa başlığını sosyal ağ sitesine geçirir. Ancak, istediğiniz dizeyi geçirebilirsiniz. Bu örnek, listeye eklenecek sosyal ağ sitelerini de belirtir. Sitenizle ilgili sosyal ağ sitelerini belirtebilirsiniz.

  2. ListLinkShare.cshtml sayfasını tarayıcıda çalıştırın. (Sayfayı çalıştırmadan önce Dosyalar çalışma alanında seçili olduğundan emin olun.)

  3. Kaydolduğunuz sitelerden birinin karakterine tıklayın. Bağlantı, sizi seçili sosyal ağ sitesindeki bir bağlantıyı paylaşabileceğiniz sayfaya götürür. Örneğin Reddit bağlantısına tıklarsanız Reddit web sitesindeki sayfaya submit to reddit yönlendirilirsiniz.

    Resim 2

Twitter Akışı ekleme

Twitter API'sinin geçerli sürümüyle uyumlu bir Twitter yardımcısını kullanma hakkında bilgi için bkz. Twitter yardımcısı. Bu örnekte, birçok sayfadan kodu kolayca yeniden kullanabilmek için kendi yardımcınızı nasıl yazabileceğiniz gösterilmektedir.

Facebook "Beğen" Düğmesini Görüntüleme

Bazı durumlarda en iyi seçeneğiniz kodu bir yardımcıya güvenmek yerine doğrudan sosyal ağ sağlayıcısından almaktır. Bu durum özellikle sosyal ağ sağlayıcısının seçeneklerini yardımcının güncelleştirdiğinden daha hızlı bir şekilde güncelleştirmesi durumunda geçerlidir.

Sitenize Facebook özellikleri (Beğen düğmesi gibi) eklemek için developers.facebook.com sitesinden kod parçacıklarını alabilirsiniz. Facebook sitesinde, kendi araçlarını kullanarak sitenizle ilgili bir kod parçacığı oluşturursunuz.

Aşağıdaki vurgulanan kod, developers.facebook.com sitesindeki Beğen Düğmesi aracından alınan koddur. Kendi uygulama kimliğinizi sağlamanız gerekir.

<!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 Görüntüsü İşleme

Gravatar ("küresel olarak tanınan avatar") birden çok web sitesinde avatarınız olarak kullanılabilen bir resimdir; yani sizi temsil eden bir resimdir. Örneğin, Gravatar bir forum gönderisinde, blog yorumunda vb. bir kişiyi tanımlayabilir. (Adresinden Gravatar web sitesinde http://www.gravatar.com/kendi Gravatar'ınızı kaydedebilirsiniz.) Web sitenizde kişilerin adlarının veya e-posta adreslerinin yanında resim görüntülemek istiyorsanız Gravatar yardımcısını kullanabilirsiniz.

Bu örnekte, kendinizi temsil eden tek bir Gravatar kullanıyorsunuz. Gravatar kullanmanın bir diğer yolu da kullanıcıların sitenize kaydolduğunda Gravatar adreslerini belirtmelerine izin vermektir. (Kişilerin ASP.NET Web Sayfaları Sitesine Güvenlik ve Üyelik Ekleme bölümüne kaydolmasına nasıl izin vereceğinizi öğrenebilirsiniz.) Ardından bu kullanıcının bilgilerini her görüntülediğinizde Gravatar'ı kullanıcının adını görüntüleyeceğiniz yere ekleyebilirsiniz.

  1. Henüz yapmadıysanız, ASP.NET Web Sayfaları Sitesine Yardımcı Yükleme bölümünde açıklandığı gibi web sitenize ASP.NET ASP.NET Web Yardımcıları Kitaplığı'nı ekleyin.

  2. Gravatar.cshtml adlı yeni bir web sayfası oluşturun.

  3. Dosyaya aşağıdaki işaretlemeyi ekleyin:

    @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 yöntemi sayfada Gravatar görüntüsünü görüntüler. Görüntünün boyutunu değiştirmek için ikinci parametre olarak bir sayı ekleyebilirsiniz. Varsayılan boyut 80'dir. 80'den küçük sayılar görüntüyü küçültür. 80'den büyük sayılar görüntüyü büyütür.

  4. yöntemlerinde Gravatar.GetHtml değerini Gravatar hesabınız için kullandığınız e-posta adresiyle değiştirin <Your Gravatar account here> . (Gravatar hesabınız yoksa, bunu yapan birinin e-posta adresini kullanabilirsiniz.)

  5. Sayfayı tarayıcınızda çalıştırın. Sayfada, belirttiğiniz e-posta adresi için iki Gravatar görüntüsü görüntülenir. İkinci görüntü, birincisinden daha küçüktür.

    Resim 4

Xbox Oyuncu Kartını Görüntüleme

İnsanlar çevrimiçi Microsoft Xbox oyunları oynadığında, her kullanıcının benzersiz bir kimliği vardır. İstatistikler, her oyuncu için saygınlığını, oyuncu puanını ve son oynanan oyunları gösteren bir oyuncu kartı biçiminde tutulur. Xbox oyuncusuysanız yardımcıyı kullanarak GamerCard oyuncu kartınızı sitenizdeki sayfalarda gösterebilirsiniz.

  1. Henüz yapmadıysanız, ASP.NET Web Sayfaları Sitesine Yardımcı Yükleme bölümünde açıklandığı gibi web sitenize ASP.NET ASP.NET Web Yardımcıları Kitaplığı'nı ekleyin.

  2. XboxGamer.cshtml adlı yeni bir sayfa oluşturun ve aşağıdaki işaretlemeyi ekleyin.

    @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>

    Görüntülenecek oyuncu kartının diğer adını belirtmek için özelliğini kullanırsınız GamerCard.GetHtml .

  3. Sayfayı tarayıcınızda çalıştırın. Sayfada belirttiğiniz Xbox oyuncu kartı görüntülenir.

    Resim 5