ASP.Net MVC 4 and Social Networking Support (Facebook, Twitter etc) using Visual Studio 2012 IDE


In this article, we will learn how the ASP.Net MVC application is supporting the Social Networking websites like Facebook, Twitter, Bing etc. Here I will explain about the integration of the Social Networking sites in ASP.net MVC 4 application and their use as per the current industry requirements. I will use here Visual Studio 2012 IDE and ASP.Net MVC 4 for the implementation. I will show the login for these Social networking sites from our ASP.net MVC 4 application without adding any extra API's

ASP.Net MVC 4 and Social Networking Support (Facebook, Twitter etc.) using Visual Studio 2012 IDE



Now days if we see the latest websites where use need not to register to the website and directly access the contents by using their Social Websites credentials like we can use Facebook credential, Twitter credential, Google credentials to enter to the new websites.
While login with our Social website credentials, all the information related to our logic will be directly added to the new website so that next time onwards, we can directly enter our login credentials to the new website to access. All the details of our logic will be saved in the new website when we provide the access to get the details from our Social networking site.

It helps us in that way that we need not to fill our all details for the registration for the new website and all the details will be directly copied from the Social networking site to this new site.

Question: Why do we need to add Social Networking Login links to our websites?
Social Networking is very popular now a days and most of the people are having their accounts in the Social Networking sites. So if we provide this feature that they can just login from their already existing account (social networking sites account), it will be easy for them to login and we can get the details from those sites and save in to our site. The user doesn't need to fill the lengthy details as the registration form and then validate the emailed, phone number etc.
Steps to enable the Social Networking account in ASP.Net MVC 4 Application:
Step #1:Open Visual Studio 2012 IDE and go to File -> New -> Project, Choose ASP.Net MVC 4 Web Application. Provide the name as "MvcSocialNetworkingApp" and Press OK.
1
Step#2:Choose the ‘Internet Application' template from the template list. As we are using Razor engine for our view so make it default as Razor for the View Engine. Press OK
2
Step#3:The default solution with all the required folders and default files will be includes in the solution. Right click on the project and click on “Manage Nudget Packages…".Here Manage Nudget packages are the utility to add the extra components and features to our applications:
3
Step#4:A new window will open. Enter ‘ASP.Net Web Helpers Library' in the top right ‘Search Online' textbox and press Enter. After search, Scroll Down; we can see the links-
• ASP.Net Web Helpers Library
Install the library by clicking the install button. This library is used to get the helpers for the View contents.
4
Step#5: Installation is the series of steps which needs to be performed by the user by accept and next steps. Once the installation will complete, close the window.
Step #6: Right click on the Controllers folder ? Add ? Controller and Provide the name of the controller. E.g. SocialNetworkingController
• Here we need to choose the scaffolding option as- ‘Mvc Controller with Empty Read/Write actions'.
• Click on Add button
5
Step #7:Automatically all the actions(CRUD operations) for these operations will be generated.

Step #8:Remove the unnecessary actions which are not required and add out own Action methods.
Create an ActionResult with the name ‘TwitterDemo' as:
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcSocialNetworkingApp.Controllers
{
public class SocialNetworkingController : Controller
{
//
// GET: /SocialNetworking/

public ActionResult Index()
{
return View();
}

//
// GET: /SocialNetworking/TwitterDemo/
public ActionResult TwitterDemo()
{
return View();
}
}
}


Step#8: Go to the TwitterDemo action method of the controller and right click inside the action method and click on ‘Add View'. It will generate the empty ‘TwitterDemo' view.
6
Step#9:By clicking on the ‘Add' button will generate the View. Now add the below code in the view:
TwitterDemo.cshtml

@{
ViewBag.Title = "TwitterDemo";
}

Welcome to the Twitter Demo


@Twitter.TweetButton(dataCount: "vertical", shareText: "Tweet", tweetText: "Tweet Me", url: "", language: "en-US", userName: "pawansoftit");
@Twitter.Faves("pawansoftit", 100, 100, title: "Tweet", caption: "hello", backgroundShellColor: "yellow", shellColor: "blue", tweetsBackgroundColor: "grey", tweetsColor: "orange", tweetsLinksColor: "red", numberOfTweets: 10, scrollBar: true, loop: false, hashTags: true, timestamp: true, avatars: true, behavior: "default", interval: 6);
@Twitter.FollowButton("pawansoftit", followStyle: "follow_me", followColor: "a");
@Twitter.Search("Pawan Awasthi");

Helper will be populated to choose the methods and properties as below:
7
Step#10: Run the application and all the TwitterDemo action method for the SocialNetworking controller as:
8
Step#11: In the similar way, we can create the new action method for the Facebook and then write the code for the Facebook using the helpers as below:

//
// GET: /SocialNetworking/FecebookDemo/
public ActionResult FecebookDemo()
{
return View();
}


FacebookDemo.cshtml

@model MvcSocialNetworkingApp.Models.RegisterExternalLoginModel
@{
ViewBag.Title = "FecebookDemo";
}

Welcome to the Fecebook Demo




@Facebook.LikeButton("pawansoftit")Hello



Step#12: Run the application and call the controller and action method to check the Facebook demo.
Step#13: Now if we want that first the Login page should be shown automatically or only the authorize user should be logged in to the application then we need to make use of [Authorize] attribute with the controller action method as below:

// GET: /SocialNetworking/TwitterDemo/
[Authorize]
public ActionResult TwitterDemo()
{
return View();
}

//
// GET: /SocialNetworking/FecebookDemo/
[Authorize]
public ActionResult FecebookDemo()
{
return View();
}

Step#14: Run the application and try to call the FacebookDemo action method, it will show the login page as below:
9
Step#15:Nowhere the user can use their social networking accounts to login to my application and all the data will be retrieved from my social networking website. Click on Facebook and enter the user name and password of the Facebook and it will be used to login to your website.

Hope this article will make you to understand that how the ASP.Net MVC4 is integrated with the Social networking websites.


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: