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>
  4. <script src="Scripts/jquery-2.1.3.min.js"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function () {
  8. createHtml();
  9. });
  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() %>';
  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. //****//
  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. //****//
  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. //****//
  34. var socialMediaButtons = fb + " " + twitter;
  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. }
  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. });
  58. };
  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. )
  79. }
  80. }
  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'));
  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.