JSFiddle - React, Tailwind, and code Playground
Tweet to Download - Adapted from Tutorialzine.
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>
<div id="container">
<h1>Tweet to Download</h1>
<p>The button below is hidden until after you tweet. <a href="#" id="tweetLink">Try it.</a></p>
<a href="#" class="button"></a>
<p>Adapted from <a href="http://tutorialzine.com/2011/05/tweet-to-download-jquery/">Tutorialzine</a> | <a href="http://jenniferperrin.com/blog/jquery-twitter-tweet-to-download-button/">Read Tutorial</a></p>
</div>
CSS
/*-------------------------
General Styles
--------------------------*/
body {
font-family: 'Yanone Kaffeesatz';
color: #efefef;
margin: 20px;
background: #2a2a2a url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
}
p { margin:10px 0; font-size: 18px; }
h1 {
display: block;
margin: 0 0 20px 0;
font-size: 60px;
font-family: 'Yanone Kaffeesatz';
color: rgba(255,255,255,0.2);
}
h1:hover { color: rgba(255,255,255,0.3); }
a {
border-bottom: 1px dotted #5a7cb1;
color: #f27011;
padding: 0 1px;
text-decoration: none;
}
a:hover {
background-color: rgba(255,255,255,0.2);
border-bottom: 1px dotted #444;
color: #5a7cb1;
}
/*----------------------------
Main container
-----------------------------*/
#container {
width:450px;
padding:10px;
text-align:center;
margin:0 auto;
position:relative;
display:block;
}
/*----------------------------
Download Button
-----------------------------*/
.button {
background-color: #222;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: -moz-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: -ms-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: -o-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
background-image: linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
border: 1px solid #111;
color: #c6c6c6;
cursor: default;
display: inline-block;
font: 18px/12px 'Yanone Kaffeesatz';
margin: 20px;
padding: 10px 15px;
position: relative;
text-decoration: none;
text-shadow: 0 -1px 1px hsla(0,0%,0%,.8);
vertical-align: top;
opacity: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
inset 0 1px 0 hsla(0,0%,100%,.2);
...
JavaScript
(function($) {
var win = null;
$.fn.tweetAction = function(options, callback) {
// Default parameters of the tweet popup:
options = $.extend({
url: window.location.href
}, options);
return this.click(function(e) {
if (win) {
// If a popup window is already shown, do nothing;
e.preventDefault();
return;
}
var width = 550,
height = 350,
top = (window.screen.height - height) / 2,
left = (window.screen.width - width) / 2;
var config = [
'scrollbars=yes', 'resizable=yes', 'toolbar=no', 'location=yes',
'width=' + width, 'height=' + height, 'left=' + left, 'top=' + top
].join(',');
// Opening a popup window pointing to the twitter intent API:
win = window.open('http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fekagriyakarya&width&height=62&colorscheme=light&show_faces=false&header=false&stream=false&show_border=false' + $.param(options), 'TweetWindow', config);
// Checking whether the window is closed every 100 milliseconds.
(function checkWindow() {
try {
// Opera raises a security exception, so we need to put this code in a try/catch:
if (!win || win.closed) {
throw "Closed!";
} else {
setTimeout(checkWindow, 100);
}
}
catch (e) {
// Executing the callback, passed as an argument to the plugin.
win = null;
callback();
}
})();
e.preventDefault();
});
};
})(jQuery);
// Show the Download Button once they Tweet
function showBtn() {
...