Tuesday, October 11, 2016

Social Network Sharing using jQuery

I have already posted an article about sharing content in Facebook few weeks back. Here I am going to use free jQery plugin to achieve same objective.

The major reason for switching on to using a jQery plugin is because you need to have a Facebook application developed and that will need to be managed separately. This will become somewhat troublesome as some companies will not like to have Facebook account maintained for different reasons.

There are several jQery plugins available, here I am focusing on jsSocials Social Network Sharing Plugin. Integrating this plugin is really easy for either classic ASP.Net or ASP.Net MVC.

1. To configure the plugin follow the steps in start using page. I prefer use use of CDN instead of downloading the bunch of files.

When data binding the div tag that used to populate the social media icons you can use following technique to dynamically data bind.

  @{ var shareUrl = string.Format("{0}://{1}{2}/{3}/{4}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"),   "Job/Details", @item.field1);}

<div id="shareRoundIcons" data-url="@shareUrl" data-text="@item.field2"> </div>

If you are trying to do this in classic ASP.Net you might try this as follows

 <div id="shareRoundIcons" data-url="<%#Container.DataItem("field1")%>"

when it comes to configure the plugin in jQuery trying following trick will ensure that all divs are showing the social media icons (even if you are trying it on a grid or table this will work)

<script type="text/javascript" >
  $(function () {

$('[id^=shareRoundIcons]').each(function () {
                    url: $(this).data('url'),
                    text: $(this).data('text'),
                    showLabel: false,
                    showCount: false,
                   shares:  [ "facebook","twitter",  "linkedin"]

2.Some social media uses meta tags to grab the featured image used in sharing.  Make sure the page has og: tags specified.

<meta property="og:type" content="website">
<meta property="og:site_name" content="YOUR SITE NAME">
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="http://www.abc.com/Job/Details/">
<meta property="og:image" content="http://www.abc.com/Content/Styles/Logo.jpg" />

 More information can be found here.

3. Make sure you have included the Open Graph XML namespace extension to your HTML declaration.

<html xmlns="http://www.w3.org/1999/xhtml"

See the entire discussion in this stack overflow post.


Tuesday, September 20, 2016

Visual Studio enable Edit and continue

Visual Studio provides built-in support for editing code behind files at run time.  But I was surprised to realize that this actually works when the setting (which can be found in Tools -> Options -> Debugging -> Edit and Continue > Enable Edit and Continue )  is turned off (unchecked).


Friday, August 19, 2016

Asp.net Share page content in Facebook

Modern web pages includes sharing content in various social media networks so that your friends can see your pages of interest.

This can be achieved in using

1. Third party websites.
There are plenty of websites that provide sharing functionality by just copying some code to your site.
2. using Javascript
This involves creating an application in Facebook integrating some JavaScript to initialize the sharing dialog. Following article gives you a detailed description of the implementation.


Wednesday, August 10, 2016

keep page footer at the bottom

Page footer can be kept at the bottom of the page using CSS or jQuery. I prefer the jQuery solution over CSS as it is much simpler and cleaner.

Following code snippet will ensure that page footer is always kept at bottom of the page. This will also work even if the page has dynamic content added when the page is being rendered. Make sure the footer id is specified as footer.


  $(document).ready(function() {

   var docHeight = $(window).height();
   var footerHeight = $('#footer').height();
   var footerTop = $('#footer').position().top + footerHeight;

   if (footerTop < docHeight) {
    $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');


Tuesday, August 2, 2016

Jquery UI dialog remove blue halo around the close dialog button

Jquery UI Dialog tend to display a blue halo around the close dialog button as shown below.

This can be resolved by using the follwing css code snippet.

.ui-button:focus { 
     outline:none !important ;


Wednesday, July 27, 2016

asp.net controls for Mobile devices

When it comes to Mobile application development, one concern for developer is to choose the UI components to provide best user interaction.

There are plenty of such components to choose from and you can select any of them that best fits your requirement.

1. Telerik controls
2. jqueryUi controls
3. jQuery Mobile controls


Friday, July 22, 2016

Bootsrap file Input

Different browsers render the  HTML file upload control different ways. This can be resolved by replacing the file upload control with a cross-browser compatible control.

Even though there are plenty of controls to choose from, I personally like the Bootstrap file input control that can be integrated in simple steps into any project.