Custom Facebook, Twitter Share Functionality in ASP.Net

Raj Kumar

Custom FacebookFunctionality in ASP.NETTwitter share

14 Comments

Join the conversation! Your thoughts help the community grow.

Imran Husain5y ago
Facebook button is not working same like as twitter
suresh babu8y ago
Hai Raj Kumar, i have a textbox and button . fill the textbox then click on buton it will be post in who loged in facebook wall. please share the code. thanking you
Manav Pandya10y ago
Raj Kumar Thanks sir ...
Raj Kumar10y ago
Provide localhost url. That will work.
Manav Pandya10y ago
In Twitter app form , what should i specify at "URL" textbox because i want to use with local asp.net application
Manav Pandya10y ago
Nice share ..
Anu V10y ago
Nice
Sarvesh Tiwari10y ago
How to share customized image using google plus and twitter in asp.net
Haris Bilal11y ago
Raj can you help me in doing the same thing for linkedin.
Ammar Ahmed11y ago
If you want to embed this Url in your html file you have to add like this it's working fine<li class="facebook-bg"><a id="fbAnchor" onclick="FbApp_Login('@title','@completeSrcUrl','@image');"></a></li>
Botlhale Jonathan Matlou11y ago
How can I change this line( var fb = '<a rel="nofollow" title=\"Share this post on Facebook\" onclick="FbApp_Login(\'' + title + '\',\'' + url + '\',\'' + image + '\');"><img src="Images/fb.png" height="50px" /></a>'; ) to have like button_count rather than share button
Rahul Kumar Saxena11y ago
Congrts Sir... Article Is selected in Community Spotlight on Microsoft ASP.NET Site.......
Arweb Aroshanzamir11y ago
Nice one..thanks sir..
K P Singh Chundawat11y ago
great ..

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.