Facebook share and like with javascript callback

1. Like button,

Here is the html of what url in the “like” box,

<div class="fb-like-box"></div>

You have to create a facebook application, and assign the “appId” in the fbAsyncInit method,

    window.fbAsyncInit = function () {
        FB.init({
            appId: '#Replace Your AppID#',
            status: true,
            cookie: true,
            xfbml: true,
            oauth: true
        });
        FB.Event.subscribe('edge.create', function (response) {
            alert('You liked the URL: ' + response);
        });
    };
    (function (d) {
        var js, id = 'facebook-jssdk';
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement('script');
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));

With the FB.event.subscribe callback method, you can put some of your stuff, like award the guy who liked your site =)

2. Share button

This is calling FB.init(), then FB.ui() to load the dialog and with callback, the callback response, you can retrieve the post_id for your tracking.

window.fbAsyncInit = function () {
        FB.init({
            appId: '#Replace Your AppID#',
            status: true,
            cookie: true,
            xfbml: true,
            oauth: true
        });

        FB.ui(
        {
            method: 'feed',
            name: 'Facebook Dialogs',
            link: 'http://youtubeplaylist.net',
            picture: 'http://fbrell.com/f8.jpg',
            caption: 'Reference Documentation',
            description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
        },
            function (response) {
                if (response && response.post_id) {
                    alert('Post was published.');
                } else {
                    alert('Post was not published.');
                }
            }
        );

    };
    (function (d) {
        var js, id = 'facebook-jssdk';
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement('script');
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));

twitter bootstrap modal popup, customized size and centralized location.

When I try to make bootstrap modal wider than the default. It is not centralized anymore, here we need to modify the css to adjust the left margin to the right px. Here is a block of handy code to adjust the modal width by a certain percentage of document width and adjust the left margin to centralize the modal as well.

$('#mymodal').modal({
        backdrop: true,
        keyboard: true
    }).css({
       'width': function () { 
           return ($(document).width() * .9) + 'px';  
       },
       'margin-left': function () { 
           return -($(this).width() / 2); 
       }
});

My problem with SimpleMembership, MVC4 and AuthorizeAttribute and Roles

I have created an internet application using the MVC4 template with SimpleMembership.

It comes with a “InitializeSimpleMembershipAttribute” which initialize (create) the database if it is not exist. The InitializeSimpleMembershipAttribute attribute is added to the account controller.

Now if I put [Authorize] or [Authroize(Users=”administrator”)] in action method. When I direct to the URL, it gives me an error:

Server Error in ‘/’ Application.

A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 26 – Error Locating Server/Instance Specified)

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

SQLExpress database file auto-creation error:

The connection string specifies a local Sql Server Express instance using a database location within the application’s App_Data directory. The provider attempted to automatically create the application services database because the provider determined that the database does not exist. The following configuration requirements are necessary to successfully check for existence of the application services database and automatically create the application services database:

I spent quite a bit of time figuring out this. What I did is, putting the line “WebSecurity.InitializeDatabaseConnection” to the Global.asax file. That ensures the database connection is initialized as early as possible.

WebSecurity.InitializeDatabaseConnection("DefaultConnection", "UserProfile", "UserId", "UserName", autoCreateTables: true);

Then I move the filter from AccountController to the FilterConfig.cs file. So when the filters are registered, it calls the InitializeSimpleMembershipAttribute as well.

filters.Add(new InitializeSimpleMembershipAttribute());

I hope this may help people who is having the same problem.

ajax request only action filter, MVC

I created a handy ajax request filter, that you can apply to your ajax action method call.

    public class AjaxRequestAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            if(!filterContext.HttpContext.Request.IsAjaxRequest())
                	//do something
        }

        public override void OnActionExecuted(ActionExecutedContext filterContext)
        {

        }
    }
    [AjaxRequest]
    public ActionResult AjaxActionMethod()
    {
        		//to do
    }

CSS media queries not working with IE7, IE8

I have worked with media queries on a project for a while and notice that it is not actually working well in IE 7 or IE 8.

Here is a simple sample of the media query I have.

@import url("desktop.css") screen;
@import url("ipad.css") only screen and (device-width:768px);

To make sure things working alright in those browsers, you will need a separate css file for those two. And a detection of “if it is less than IE9”, use the “style-ie.css”



<link rel="stylsheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

LabelFor html helper with htmlAttributes, MVC 3

The default LabelFor() html helper only comes with two overloads.

Html.LabelFor(Expression expression)

Html.LabelFor(Expression expression, string labelText)

Here is the extension came handy when you want to apply style sheet classes to the label.

public static class LabelForExtensions
    {
        
        public static MvcHtmlString LabelFor(this HtmlHelper html, Expression<Func> expression, object htmlAttributes)
        {
            return LabelFor(html, expression, new RouteValueDictionary(htmlAttributes));
        }
        public static MvcHtmlString LabelFor(this HtmlHelper html, Expression<Func> expression, IDictionary htmlAttributes)
        {
            ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
            string htmlFieldName = ExpressionHelper.GetExpressionText(expression);
            string labelText = metadata.DisplayName ?? metadata.PropertyName ?? htmlFieldName.Split('.').Last();
            if (String.IsNullOrEmpty(labelText))
            {
                return MvcHtmlString.Empty;
            }

            TagBuilder tag = new TagBuilder("label");
            tag.MergeAttributes(htmlAttributes);
            tag.Attributes.Add("for", html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName));
            tag.SetInnerText(labelText);
            return MvcHtmlString.Create(tag.ToString(TagRenderMode.Normal));
        }

    }

Call it in the view by using the following line of code.

@Html.LabelFor(a => a.Name, new { @class="field-label",title="Enter Username"})

The output is,

Username