[C# .NET MVC] Menghitung Jumlah Sosial Sharing Website

 Author : hadinug, 04 November, 2014, Komentar

c# .net mvc social sharing


Penggunaan sosial media sharing memang hampir di tiap website kita temui, kebanyakan website dengan base PHP. Dan memang, beberapa vendor sudah menyediakan interface bahkan widget script khusus untuk membatu para pemilik website menhubungkan websitenya di sosial media.


Nah kali ini sedikit agak berbeda dari tutor saya yang sebelumnya, yang lebih banyak tentang PHP programming. Nah kali ini saya mencoba berbagi bagai mana cara menghitung sosial sharing website dengan C# MVC .NET. Ingin tau bukan, mari ikuti langkah-langkah berikut:



Langkah-1 [MODELS] WebModel.cs

Di project anda, silahkan buat class WebModel.cs pada folder Models, dan isikan function berikut:

       public int GetTweetsShare(string url)
        {

            string jsonString = new System.Net.WebClient().DownloadString("http://urls.api.twitter.com/1/urls/count.json?url=" + url);
            var json = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<Dictionary<string,dynamic>>(jsonString);
            int count =(int)json["count"];

            return count;
        }

        public int GetFbShare(string url)
        {

            string jsonString = new System.Net.WebClient().DownloadString("http://graph.facebook.com/?ids=" + url);
            try
            {
                var json = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<Dictionary<string, dynamic>>(jsonString);
                return json[url]["shares"];
            }
            catch (Exception ex)
            {
                return 0;
            }
        }  

        public int GetLinkedShare(string url) 
        {

            string jsonString = new System.Net.WebClient().DownloadString("http://www.linkedin.com/countserv/count/share?url="+ url +"&format=json");

            var json = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<Dictionary<string, dynamic>>(jsonString);
            int count = json["count"];

            return count;
        }
         


Langkah-2 [CONTROLLERS] SosmedController.cs

Buat class controller Sosmed dan isikan kode berikut:


        [AllowAnonymous]
        public ActionResult Index(int id)
        {
            WebModel Web = new WebModel(); 
            ViewBag.Web = Web; 
            return View();
        }


Langkah-3 [VIEWS] Sosmed/Index

Pada bagian view index, isikan kode berikut:


 @{
          var uri = "http://www.hadinug.net";
  } 
<div class="social-count">
    <div class="sos-share-box sos-fb" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(location.href), 'facebookShare');
            return false;">
        <div class="sos-name">facebook</div>
        <div class="sos-count">@ViewBag.Web.GetFbShare(uri)</div>
    </div>
    <div class="sos-share-box sos-tw" onclick="window.open('https://twitter.com/share?text=' + encodeURIComponent('Custom design jumlah social media sharing ') + '&amp;url=' + encodeURIComponent(location.href) + '&amp;via=hadinug1', 'twitterShare');
            return false;">
        <div class="sos-name">twitter</div>
        <div class="sos-count">@ViewBag.Web.GetTweetsShare(uri)</div>
    </div> 
    <div class="sos-share-box sos-ln" onclick="window.open('https://www.linkedin.com/cws/share?url=' + encodeURIComponent(location.href), 'linkedinShare');
            return false;">
        <div class="sos-name">linkedin</div>
        <div class="sos-count">@ViewBag.Web.GetLinkedShare(uri)</div>
    </div>
</div>  



Langkah-4 [CSS]

Isikan kode css berikut pada project .NET anda


/*social share*/ 
    body{
        font: 12px/24px arial;
    }
    .social-count .sos-share-box{
        float: left;
        width: 75px;
        margin: 5px 5px 10px 0; 
        cursor: pointer;
        background: #f7f7f7;
        line-height: 15px;
    }
    .sos-share-box .sos-name{
        font-size: 10px;
        font-weight: bold;
        padding: 5px;
        text-align: center;    
        border: 1px solid #f7f7f7;
    }
    .sos-share-box .sos-count{
        font-size: 10px; 
        padding: 5px;
        text-align: center;
        color: #fff;
    }
    .sos-share-box.sos-fb{
        color: #3B5998;
    }
    .sos-share-box.sos-tw{
        color: #2DAAE1;
    }
    .sos-share-box.sos-fb .sos-count{
        background: #3B5998;
        border: 1px solid #3B5998;
    }
    .sos-share-box.sos-tw .sos-count{
        background: #2DAAE1;
        border: 1px solid #2DAAE1;
    }
 
    .sos-share-box.sos-go{
        color: #F63E28;
    }
    .sos-share-box.sos-go .sos-count{
        background: #F63E28;
        border: 1px solid #F63E28;
    }
 
    .sos-share-box.sos-ln{
        color: #0073B2;
    }
    .sos-share-box.sos-ln .sos-count{
        background: #0073B2;
        border: 1px solid #0073B2;
    }


Selamat mencoba!!

 
Bagikan halaman ke sosial media
 
Tags :   .NET     MVC    .NET MVC       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda