Introduction
This article explains how to open a Twitter Share Window in a a popup in an ASP.NET application.
Nearly everyone of us accesses Twitter daily and shares something on it, we can provide a sharing feature on our Website that also does not allow the user to leave our website, this can be done by letting the user share something using the popup window. Here I will create a simple application where I will show how you can share something on Twitter using a popup window.
Step 1
First of all create a new web application. In this application create a Div and use an anchor that will help us to redirect.
<form id="form1" runat="server">
<div id="tweetButton">
<a id="popup" href="http://twitter.com/share">Tweet</a>
</div>
</form>
As I said here, I took a Div and an anchor whose href is set to "http://twitter.com/share".
Now at this time if you run the application then an output like this will be seen:
![Twitter Share in popup]()
If you click on this link then a Twitter page will be opened in the same window but not in a popup, so the user will leave your website and be redirected to Twitter.
![Twitter Share in popup]()
Step 2
Now to open this Twitter window in a popup without letting the user leave the current page.
This functionality can be done by using jQuery, so write this code in the script tag:
<script>
$('#popup').click(function (event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});
</script>
Here I created a click function using the Id of anchor, I had defined the height, width and position of the window in which the new URL needs to be opened.
You need to apply this function to the body section because I had not applied the ready function at the start of it, if you don't want to apply it in the body section and want to apply it in the head section then you need to first use the ready function at the start of it otherwise it will not work.
Now if we run the application then an output like this will be seen:
![Twitter Share in popup]()
As I click on the link a popup window is opened in which Twitter is avilable.
But still our link button is not so impressive and looks like a normal link, it should like a Twitter button.
Step 3
For making the normal link a Twitter Link add this style:
<style type="text/css" media="screen">
#tweetButton a {
display: block;
padding: 2px 5px 2px 20px;
background: url('https://twitter.com/favicons/favicon.ico') 1px center no-repeat;
border: 1px solid #ccc;
}
</style>
This CSS will create a Twitter Button.
Now on running the application an output like this can be seen:
![Twitter Share in popup]()
On clicking this link a popup will be opened in which Twitter will be available:
![Twitter Share in popup]()
The complete code of this application is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.9.1.js"></script>
<style type="text/css" media="screen">
#tweetButton a {
display: block;
padding: 2px 5px 2px 20px;
background: url('https://twitter.com/favicons/favicon.ico') 1px center no-repeat;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="tweetButton">
<a id="popup" href="http://twitter.com/share">Tweet</a>
<script>
$('#popup').click(function (event) {
debugger;
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});
</script>
</div>
</form>
</body>
</html>