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.


                                                                           Image 1.

Now enter the app name and click the create button.


                                                                              Image 2.

You can choose the app category.


                                                                           Image 3.

Here your app id and app secret are 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.


Image 5.


                                                                          Image 6.

You can see the consumer key, callback URL and access level. Note down the 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.


                                                      Image 8.

Now, add the following js code. 

<div id="DetailDiv">
        </div>

         <script src="Scripts/jquery-2.1.3.min.js"></script>

<script type="text/javascript">
            $(document).ready(function () {
                createHtml();
            });

            //create html //
            function createHtml() {
                var title = "How to Authenticate and Get Data Using Instagram API";
                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.";
                var url = "https://www.facebook.com/raj2511984";
                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';
                var appid = '<%=ConfigurationManager.AppSettings["FacebookConsumerKey"].ToString() %>';

                //login pop height, width
                var w = 600;
                var h = 400;
                var left = Number((screen.width / 2) - (w / 2));
                var top = Number((screen.height / 2) - (h / 2));
                //****//

                //facebook login window and pass paramemters like title, summary, url, image
                var fb = '<a rel="nofollow"   title=\"Share this post on Facebook\" onclick="FbApp_Login(\'' + title + '\',\'' + summary + '\',\'' + url + '\',\'' + image + '\');"><img src="Images/fb.png" /></a>';
                //****//

                //twitter login window and pass paramemters like title, url
                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>";
                //****//

                var socialMediaButtons = fb + "  " + twitter;

                //bind social variables into div
                jQuery("#DetailDiv").append(' <div><table width="100%"><tr><td valign="top" style=" width:100px; height:100px;"><div>' + socialMediaButtons + '</div></td></tr></table> </div>');
                //****//
            }


// Facebook login
            function FbApp_Login(title, sumary, url, image) {
                FB.login(function (response) {
                    if (response.authResponse) {
                        statusChangeCallback(response, title, summary, url, image);
                    }
                }, { scope: 'email,user_photos,publish_actions' });
            }
            window.fbAsyncInit = function () {
                FB.init({
                    appId: '<%=ConfigurationManager.AppSettings["FacebookConsumerKey"].ToString() %>',
                    cookie: true,  // enable cookies to allow the server to access
                    xfbml: true,  // parse social plugins on this page
                    version: 'v2.0' // use version 2.0
                });

            };



            // This is called with the results from from FB.getLoginStatus().
            function statusChangeCallback(response, title, summary, url, image) {
                if (response.status === 'connected') {
                    // Logged into your app and Facebook.
                    FB.ui(
                      {
                          method: 'feed',
                          name: title,
                          link: url,
                          picture: image,
                          caption: title,
                          description: summary,
                          // source: url,
                          redirect_uri: url,
                      }
                )

                }
            }




            // Load the SDK asynchronously
            (function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/sdk.js";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

        </script>

Step 4. Build and run.

 

Time to run the application. You will get something like this.

                                                         Image 9.

Step 5. Test and verify

 

Click on the Facebook icon to connect.

                                                   Image 10.


                                                                     Image 11.

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


                                                      Image 12.

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


                                                                     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.


                                                                           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.