.NET

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.
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs