MVC package for Facebook, Twitter, LinkedIn buttons

Few years ago I developed a utility library to create FaceBook and Twitter share buttons for ASP.Net applications. As I migrated this site from ASP.Net to MVC, I decided to write similar utility library to publish social media plugin buttons for MVC.

NuGet Package

NuGet package for this library can be downloaded from following page on nuget.org

Social Media Plugins 1.0.0 NuGet Package

This package is built using .Net4.5.1 framework. But there is nothing specific to that framework. Feel free to ask me for the source code and then you can recompile it for lower .Net framework as well.

Usage

Following code snippet shows how this library is being used on this site itself.

@using Commerce.Social
@{
    var fbButtonSettings = new FaceBookLikeButtonSettings()
    {
        Layout = FaceBookLikeButtonLayout.Button,
        IncludeShareButton = true,
        PluginType = FaceBookPluginType.Xfbml
    };
    var linkedInButtonSettings = new LinkedInShareButtonSettings()
    {
        DisplayCount = false
    };
    var twitterButtonSettings = new TwitterShareButtonSettings()
    {
        DisplayCount = false,
        AccountVia = "ByteBlocks"
    };
}
<ul class="list-unstyled list-inline blog-info">
 <li style="vertical-align: top;">@Html.TwitterShareButton(Request.Url.AbsoluteUri, twitterButtonSettings)</li>
 <li style="vertical-align: top;">@Html.LinkedInShareButton(Request.Url.AbsoluteUri, linkedInButtonSettings)</li>
 <li style="vertical-align: top;">@Html.FaceBookLikeButton(Request.Url.AbsoluteUri, fbButtonSettings)</li>
</ul>

As you can see that the usage is very simple. Method for each social media button requires you to pass settings for each button type. These settings control how button is displayed. Properties of each setting type are self explanatory.

Prerequisite

Each social media plugin requires that certain javascript code to be included on the pages. The library does not renders script tags for those plugins. You can get latest information about each plugin from their respective social media sites.

Twitter

Copy following code preferably near top of the page.

<script>!function (d, s, id)
{
    var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
        js = d.createElement(s); js.id = id;
        js.src = p + '://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);
    }
}(document, 'script', 'twitter-wjs');</script>

LinedIn

Add following javascript include on your page.

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>

Facebook

Add following code on your page. You will have to modify this code to add appId value specific to your site or application.

<div id="fb-root"></div>
<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxxxxx";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
comments powered by Disqus

Blog Tags