Post
Ask Question

Sharing .NET Page On Social Media

Introduction

If some business person or user wants to share their business related or any kind of information in social media, I will explain, below, the implementation of this in MVC Application .

Thus, the steps are given below to create a simple Application to explain page sharing to Facebook, Linkedin and other social media.

Step 1

Create MVC Application. Select MVC 4, as mentioned in the image, given below.

Introduction

Step 2

Select Internet Application.

Introduction

Step 3

In the Application, create new Default controller and create two action names, which are given below.

  1. Index
  2. Business profile.

Index action is used to display the page to share and Business profile action will be used to display the content on the social network.

Introduction

  1. public class DefaultController: Controller {  
  2.     //   
  3.     // GET: /Default/   
  4.     public ActionResult Index() {  
  5.         return View();  
  6.     }  
  7.     public ActionResult BusinessProfile() {  
  8.         return View();  
  9.     }  
  10. }  
Step 4

Create Index view.

I have taken an example of a business user, who wants to share his or her  business related information.
  1. <div class="row">  
  2.     <div>  
  3.         <div class=" col-md-3 col-sm-3">  
  4.             <p style="text-align: center;"><strong>BusinessName</strong></p>  
  5.             <p style="text-align: center;"> <strong>BusinessAddress<br />   
  6. BusinessPhone</strong> </p> <br>  
  7.             <div style="text-align: center;"> <strong>Rate This Business</strong><br> <img width="27" height="25" src="/Images/y-star-small.png"> <img width="27" height="25" src="/Images/y-star-small.png"> <img width="27" height="25" src="/Images/y-star-small.png"> <img width="27" height="25" src="/Images/y-star-small.png">  
  8.                 <p><strong>100 Reviews</strong></p>  
  9.                 <p><strong>Business description</strong></p>  
  10.                 <p><strong>BusinessDescription</strong></p>  
  11.                 <div style="margin-top: 10px;">  
  12.                     <p><strong>Share us on:</strong></p>  
  13.                     <p> @*facebook sharing*@  
  14.                         <a href="javascript:void(o)" onclick="window.open('http://www.facebook.com/sharer/sharer.php?u=@HttpContext.Current.Request.Url.AbsoluteUri.Replace(HttpContext.Current.Request.Url.PathAndQuery, " / ")@Request.RawUrl.ToString().Split('/')[1]/BusinessProfile','facebook-share-dialog','toolbar=0,status=0,width=600,height=600');"> <img src="@Url.Content(" ~/Images/face.png ")" id="imgfb" alt="" /></a> @*twitter sharing*@  
  15.                         <a href="http://twitter.com/[email protected](HttpContext.Current.Request.Url.PathAndQuery, " / ")@Request.RawUrl.ToString().Split('/')[1]/BusinessProfile" onclick="javascript:window.open(this.href,'sharer','toolbar=0,status=0,width=548,height=400');return false;" rel="nofollow"> <img src="@Url.Content(" ~/Images/twitt.png ")" id="imgtw" alt="" /></a>  
  16.                         <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> @*LinkedIn sharing*@  
  17.                         <a href="http://www.linkedin.com/shareArticle?mini=true&[email protected](HttpContext.Current.Request.Url.PathAndQuery, " / ")@Request.RawUrl.ToString().Split('/')[1]/BusinessProfile" onclick="javascript:window.open(this.href,'sharer','toolbar=0,status=0,width=548,height=400');return false;" rel="nofollow"> <img alt="Linkedin" src="@Url.Content(" ~/Images/linkdin.png ")" id="imgln"></a> @*GooglePlus sharing*@  
  18.                         <a href="https://plus.google.com/[email protected](HttpContext.Current.Request.Url.PathAndQuery, " / ")@Request.RawUrl.ToString().Split('/')[1]/BusinessProfile" onclick="javascript:window.open(this.href,'sharer','toolbar=0,status=0,width=548,height=400');return false;" rel="nofollow"> <img alt="GooglePlus" src="@Url.Content(" ~/Images/google-plus.png ")" id="imggoogle"></a>  
  19.                     </p>  
  20.                 </div>  
  21.             </div>  
  22.         </div>  
  23.     </div>  
  24. </div>  
In the code, given above, the section given below is the main section, which will display the share button for each social media network-
  1. p><strong>Share us on:</strong></p>  
  2. <p> @*facebook sharing*@  
  3.     <a href="javascript:void(o)" onclick="window.open('http://www.facebook.com/sharer/sharer.php?u=@HttpContext.Current.Request.Url.AbsoluteUri.Replace(HttpContext.Current.Request.Url.PathAndQuery, " / ")@Request.RawUrl.ToString().Split('/')[1]/BusinessProfile','facebook-share-dialog','toolbar=0,status=0,width=600,height=600');"> <img src="@Url.Content(" ~/Images/face.png ")" id="imgfb" alt="" /></a> @*twitter sharing*@  
  4.     <a href="http://twitter.com/[email protected](HttpContext.Current.Request.Url.PathAndQuery, " / ")@Request.RawUrl.ToString().Split('/')[1]/BusinessProfile" onclick="javascript:window.open(this.href,'sharer','toolbar=0,status=0,width=548,height=400');return false;" rel="nofollow"> <img src="@Url.Content(" ~/Images/twitt.png ")" id="imgtw" alt="" /></a>  
  5.     <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> @*LinkedIn sharing*@  
  6.     <a href="http://www.linkedin.com/shareArticle?mini=true&[email protected](HttpContext.Current.Request.Url.PathAndQuery, " / ")@Request.RawUrl.ToString().Split('/')[1]/BusinessProfile" onclick="javascript:window.open(this.href,'sharer','toolbar=0,status=0,width=548,height=400');return false;" rel="nofollow"> <img alt="Linkedin" src="@Url.Content(" ~/Images/linkdin.png ")" id="imgln"></a> @*GooglePlus sharing*@  
  7.     <a href="https://plus.google.com/[email protected](HttpContext.Current.Request.Url.PathAndQuery, " / ")@Request.RawUrl.ToString().Split('/')[1]/BusinessProfile" onclick="javascript:window.open(this.href,'sharer','toolbar=0,status=0,width=548,height=400');return false;" rel="nofollow"> <img alt="GooglePlus" src="@Url.Content(" ~/Images/google-plus.png ")" id="imggoogle"></a>  
  8. </p>  
The URL, given below is common in all social media types.

@HttpContext.Current.Request.Url.AbsoluteUri.Replace(HttpContext.Current.Request.Url.PathAndQuery, "/")@Request.RawUrl.ToString().Split('/')[1]/BusinessProfile. This will create a URL to display the BusinessProfile view.

Step 5 

Create a view for BusinessProfile. This is the page, which will be shared to the social media.

Here, Meta tag will display the content information on the social media.
  1. @ {  
  2.     Layout = null;  
  3. } < !DOCTYPE html > < html lang = "en" > < head > < meta property = "og:title"  
  4. content = "BusinessName" / > < meta property = "og:description"  
  5. content = "BusinessDescription" / > < meta property = "og:image"  
  6. content = "LogoImagePath" / > < meta name = "twitter:title"  
  7. content = "BusinessName" / > < meta name = "twitter:description"  
  8. content = "BusinessDescription" / > < meta name = "twitter:card"  
  9. content = "summary_large_image" > < meta name = "twitter:site"  
  10. content = "Demo" > < meta name = "twitter:title"  
  11. content = "BusinessName" > < meta name = "twitter:description"  
  12. content = "BusinessDescription" > < meta name = "twitter:creator"  
  13. content = "noopur" > < meta name = "twitter:image:src"  
  14. content = "LogoImagePath" > < meta name = "twitter:domain"  
  15. content = "YourDomain.com" > < meta charset = "utf-8" > < meta http - equiv = "X-UA-Compatible"  
  16. content = "IE=edge" > < meta name = "viewport"  
  17. content = "width=device-width, initial-scale=1" > < link href = "@Url.Content("~/Content/css / bootstrap.min.css ")"  
  18. rel = "stylesheet" > < link href = "@Url.Content("~/Content/css / layout.css ")"  
  19. rel = "stylesheet"  
  20. type = "text/css" / > < link href = "@Url.Content("~/Content/css / menu - responsive.css ")"  
  21. rel = "stylesheet"  
  22. type = "text/css" / > < /head>  < body class = "backGround" > < div class = "row" > < div > < div class = " col-md-3 col-sm-3" > < p style = "text-align: center;" > < strong > BusinessName < /strong></p > < p style = "text-align: center;" > < strong > BusinessAddress < br / > BusinessPhone < /strong>  < /p><br>  < div style = "text-align: center;" > < strong > Rate This Business < /strong><br>  < img width = "27"  
  23. height = "25"  
  24. src = "/Images/y-star-small.png" > < img width = "27"  
  25. height = "25"  
  26. src = "/Images/y-star-small.png" > < img width = "27"  
  27. height = "25"  
  28. src = "/Images/y-star-small.png" > < img width = "27"  
  29. height = "25"  
  30. src = "/Images/y-star-small.png" > < p > < strong > 100 Reviews < /strong></p > < p > < strong > Business description < /strong></p > < p > < strong > BusinessDescription < /strong></p > < /div>  < /div>  < /div>  < /div>  < /body>  < /html>  
Step 6 

Add a link at _Layout.cshtml page.



Step 7 

Run the Application and click on the shareInformation link.

It will call the Index action of Default controller and will display the index view, as shown below.

cshtml

Right click on the icon. You can see the URL created at icons is url=http://localhost:58674/Default/BusinessProfile,

Kindly find the screenshot, given below and it will show the URL for each icon.



Once the Application is published, this URL will create with the domain name. Once you click on this URL, it will call BusinessProfile action within Default controller and will display BusinessProfile view.

Step 8

Click on any social media icon, like click on Linkedin and it will display the screen, given below.

Now, click on share to share the page on Linkedin.



Step 9 

On Linkedin, it will display the screenshot, as shown below. Once the Application will publish, it will display complete information with BusinessProfile view.



Step 10 

Click on localhost. It will display the screen, given below, which is BusinessProfile view.


Thanks for reading.