Custom Facebook, Twitter Share Functionality in ASP.Net

Step 1. First of all, let's create a new app on Facebook to get the app id and app secret and select a website.

add new app
                                                                           Image 1.

Now enter the app name and click the create button.

click create button
                                                                              Image 2.

You can choose the app category.

choose app category
                                                                           Image 3.

Here your app id and app secret are ready.

app secret ready
                                                                                 Image 4.

Copy the app id and app secret.

Step 2. Now let's make a Twitter app and generate an API key and secret. Open: Twitter App and click the Create New App button and fill in all the app details and click create.

click create
Image 5.

create app
                                                                          Image 6.

You can see the consumer key, callback URL and access level. Note down the consumer key.

consumer key
                                                                                 Image 7.

Here we are done with the app things. Now let's go to the project and implement the custom share functionality on Facebook and Twitter.

Step 3. Create an ASP.NET Web application using Visual Studioo. 

Add Facebook and Twitter keys generated in previous steps to the Web.config. You can add any name keys you like with your valies by copying the API keys and secret.

config
                                                      Image 8.
Now, add the following js code. 
  1. <div id="DetailDiv">  
  2.         </div>  
  3.   
  4.          <script src="Scripts/jquery-2.1.3.min.js"></script>         
  5.            
  6. <script type="text/javascript">  
  7.             $(document).ready(function () {  
  8.                 createHtml();  
  9.             });  
  10.   
  11.             //create html //  
  12.             function createHtml() {                  
  13.                 var title = "How to Authenticate and Get Data Using Instagram API";  
  14.                 var summary = "This article explains how to authenticate an Instagram API and how to get user photos, user details and popular photos using the Instagram API.";  
  15.                 var url = "https://www.facebook.com/raj2511984";  
  16.                 var image = 'https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/10153182_10153281334431040_8373343421018856197_n.jpg?oh=2f5cbcae8d125e72e0cbc6131c3634ea&oe=552C0BE0&__gda__=1429949942_5641254857be91dda7dd0653815ebf48';  
  17.                 var appid = '<%=ConfigurationManager.AppSettings["FacebookConsumerKey"].ToString() %>';  
  18.   
  19.                 //login pop height, width  
  20.                 var w = 600;  
  21.                 var h = 400;  
  22.                 var left = Number((screen.width / 2) - (w / 2));  
  23.                 var top = Number((screen.height / 2) - (h / 2));  
  24.                 //****//  
  25.   
  26.                 //facebook login window and pass paramemters like title, summary, url, image  
  27.                 var fb = '<a rel="nofollow"   title=\"Share this post on Facebook\" onclick="FbApp_Login(\'' + title + '\',\'' + summary + '\',\'' + url + '\',\'' + image + '\');"><img src="Images/fb.png" /></a>';  
  28.                 //****//  
  29.   
  30.                 //twitter login window and pass paramemters like title, url  
  31.                 var twitter = "<a  href=https://twitter.com/intent/tweet?original_referer=" + encodeURIComponent(url) + "&related=ModelQ-Job&text=" + encodeURIComponent(title) + "&tw_p=tweetbutton&url=" + encodeURIComponent(url) + "&via=_ModelQ title=\"Share this post on Twitter\" onclick=\"javascript:window.open(this.href,  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=" + w + ", height=" + h + ", top=" + top + ", left=" + left + "');return false;\"><img src='Images/twitter.png' /></a>";  
  32.                 //****//  
  33.   
  34.                 var socialMediaButtons = fb + "  " + twitter;  
  35.   
  36.                 //bind social variables into div  
  37.                 jQuery("#DetailDiv").append(' <div><table width="100%"><tr><td valign="top" style=" width:100px; height:100px;"><div>' + socialMediaButtons + '</div></td></tr></table> </div>');  
  38.                 //****//  
  39.             }  
  40.   
  41.               
  42. // Facebook login  
  43.             function FbApp_Login(title, sumary, url, image) {  
  44.                 FB.login(function (response) {  
  45.                     if (response.authResponse) {  
  46.                         statusChangeCallback(response, title, summary, url, image);  
  47.                     }  
  48.                 }, { scope: 'email,user_photos,publish_actions' });  
  49.             }  
  50.             window.fbAsyncInit = function () {  
  51.                 FB.init({  
  52.                     appId: '<%=ConfigurationManager.AppSettings["FacebookConsumerKey"].ToString() %>',  
  53.                     cookie: true,  // enable cookies to allow the server to access   
  54.                     xfbml: true,  // parse social plugins on this page  
  55.                     version: 'v2.0' // use version 2.0  
  56.                 });  
  57.   
  58.             };  
  59.   
  60.   
  61.   
  62.             // This is called with the results from from FB.getLoginStatus().  
  63.             function statusChangeCallback(response, title, summary, url, image) {  
  64.                 if (response.status === 'connected') {  
  65.                     // Logged into your app and Facebook.             
  66.                     FB.ui(  
  67.                       {  
  68.                           method: 'feed',  
  69.                           name: title,  
  70.                           link: url,  
  71.                           picture: image,  
  72.                           caption: title,  
  73.                           description: summary,  
  74.                           // source: url,  
  75.                           redirect_uri: url,  
  76.                       }  
  77.                 )  
  78.   
  79.                 }  
  80.             }  
  81.   
  82.   
  83.   
  84.   
  85.             // Load the SDK asynchronously  
  86.             (function (d, s, id) {  
  87.                 var js, fjs = d.getElementsByTagName(s)[0];  
  88.                 if (d.getElementById(id)) return;  
  89.                 js = d.createElement(s); js.id = id;  
  90.                 js.src = "//connect.facebook.net/en_US/sdk.js";  
  91.                 fjs.parentNode.insertBefore(js, fjs);  
  92.             }(document, 'script''facebook-jssdk'));  
  93.   
  94.         </script>  
Step 4. Build and run.
 
Time to run the application. You will get something like this.

application
                                                         Image 9.

Step 5. Test and verify
 
Click on the Facebook icon to connect.

Facebook icon to connect
                                                   Image 10.

facebook
                                                                     Image 11.

Click share. Now login to Facebook and check in my account.

facebook app
                                                      Image 12.

Now let's share on Twitter. Click on the Twitter share icon.

Click on twitter
                                                                     Image 13.

And fill in the email and password and click the Log in and Tweet buttons. Now we are logged into Twitter and can check the latest tweets.

Now logged in on twitter
                                                                           Image 14.

Conclusion

In this article, we learned how to share custom parameters on Facebook and on Twitter from local. For more details I have attached the sample application.

 


Similar Articles