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.

, , , , , , , , , , , ,

  1. #1 by Ramazan on August 13, 2012 - 7:32 am

    Üstad bana facebook login yapımı lazımda internette o kadar makale okudum çalıştıramadım.3 gündür bununla uğraşıyorum patron kovacak zannediyorum.
    Sıfırdan mvc ile facebook login nasıl yapılır acil anlatamazmısın ? Çok lazım yaa

    • #2 by Mahmut Can Sözeri on August 14, 2012 - 9:16 am

      Merhaba,

      Yazısına Facebook Login ile ilgili yazıma başladım. Vakit bulduğumda bitireceğim.

      İyi çalışmalar

      • #3 by ramazan on August 15, 2012 - 5:29 pm

        Üstad teşekkür ederim.Çok sağoll.

  2. #4 by recep on November 4, 2012 - 12:50 am

    Hocam değerli çalışmanız için teşekkürler.

  3. #6 by kadoxi on December 16, 2013 - 1:44 pm

    hocam herşey için teşekkürler fakat size sorum bunları nasıl türkçe yapacağız

  1. ASP.NET MVC 4 RC Razor İpucu 6 – Client Side Validation (jquery.validate) « Mahmut Can Sözeri
  2. [Blog Post(Turkish)] ASP.NET MVC İle İlgili Tüm Yazılarım (29 Yazı, 1 Yazı Dizisi ve 1 İpucu Serisi) « Mahmut Can Sozeri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s