-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (131 loc) · 4.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<html>
<head>
<title>Tweets as PNG | Tweetpong</title>
<style type="text/css">
body { padding: 40px 200px 40px 40px; }
form { margin: 20px 0 20px 0; }
p { max-width: 800px; }
span.status { display: block; height: 20px; color: green; }
img { border: none; }
</style>
</head>
<body>
<p>
With Tweetpong you can <strong>easily embed tweets in blogs
etc.</strong> It generates you a link to an image of a given tweet
and you can use the link directly wherever you want. (No need to
save the image somewhere else.) The service is open source and completely
free to use. It runs on <a href="http://code.google.com/appengine/">Google
AppEngine</a> so it can handle heavy traffic.
</p>
<form action="#">
<p>
<span class="status"></span>
</p>
<p>
<strong>Enter tweet url:</strong>
<input type="text" size="60" />
<input type="submit" value="Png"></input>
<br />
<input type="radio" name="width" id="w0" value="" />
<label for="w0">full</label> |
<input type="radio" name="width" id="w600" value="600" checked="checked" />
<label for="w600">600px</label> |
<input type="radio" name="width" id="w500" value="500" />
<label for="w500">500px</label> |
<input type="radio" name="width" id="w400" value="400" />
<label for="w400">400px</label> |
<input type="radio" name="width" id="w300" value="300" />
<label for="w300">300px</label>
</p>
</form>
<p>
<input type="button" value="Random" />
</p>
<p>Grab link: <a href="/23019320509.png" class="pong">http://tweetpng.appspot.com/23019320509.png</a></p>
<p>
<a href="">
<img src="http://chart.apis.google.com/chart?chst=d_text_outline&chld=a0a0a0|20|l|ffffff|_|Loading...&chf=bg,s,ffffff" class="pong">
</a>
</p>
<hr>
<p>
For feedback, bugs etc. <a href="http://twitter.com/turbofunctor">tweet me</a>.
</p>
<p>
Here's a bookmarklet <a href="javascript:/^http:\/\/twitter.com\/(#!\/)?[^\/]+\/status(es)?\/\d+$/.exec(location)?location='http://tweetpng.appspot.com/?t='+encodeURIComponent(location):alert('Not on a tweet page');">Tweetpong</a>
for easy png'ing. Drag it to your bookmarks bar and click on a tweet page,
it takes you here.
</p>
<p>
API is very simple:
<br />
<code>http://tweetpng.appspot.com/<tweet id>.png</code>
<br />or, with custom width<br />
<code>http://tweetpng.appspot.com/<tweet id>-<width>.png</code>
<br />
HTTP response <code>200</code> if ok, <code>304</code> or <code>500</code> on error.
</p>
<a href="http://github.com/jsa/tweetpong"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" /></a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var form = $('form'),
host = window.location.host;
form.submit(function() {
var status = $('span.status').empty(),
twitterUrl = $('[type=text]').val();
var match = /\/(\d+)$/.exec(twitterUrl);
if (match) {
var width = form.find('[name=width]:checked').val(),
pngUrl = null;
if (!width) {
pngUrl = 'http://' + host + '/' + match[1] + '.png';
} else {
pngUrl = 'http://' + host + '/' + match[1] + '-' + width + '.png';
}
status.text("Loading...");
$('img.pong').one('load', function() { status.empty() })
.attr('src', pngUrl)
.parents('a').attr('href', twitterUrl);
$('a.pong').attr('href', pngUrl)
.text(pngUrl);
} else {
status.html("Url has to be in format <code>http://twitter.com/turbofunctor/statuses/23019320509</code>");
}
return false;
});
$('[type=radio]').change(function() { form.submit(); });
$('[value=Random]').click(function() {
$.ajax({
url: '/random/',
dataType: 'json',
success: function(tweet) {
form.find('[type=text]').val('http://twitter.com/' + tweet.user.screen_name
+ '/statuses/' + tweet.id);
form.submit();
}
});
});
var tweet = /\?t=([^&]+)/.exec(window.location.search);
if (tweet) {
$('[type=text]').val(decodeURIComponent(tweet[1]));
form.submit();
} else {
var init = [
'http://twitter.com/ryotamx/statuses/22972333755',
'http://twitter.com/duuhcookie/statuses/22391972152',
'http://twitter.com/_AllisonPacino/statuses/22805255792',
'http://twitter.com/Poison_Ivy_12/statuses/23009120153',
'http://twitter.com/LADYinMARS/statuses/22723582920',
'http://twitter.com/hide1208y/statuses/23139984418',
'http://twitter.com/givemestrength/statuses/23075434751',
'http://twitter.com/yuito0215/statuses/22587836771',
'http://twitter.com/chocobunny/statuses/22980395410',
'http://twitter.com/lindenbaum_/statuses/22612090451'
];
form.find('[type=text]').val(init[Math.round((init.length - 1) * Math.random())]);
form.submit();
}
</script>
</body>
</html>