ASP.NET MVC 4 RC Razor İpucu 5 – Twitter ve Facebook Helper’ını Kullanma (NuGet)

Merhaba MVC Severler,

Evet başlıkta yanlış okumadınız, ASP.NET MVC 4 RC üzerinden anlatacağım. Önceki yazımda ASP.NET MVC 3 Razor içerisinde HTML 5 Sürükle Bırak Dosya Yükleme hakkında güzel ve faydalı olabileceğini düşündüğüm bir yazıyı paylaşmıştım. Bu yazımda Twitter’da son paylaşılan tweet’ler ile Facebook LikeBox örnekleri yapacağız.

Hazırlık

Uygulamamızı Visual Studio 2010 Ultimate sürümünde ASP.NET MVC 4 RC Empty Template üzerinde yapacağız. ASP.NET MVC 4’ü bu adresten indirebilirip yükleyebilirsiniz.

Giriş

Sosyal paylaşım sitelerinin artık ne kadar önemli olduğunu biliyoruz. İnternet sitelerimizin Facebook üzerinde beğenilmesi için Facebook’un kendisinin doğrudan Developer sayfasından gerekli script kodlarını kullanırız. Kendimizi, şirketimizin, topluluğumuz, projemiz vb Twitter profilimizi web sayfalarımızda görüntülemek isteriz. ASP.NET MVC içerisinde bunu yapmak aslında oldukça kolay. Microsoft.Web.Helper kütüphanesi sayesinde sadece Twitter ve Facebook helper’larını kullanarak bunu yapabiliriz.

Uygulama

ASP.NET MVC 4 Razor Empty Project açıyoruz. İçerisine Home adında bir Controller ve Index adında bir View oluşturuyoruz.

Package Manager Console’ı açıyoruz:

Twitter ve Facebook Helper’larını kullanmak için Package Manager Console’ı açıp “install-package Microsoft-Web-Helpers” yazarak Microsoft.Web.Helpers kütüphanesini yüklüyoruz.

Yükleme işlemini yaptıktan sonra Object Browser’dan baktığımızda Helper’ları görebiliyoruz.

Projemizi bir kere derledikten sonra Index.cshtml üzerinde kod yazmaya başlayabiliriz.

Twitter.Profile

Index.cshtml dosyamız:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @Twitter.Profile("mcansozeri")
    </div>
</body>
</html>

Burada Twitter Helper’ının Profile metotunu kullanıyoruz. Parametre olarak username vermemiz ise Twitter profili çekmemiz için yeterlidir.

Erkan çıktısı:

Biraz özellikler ile oynarsak aşağıdaki gibi bir görünüm elde edebiliriz:

Twitter.TweetButton

Index.cshtml içerisindeki kodumuz:

       @Twitter.TweetButton(userName:"mcansozeri",tweetText:"Kendi Hayatının CEO'su Olan Girişimcinin Paylaşımları",url:"http://www.mcansozeri.com",language:"TR")

Ekran çıktımız. Tweet butonuna tıklayınca:

Twitter.Search

Index.cshtml içerisindeki kodumuz:

    @Twitter.Search(searchQuery:"ASP.NET MVC 3 Razor")

Ekran çıktısı:

Twitter’in kullanımı ile ilgili bir kaç örnek paylaştım. Şimdi sırada Facebook var.

Facebook.LikeButton

Index2.cshtml içerisindeki kodumuz:

        @Facebook.LikeButton(href:"http://www.mcansozeri.com")

Ekran çıktısı:

Facebook Helper’i içeriği oldukça kapsamlı. Aşağıda kendiniz inceleyip ona göre ihtiyaçlarını gidebilirsiniz.

Özellikle Facebook Authentication ile ilgili güzel bir video’lu örnek yapacağım. Şimdilik yazımın sonuna geldim.

İndirme

Uygulamayı bu linkten indirebilirsiniz.

Umarım faydalı bir yazı olmuştur.

İyi çalışmalar

MVC ile kalın.

Mahmut Can Sozeri