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

An easy way to add social buttons to your site is to have 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.

 Collapse | Copy Code

$(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 are the HTML Helpers for each social button.

Tweet Button

 Collapse | Copy Code

<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

 Collapse | Copy Code

<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

 Collapse | Copy Code

<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 code.

All Social Buttons Helper

 Collapse | Copy Code

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)