Click here to Skip to main content
Click here to Skip to main content

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

, 4 Dec 2011
Rate this:
Please Sign up or sign in to vote.
An easy way to add social buttons to your MVC site.

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.

$(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

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

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.

License

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

About the Author

Buaziz
Software Developer (Senior) KUFPEC
Kuwait Kuwait
No Biography provided
Follow on   Twitter   Google+

Comments and Discussions

 
Questionsource code? Pinmembersamthec7-Mar-13 11:19 
QuestionGoogle plus one can not work Pinmembertuanhoaitan23-Mar-12 17:34 
AnswerRe: Google plus one can not work PinmemberBuaziz23-Mar-12 21:33 
GeneralMy vote of 5 PinmemberMonjurul Habib6-Dec-11 6:25 
GeneralMy vote of 5 Pinmembersupriya chaladi5-Dec-11 20:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 5 Dec 2011
Article Copyright 2011 by Buaziz
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid