RSS

Adding Social Buttons, Twitter, facebook, Google +1, to ASP .NET MVC

18 Nov

an easy way to add social buttons to your site is having a nice and portable ASP .NET MVC HTML Helper.
according to the documentation for Tweet button, facebook Like button, and Google +1 button, listed below is the code to create these social buttons and embed them into any site.

Required Scripts

include the following script into your _layout page.


$(function () {

    //Google +1
    $.getScript("http://apis.google.com/js/plusone.js", null, true);

    //Twitter
    $.getScript("http://platform.twitter.com/widgets.js", null, true);

    //Facebook
    $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1",  function(){
       
        $('body').append('<div id="fb-root"></div>'); 

        FB.init({ status: true, cookie: true, xfbml: true }); 
   
    }, true);
});

and the following is the HTML Helpers for each Social Button.

Tweet Button

    <Extension()>
    Function Social_Twitter(htmlHelper As HtmlHelper, title As String, Optional url As String = "") As MvcHtmlString
       
        Dim social_link As New TagBuilder("a")

        social_link.Attributes.Add("href", "https://twitter.com/share")
        social_link.Attributes.Add("class", "twitter-share-button")
        social_link.Attributes.Add("data-via", "MY-TWITTER-HANDLE")
        social_link.Attributes.Add("data-count", "horizontal")
        social_link.Attributes.Add("data-text", title)
        social_link.SetInnerText("Tweet")

        If Not String.IsNullOrEmpty(url) Then

            social_link.Attributes.Add("data-url", url)

        End If

        Return New MvcHtmlString(social_link.ToString(TagRenderMode.Normal))
    End Function

facebook Like


 <Extension()>
    Function Social_Facebook(htmlHelper As HtmlHelper, title As String, Optional url As String = "") As MvcHtmlString

        Dim str = New StringBuilder

        Dim social_link As New TagBuilder("div")
        social_link.Attributes.Add("class", "fb-like")
        social_link.Attributes.Add("data-send", "false")
        social_link.Attributes.Add("data-layout", "button_count")
        social_link.Attributes.Add("data-show-faces", "false")
        social_link.Attributes.Add("data-font", "arial")

        If Not String.IsNullOrEmpty(url) Then

            social_link.Attributes.Add("data-href", url)

        End If

        str.Append(social_link.ToString(TagRenderMode.Normal))

        Return New MvcHtmlString(str.ToString)
    End Function

Google +1 Button

<Extension()>
    Function Social_GooglePlusOne(htmlHelper As HtmlHelper, title As String, Optional url As String = "") As MvcHtmlString
       
        Dim social_link As New TagBuilder("div")

        social_link.Attributes.Add("class", "g-plusone")
        social_link.Attributes.Add("data-size", "medium")
        'social_link.Attributes.Add("data-size", "small")

        If Not String.IsNullOrEmpty(url) Then

            social_link.Attributes.Add("data-href", url)

        End If

        Return New MvcHtmlString(social_link.ToString(TagRenderMode.Normal))
    End Function

you can also combine them all, and generate them with one line using the following

All Social Buttons Helper

<Extension()>
    Function Social_AllButtons(htmlHelper As HtmlHelper, title As String, url As String) As MvcHtmlString
     
        Dim str = New StringBuilder

        Dim ul As New TagBuilder("ul")
        ul.AddCssClass("social")

        'Google
        Dim li3 As New TagBuilder("li")
        li3.InnerHtml = htmlHelper.Social_GooglePlusOne(title, url).ToHtmlString
        li3.AddCssClass("social-google")
        ul.InnerHtml += li3.ToString

        'Twitter
        Dim li2 As New TagBuilder("li")
        li2.InnerHtml = htmlHelper.Social_Twitter(title, url).ToHtmlString
        li2.AddCssClass("social-twitter")
        ul.InnerHtml += li2.ToString

        'facebook
        Dim li1 As New TagBuilder("li")
        li1.InnerHtml = htmlHelper.Social_Facebook(title, url).ToHtmlString
        li1.AddCssClass("social-facebook")
        ul.InnerHtml += li1.ToString
        str.Append(ul.ToString(TagRenderMode.Normal))

        Return New MvcHtmlString(str.ToString)
    End Function

now you can embed social buttons into any page, and if you do not set the URL, they get the current page URL by default.

you can also expand on these methods to add the required JavaScript source to run these buttons from their respective owners if it’s not included in the page, this way; you can really separate all the dependencies into a totally portable utilities library.

Advertisements
 
6 Comments

Posted by on 18, Nov 2011 in .NET, ASP.NET, MVC, VB.NET

 

6 responses to “Adding Social Buttons, Twitter, facebook, Google +1, to ASP .NET MVC

  1. Tung Nguyen

    10, Feb 2012 at 5:53 am

    Very good, Thank you so much.
    I’m newbie, Can you share example code for me: “tunglam@live.com” ?

     
  2. Smithangshu Ghosh (@anshu89)

    7, Mar 2012 at 4:15 am

    Nice one

     
  3. sagar

    12, Mar 2012 at 10:40 pm

    good

     
  4. منتديات

    27, Mar 2012 at 7:42 am

    Thank you very much

     
  5. Raj

    12, Jun 2012 at 5:29 pm

    Nice Post……………………………

     
  6. sujith

    27, Nov 2012 at 11:56 am

    To get google +1 count of a website in c#.net

     

add your comment

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

 
%d bloggers like this: