Skip to content

Instantly share code, notes, and snippets.

@maly

maly/demo.html

Created September 3, 2013 12:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maly/6423133 to your computer and use it in GitHub Desktop.
Save maly/6423133 to your computer and use it in GitHub Desktop.
Download ZIP
"Tweetable" tag pro články
Raw
demo.html
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<link href="tweetable.css" rel="stylesheet">
</head>
<body>
<p>Blabla bla <tweetable>tohle bude text tweetu</tweetable> bla bla</p>
<p>Blabla bla <tweetable title="tohle bude text tweetu">bla bla bla</tweetable></tweetable> bla bla</p>
</body>
<script src="tweetable.js"></script>
</html>
Raw
tweetable.css
.tweetable {position: relative;}
.tweetable a { text-decoration: none; border-bottom: 0px dotted #4099ff; color: #333; background: whitesmoke; }
.tweetable a:hover { text-decoration: none; border-bottom: 0px dotted #4099ff; color: #4099ff;}
.tweetable .icon-twitter {color:#4099ff;}
.sharebuttons {display: none; position: absolute; top: -30px; left: 0px; z-index: 101; width: 100px; background: #4099ff; color: whitesmoke; border-radius: 3px; height: 20px; padding: 5px; text-align: center; font-family: 'helvetica neue', helvetica, arial, sans-serif; font-size: 14px; font-weight: bold; }
.sharebuttons a { color: whitesmoke; background: #4099ff; border: 0; }
.sharebuttons a:hover { color: whitesmoke; background: #4099ff; border: 0; }
.sharebuttons span.brand a {font-size: 10px; color: whitesmoke; text-decoration:none; display: block; padding: 0 0 0 25px; margin: 0; border: none; height: 12px; }
Raw
tweetable.js
$(document).ready(function(){
$("tweetable").replaceWith(function() {
var content = $(this).html();
var tweetContent = content;
var alt = $(this).attr("title");
if (alt) {tweetContent = alt;}
var hash = $(this).attr("data-hash");
if (hash) {tweetContent += " #"+hash;}
var out = "<span class=tweetable>";
var permalink = document.location.href;
out += "<a href='https://twitter.com/intent/tweet?original_referer="+encodeURIComponent(permalink)+"&source=tweetbutton&text="+
encodeURIComponent((tweetContent))+"&url="+encodeURIComponent(permalink)+"'>"+content+"&thinsp;<i class='icon-twitter'></i>";
out += "</a>";
out += "<span class='sharebuttons'>";
out += "<a href='https://twitter.com/intent/tweet?original_referer="+encodeURIComponent(permalink)+"&source=tweetbutton&text="+
encodeURIComponent((tweetContent))+"&url="+encodeURIComponent(permalink)+"'>TWEETNOUT";
out += "</a>";
out += "</span>";
out += "</span>";
return out;
});
$(".tweetable").hover(
function(){
if ($(this).data('vis') != true) {
$(this).data('vis', true);
$(this).find('.sharebuttons').fadeIn(200);
}
},
function(){
if ($(this).data('vis') === true) {
$(this).find('.sharebuttons').clearQueue().delay(0).fadeOut(200);
$(this).data('vis', false);
$(this).data('leftSet', false);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment