Skip to content
Snippets Groups Projects
Commit 1883e253 authored by philipp's avatar philipp
Browse files

twitter-jquery hinzugefuegt

parent ee82fa4d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 500 additions and 0 deletions
ExterneLibs/seaofclouds-tweet-ca47184.zip 0 → 100644
+ 0
− 0
View file @ 1883e253
File added
ExterneLibs/seaofclouds-tweet-ca47184/.gitignore 0 → 100644
+ 1
− 0
View file @ 1883e253
*.DS_Store
ExterneLibs/seaofclouds-tweet-ca47184/README.markdown 0 → 100644
+ 80
− 0
View file @ 1883e253
# Tweet!
#### Put twitter on your website with tweet!, an unobtrusive javascript plugin for jquery.
## Demo
http://tweet.seaofclouds.com/ and http://seaofclouds.com/
## Source
http://github.com/seaofclouds/tweet/tarball/master
## Features
* small size and fast download time
* will not slow down or pause your page while tweets are loading
* display up to 100 tweets, as permitted by the twitter search api
* display tweets from a twitter search, or from your own feed
* optional verb tense matching, for human readable tweets
* optionally display your avatar
* optionally display tweets from multiple accounts!
* automatic linking of @replies to users’ twitter page
* automatic linking of URLs
* automatic linking of #hashtags, to a twitter search of all your tags
* converts <3 to a css styleable ♥ (we ♥ hearts)
* customize the style with your own stylesheet or with other jquery plugins
## Usage
1. Get JQuery. In these examples, we use Google's AJAX Libraries API.
http://code.google.com/apis/ajaxlibs/
http://jquery.com/
2. include jQuery and jquery.tweet.js files in your template's <head>.
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>
3. Also in <head>, Initialize tweet! on page load with your Username and other options
<script type='text/javascript'>
$(document).ready(function(){
$(".tweet").tweet({
join_text: "auto",
avatar_size: 32,
count: 3,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied to",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
});
</script>
4. In <body>, include a placeholder for your tweets. They'll get loaded in via JSON. How fancy!
<div class="tweet"></div>
5. Style with our stylesheet in <head>, or modify as you like!
<link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
### Contribute
Bring your code slinging skills to Github and help us develop new features for tweet!
http://github.com/seaofclouds/tweet/
git clone git://github.com/seaofclouds/tweet.git
Report bugs at http://seaofclouds.lighthouseapp.com/projects/14179-tweet/overview
### Licensed under the MIT
http://www.opensource.org/licenses/mit-license.php
If you like Tweet, check out Twoot!
Twoot is a miniature Twitter client based on Tweet that allows you to post tweets and see what your friends are up to. Thanks, Peter Krantz!
\ No newline at end of file
ExterneLibs/seaofclouds-tweet-ca47184/config.ru 0 → 100644
+ 2
− 0
View file @ 1883e253
use Rack::Static, :urls => ['/index.css', '/jquery.tweet.css', '/jquery.tweet.js'], :root => "tweet"
run lambda { |env| [200, { 'Content-Type' => 'text/html', 'Cache-Control' => 'public, max-age=86400' }, File.open('tweet/index.html', File::RDONLY)] }
\ No newline at end of file
ExterneLibs/seaofclouds-tweet-ca47184/tweet/index.css 0 → 100644
+ 50
− 0
View file @ 1883e253
body {
background-color: #008D99;
color: white;
font: 15px/1.3 arial, sans-serif;
margin: 0 auto;
width: 480px;
padding: 30px;
text-align: left; }
h1 {
font-size: 240%;
margin-bottom: -.5em; }
h2, p, ul, code {
margin-bottom: 1em; }
h2 a {
color: #fff; }
h3 {
font-size: 140%;
margin-bottom: .4em; }
ul {
padding-left: 2em; }
ul li {
list-style-type: square;
margin-left: 0;}
a {
color: #8ADEE2; }
code {
margin-left: 1em;
padding: .5em;
display: block;
}
code, .code {
background-color: #0C717A;
color: #fff;
font-size: 85%;
font-family: courier, monospace; }
code a, .code a {
color: #fff; }
.copyright {
font-family: verdana, sans-serif;
font-size: 75%;
margin-top: 8em; }
.copyright span {
color: #8ADEE2; }
.download h4 {
font-size: 120%;
margin-top: -.5em;
color: #8ADEE2; }
.twoot {
padding-top: 3em; }
ExterneLibs/seaofclouds-tweet-ca47184/tweet/index.html 0 → 100644
+ 168
− 0
View file @ 1883e253
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tweet! Put Twitter on your site with this simple, unobtrusive jQuery widget</title>
<link href="index.css" rel="stylesheet"/>
<link href="jquery.tweet.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.tweet.js" charset="utf-8"></script>
<script>
jQuery(document).ready(function($) {
$(".tweet").tweet({
join_text: "auto",
username: "seaofclouds",
avatar_size: 48,
count: 3,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
$("#query").tweet({
avatar_size: 32,
count: 4,
query: "tweet.seaofclouds.com",
loading_text: "searching twitter..."
});
$("#userandquery").tweet({
count: 3,
query: "from:seaofclouds http",
loading_text: "searching twitter..."
});
$("#fromtwo").tweet({
avatar_size: 32,
count: 4,
username: ["seaofclouds", "laughingsquid"],
loading_text: "searching twitter...",
refresh_interval: 10
});
$("#list").tweet({
avatar_size: 32,
count: 4,
username: "twitter",
list: "team",
loading_text: "loading list..."
});
$("#empty").tweet({
avatar_size: 32,
count: 4,
query: "cieR8oog",
loading_text: "searching twitter..."
}).bind("empty", function() { $(this).append("No matching tweets found"); });
})
</script>
</head>
<body>
<h1>Tweet!</h1>
<h2>put <a href="http://twitter.com">twitter</a> on your website with <em>tweet!</em>, an unobtrusive javascript plugin for jquery.</h2>
<h3>Demo</h3>
<p>displaying three tweets from the <a href="http://twitter.com/seaofclouds">seaofclouds twitter feed</a>. check the script in action at <a href="http://seaofclouds.com">seaofclouds.com</a></p>
<div class='tweet'></div>
<p>displaying four tweets from the query "<a href="http://search.twitter.com/search?q=tweet.seaofclouds.com">tweet.seaofclouds.com</a>".</p>
<div id="query" class='query'></div>
<p>displaying up to three links with the search query "<a href="http://search.twitter.com/search?q=from%3Aseaofclouds%20http">from:seaofclouds http</a>".</p>
<div id='userandquery' class="query"></div>
<p>displaying four tweets from the two users "seaofclouds" and "laughingsquid", refreshing every 10 seconds.</p>
<div id='fromtwo' class="query"></div>
<p>displaying tweets from users on the 'team' list of 'twitter'.</p>
<div id='list' class="query"></div>
<p>adding a message when no tweets matching 'cieR8oog' are found.</p>
<div id='empty' class="query"></div>
<h3>Features</h3>
<ul>
<li>small size and fast download time</li>
<li>will not slow down or pause your page while tweets are loading</li>
<li>display up to 100 tweets, as permitted by the twitter search api</li>
<li>display tweets from a twitter search, or from your own feed</li>
<li>optional verb tense matching, for human readable tweets</li>
<li>optionally display your avatar</li>
<li>optionally display tweets from multiple accounts!</li>
<li>optional reloading after a specified delay</li>
<li>automatic linking of @replies to users&#8217; twitter page</li>
<li>automatic linking of URLs</li>
<li>uses <a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter's Search API</a>, so you can display any tweets you like</li>
<li>Display up to 100 tweets that have been posted within 7 days (limit set by <a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter's Search API</a>)</li>
<li>automatic linking of <a href="http://search.twitter.com/search?q=&amp;tag=hashtags">#hashtags</a>, to a twitter search of all your tags</li>
<li>converts &lt;3 to a css styleable <span class='heart'>♥</span> (we ♥ hearts)</li>
<li>makes awesome text, AWESOME text with AWESOMEIZER</li>
<li>customize the style with your own stylesheet or with other jquery plugins</li>
<li>compatible with most jquery versions, including jquery 1.2.6, 1.3.x, and the latest 1.4</li>
</ul>
<p><strong>NOTE:</strong> Some users have reported that they <a href="http://help.twitter.com/forums/10713/entries/42646">do not show up in Twitter's search results</a>.</p>
<div class='download'>
<h3>Download</h3>
<p>
<a href="http://github.com/seaofclouds/tweet/zipball/master">
<img width="90" src="http://github.com/images/modules/download/zip.png"></a>
<a href="http://github.com/seaofclouds/tweet/tarball/master">
<img width="90" src="http://github.com/images/modules/download/tar.png"></a>
</p>
</div>
<h3>Usage</h3>
<p><strong>1.</strong> <a href="http://jquery.com/">Get JQuery</a>. In these examples, we use <a href="http://code.google.com/apis/ajaxlibs/">Google's AJAX Libraries API</a>.
<p><strong>2.</strong> include jQuery and jquery.tweet.js files in your template's <span class="code">&lt;head&gt;</span>.</p>
<code>
&lt;script language=&quot;javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
&lt;script language=&quot;javascript&quot; src=&quot;/tweet/jquery.tweet.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
</code>
<p><strong>3.</strong> Also in <span class="code">&lt;head&gt;</span>, Initialize tweet! on page load with your Username and other options</p>
<code>
&lt;script type=&apos;text/javascript&apos;&gt;<br />
&nbsp; &nbsp; $(document).ready(function(){<br />
&nbsp; &nbsp; &nbsp; &nbsp; $(".tweet").tweet({<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; username: "seaofclouds",<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; join_text: "auto",<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; avatar_size: 32,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count: 3,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_default: "we said,", <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_ed: "we",<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_ing: "we were",<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_reply: "we replied to",<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_url: "we were checking out",<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loading_text: "loading tweets..."<br />
&nbsp; &nbsp; &nbsp; &nbsp; });<br />
&nbsp; &nbsp; });<br />
&lt;/script&gt;
</code>
<p><strong>4.</strong> In <span class="code">&lt;body&gt;</span>, include a placeholder for your tweets. They'll get loaded in via JSON. How fancy!</p>
<code>
&lt;div class=&quot;tweet&quot;&gt;&lt;/div&gt;
</code>
<p><strong>5.</strong> Style with our stylesheet in <span class="code">&lt;head&gt;</span>, or modify as you like!</p>
<code>
&lt;link href=&quot;jquery.tweet.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
</code>
<h3>Contribute</h3>
<p>Bring your code slinging skills to <a href="http://github.com/seaofclouds/tweet/">Github</a> and help us develop new features for tweet!</p>
<code>
git clone git://github.com/seaofclouds/tweet.git
</code>
<a href="http://github.com/seaofclouds/tweet"><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>
<p>
<strong>Report bugs and request features</strong> in <a href="http://github.com/seaofclouds/tweet/issues">Github Issues</a>
</p>
<h3>Licensed under the MIT</h3>
<code>
<a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>
</code>
<div class='twoot'>
<h3>If you like Tweet, check out <a href="http://github.com/peterk/twoot/tree/master">Twoot</a>!</h3>
<p><a href="http://github.com/peterk/twoot/tree/master">Twoot</a> is a miniature Twitter client based on Tweet that allows you to post tweets and see what your friends are up to. Thanks, <a href="http://www.peterkrantz.com">Peter Krantz</a>!</p>
</div>
<p class='copyright'>something nifty from <a href="http://seaofclouds.com">seaofclouds</a><span class="trade">&trade;</span> | <a href="http://github.com/seaofclouds/tweet/">contribute</a></p>
</body>
</html>
ExterneLibs/seaofclouds-tweet-ca47184/tweet/jquery.tweet.css 0 → 100644
+ 25
− 0
View file @ 1883e253
.tweet, .query {
font-family: Georgia, serif;
font-size: 120%;
color: #085258; }
.tweet .tweet_list, .query .tweet_list {
-webkit-border-radius: .5em;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #8ADEE2; }
.tweet .tweet_list .awesome, .tweet .tweet_list .epic, .query .tweet_list .awesome, .query .tweet_list .epic {
text-transform: uppercase; }
.tweet .tweet_list li, .query .tweet_list li {
overflow-y: auto;
overflow-x: hidden;
padding: .5em; }
.tweet .tweet_list li a, .query .tweet_list li a {
color: #0C717A; }
.tweet .tweet_list .tweet_even, .query .tweet_list .tweet_even {
background-color: #91E5E7; }
.tweet .tweet_list .tweet_avatar, .query .tweet_list .tweet_avatar {
padding-right: .5em;
float: left; }
.tweet .tweet_list .tweet_avatar img, .query .tweet_list .tweet_avatar img {
vertical-align: middle; }
ExterneLibs/seaofclouds-tweet-ca47184/tweet/jquery.tweet.js 0 → 100644
+ 174
− 0
View file @ 1883e253
(function($) {
$.fn.tweet = function(o){
var s = {
username: ["seaofclouds"], // [string] required, unless you want to display our tweets. :) it can be an array, just do ["username1","username2","etc"]
list: null, //[string] optional name of list belonging to username
avatar_size: null, // [integer] height and width of avatar if displayed (48px max)
count: 3, // [integer] how many tweets to display?
intro_text: null, // [string] do you want text BEFORE your your tweets?
outro_text: null, // [string] do you want text AFTER your tweets?
join_text: null, // [string] optional text in between date and tweet, try setting to "auto"
auto_join_text_default: "i said,", // [string] auto text for non verb: "i said" bullocks
auto_join_text_ed: "i", // [string] auto text for past tense: "i" surfed
auto_join_text_ing: "i am", // [string] auto tense for present tense: "i was" surfing
auto_join_text_reply: "i replied to", // [string] auto tense for replies: "i replied to" @someone "with"
auto_join_text_url: "i was looking at", // [string] auto tense for urls: "i was looking at" http:...
loading_text: null, // [string] optional loading text, displayed while tweets load
query: null, // [string] optional search query
refresh_interval: null // [integer] optional number of seconds after which to reload tweets
};
if(o) $.extend(s, o);
$.fn.extend({
linkUrl: function() {
var returning = [];
var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
this.each(function() {
returning.push(this.replace(regexp,"<a href=\"$1\">$1</a>"));
});
return $(returning);
},
linkUser: function() {
var returning = [];
var regexp = /[\@]+([A-Za-z0-9-_]+)/gi;
this.each(function() {
returning.push(this.replace(regexp,"<a href=\"http://twitter.com/$1\">@$1</a>"));
});
return $(returning);
},
linkHash: function() {
var returning = [];
var regexp = /(?:^| )[\#]+([A-Za-z0-9-_]+)/gi;
this.each(function() {
returning.push(this.replace(regexp, ' <a href="http://search.twitter.com/search?q=&tag=$1&lang=all&from='+s.username.join("%2BOR%2B")+'">#$1</a>'));
});
return $(returning);
},
capAwesome: function() {
var returning = [];
this.each(function() {
returning.push(this.replace(/\b(awesome)\b/gi, '<span class="awesome">$1</span>'));
});
return $(returning);
},
capEpic: function() {
var returning = [];
this.each(function() {
returning.push(this.replace(/\b(epic)\b/gi, '<span class="epic">$1</span>'));
});
return $(returning);
},
makeHeart: function() {
var returning = [];
this.each(function() {
returning.push(this.replace(/(&lt;)+[3]/gi, "<tt class='heart'>&#x2665;</tt>"));
});
return $(returning);
}
});
function parse_date(date_str) {
// The non-search twitter APIs return inconsistently-formatted dates, which Date.parse
// cannot handle in IE. We therefore perform the following transformation:
// "Wed Apr 29 08:53:31 +0000 2009" => "Wed, Apr 29 2009 08:53:31 +0000"
return Date.parse(date_str.replace(/^([a-z]{3})( [a-z]{3} \d\d?)(.*)( \d{4})$/i, '$1,$2$4$3'));
}
function relative_time(time_value) {
var parsed_date = parse_date(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
var r = '';
if (delta < 60) {
r = delta + ' seconds ago';
} else if(delta < 120) {
r = 'a minute ago';
} else if(delta < (45*60)) {
r = (parseInt(delta / 60, 10)).toString() + ' minutes ago';
} else if(delta < (2*60*60)) {
r = 'an hour ago';
} else if(delta < (24*60*60)) {
r = '' + (parseInt(delta / 3600, 10)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
r = 'a day ago';
} else {
r = (parseInt(delta / 86400, 10)).toString() + ' days ago';
}
return 'about ' + r;
}
function build_url() {
var proto = ('https:' == document.location.protocol ? 'https:' : 'http:');
if (s.list) {
return proto+"//api.twitter.com/1/"+s.username[0]+"/lists/"+s.list+"/statuses.json?per_page="+s.count+"&callback=?";
} else if (s.query == null && s.username.length == 1) {
return proto+'//api.twitter.com/1/statuses/user_timeline.json?screen_name='+s.username[0]+'&count='+s.count+'&include_rts=1&callback=?';
} else {
var query = (s.query || 'from:'+s.username.join(' OR from:'));
return proto+'//search.twitter.com/search.json?&q='+encodeURIComponent(query)+'&rpp='+s.count+'&callback=?';
}
}
return this.each(function(i, widget){
var list = $('<ul class="tweet_list">').appendTo(widget);
var intro = '<p class="tweet_intro">'+s.intro_text+'</p>';
var outro = '<p class="tweet_outro">'+s.outro_text+'</p>';
var loading = $('<p class="loading">'+s.loading_text+'</p>');
if(typeof(s.username) == "string"){
s.username = [s.username];
}
if (s.loading_text) $(widget).append(loading);
$(widget).bind("load", function(){
$.getJSON(build_url(), function(data){
if (s.loading_text) loading.remove();
if (s.intro_text) list.before(intro);
list.empty();
var tweets = (data.results || data);
$.each(tweets, function(i,item){
// auto join text based on verb tense and content
if (s.join_text == "auto") {
if (item.text.match(/^(@([A-Za-z0-9-_]+)) .*/i)) {
var join_text = s.auto_join_text_reply;
} else if (item.text.match(/(^\w+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+) .*/i)) {
var join_text = s.auto_join_text_url;
} else if (item.text.match(/^((\w+ed)|just) .*/im)) {
var join_text = s.auto_join_text_ed;
} else if (item.text.match(/^(\w*ing) .*/i)) {
var join_text = s.auto_join_text_ing;
} else {
var join_text = s.auto_join_text_default;
}
} else {
var join_text = s.join_text;
};
var from_user = item.from_user || item.user.screen_name;
var profile_image_url = item.profile_image_url || item.user.profile_image_url;
var join_template = '<span class="tweet_join"> '+join_text+' </span>';
var join = ((s.join_text) ? join_template : ' ');
var avatar_template = '<a class="tweet_avatar" href="http://twitter.com/'+from_user+'"><img src="'+profile_image_url+'" height="'+s.avatar_size+'" width="'+s.avatar_size+'" alt="'+from_user+'\'s avatar" title="'+from_user+'\'s avatar" border="0"/></a>';
var avatar = (s.avatar_size ? avatar_template : '');
var date = '<span class="tweet_time"><a href="http://twitter.com/'+from_user+'/statuses/'+item.id_str+'" title="view tweet on twitter">'+relative_time(item.created_at)+'</a></span>';
var text = '<span class="tweet_text">' +$([item.text]).linkUrl().linkUser().linkHash().makeHeart().capAwesome().capEpic()[0]+ '</span>';
// until we create a template option, arrange the items below to alter a tweet's display.
list.append('<li>' + avatar + date + join + text + '</li>');
list.children('li:first').addClass('tweet_first');
list.children('li:odd').addClass('tweet_even');
list.children('li:even').addClass('tweet_odd');
});
if (s.outro_text) list.after(outro);
$(widget).trigger("loaded").trigger((tweets.length == 0 ? "empty" : "full"));
if (s.refresh_interval) {
window.setTimeout(function() { $(widget).trigger("load"); }, 1000 * s.refresh_interval);
};
});
}).trigger("load");
});
};
})(jQuery);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment