Permalink
Browse files

First commit of initial version.

  • Loading branch information...
0 parents commit c74419864ed90df8340e0ffb50ab3577a927a478 @lewisoaten committed Jan 23, 2010
Showing with 259 additions and 0 deletions.
  1. +37 −0 README
  2. BIN images/loading.gif
  3. +27 −0 index.html
  4. +148 −0 scripts/jquery.tweet.js
  5. +47 −0 scripts/twitter-comments.js
37 README
@@ -0,0 +1,37 @@
+=== Description ===
+This project creates a comment area for your website which uses the power of twitter to gather comments and drive extra traffic.
+
+Users comment through a text field which directs them to post a specially formatted (human-readable) post on twitter. The post has a bit.ly link back to the page which was being commented. The posts are displayed under the comments in the order they were made with a link to view in Twitter.
+
+Once a post is made, all the commenters followers will see their thoughts on your page or website and potentially click on the bit.ly link to visit your website.
+
+=== Features ===
+ - Completely client-side, doesn't require any server-side code
+ - Fast and doesn't slow down your existing page-load time
+ - Very customisable
+ - Very simple
+ - Visitors can comment from your website
+
+=== Installation ===
+1) Download the source from http://github.com/caecus/twitter-comments .
+2) Copy the images and scripts folder to your website.
+3) Replace YOUR_BIT.LY_LOGIN and YOUR_BIT.LY_API in twitter-comments.js with your Bit.ly login name and API key.
+3) Copy the JQuery script, JQuery Tweet script and Twitter Comments script from index.html into your pages header.
+4) Copy the Comment Section from index.html to where you would like the posts to display on your page.
+
+=== Pre-requisites ===
+This script comes packaged up with all pre-requisites.
+ - JQuery (http://jquery.com/)
+ - Custom version of Tweet (http://github.com/caecus/tweet).
+
+=== Contribute ===
+Bring your code slinging skills to Github and help us develop new features!
+
+http://github.com/caecus/twitter-comments/
+
+git clone git://github.com/caecus/twitter-comments.git
+
+Report any bugs here: http://github.com/caecus/twitter-comments/issues
+
+=== Licensed under the MIT ===
+http://www.opensource.org/licenses/mit-license.php
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,27 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Twitter Comments</title>
+
+ <!-- JQuery -->
+ <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
+ <!-- Tweet Plugin -->
+ <script language="javascript" src="scripts/jquery.tweet.js" type="text/javascript"></script>
+ <!-- Twitter Comments -->
+ <script language="javascript" src="scripts/twitter-comments.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <!-- Comment Section -->
+ <h2>Comments</h2>
+ <form action="" method="post">
+ <textarea id="message" cols="50" rows="3"></textarea>
+ <input type="button" id="tweetBtn" value="Preview Tweet"/>
+ </form>
+ <div class="tweet" id="comment">
+ <img src="images/loading.gif"></img> Calculating comment tag...
+ </div>
+ <!-- End Comment Section -->
+ </body>
+</html>
@@ -0,0 +1,148 @@
+(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"]
+ 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
+ callback: null // [function] optional callback
+ };
+
+ 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(/(a|A)wesome/gi, 'AWESOME'))
+ });
+ return $(returning);
+ },
+ capEpic: function() {
+ var returning = [];
+ this.each(function() {
+ returning.push(this.replace(/(e|E)pic/gi, 'EPIC'))
+ });
+ return $(returning);
+ },
+ makeHeart: function() {
+ var returning = [];
+ this.each(function() {
+ returning.push(this.replace(/(&lt;)+[3]/gi, "<tt class='heart'>&#x2665;</tt>"))
+ });
+ return $(returning);
+ }
+ });
+
+ function relative_time(time_value) {
+ var parsed_date = Date.parse(time_value);
+ var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
+ var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
+ if(delta < 60) {
+ return 'less than a minute ago';
+ } else if(delta < 120) {
+ return 'about a minute ago';
+ } else if(delta < (45*60)) {
+ return (parseInt(delta / 60)).toString() + ' minutes ago';
+ } else if(delta < (90*60)) {
+ return 'about an hour ago';
+ } else if(delta < (24*60*60)) {
+ return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
+ } else if(delta < (48*60*60)) {
+ return '1 day ago';
+ } else {
+ return (parseInt(delta / 86400)).toString() + ' days ago';
+ }
+ }
+
+ return this.each(function(){
+ var list = $('<ul class="tweet_list">').appendTo(this);
+ 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];
+ }
+ var query = '';
+ if(s.query) {
+ query += 'q='+s.query;
+ }
+ query += '&q=from:'+s.username.join('%20OR%20from:');
+ var url = 'http://search.twitter.com/search.json?&'+query+'&rpp='+s.count+'&callback=?';
+ if (s.loading_text) $(this).append(loading);
+ $.getJSON(url, function(data){
+ if (s.loading_text) loading.remove();
+ if (s.intro_text) list.before(intro);
+ $.each(data.results, 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 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/'+ item.from_user+'"><img src="'+item.profile_image_url+'" height="'+s.avatar_size+'" width="'+s.avatar_size+'" alt="'+item.from_user+'\'s avatar" title="'+item.from_user+'\'s avatar" border="0"/></a>';
+ var avatar = (s.avatar_size ? avatar_template : '')
+ var date = '<a href="http://twitter.com/'+item.from_user+'/statuses/'+item.id+'" title="view tweet on twitter">'+relative_time(item.created_at)+'</a>';
+ 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);
+ //We have done what we need to do, call the callback function
+ if (typeof s.callback == 'function') s.callback.call();
+ });
+ });
+ };
+})(jQuery);
@@ -0,0 +1,47 @@
+var bitlyLogin = 'YOUR_BIT.LY_LOGIN'
+var bitlyApi = 'YOUR_BIT.LY_API'
+
+$(document).ready(function(){
+ // set up default options
+ var defaults = {
+ version: '2.0.1',
+ login: bitlyLogin,
+ apiKey: bitlyApi,
+ history: '0',
+ longUrl: 'http://github.com/caecus/twitter-comments'
+ };
+
+ // Build the URL to query
+ var daurl = "http://api.bit.ly/shorten?"
+ +"version="+defaults.version
+ +"&longUrl="+defaults.longUrl
+ +"&login="+defaults.login
+ +"&apiKey="+defaults.apiKey
+ +"&history="+defaults.history
+ +"&format=json&callback=?";
+
+ // Utilize the bit.ly API
+ $.getJSON(daurl, function(data){
+ // Setup comment box
+ $('#tweetBtn').click( function() {
+ var url = "http://twitter.com/#search?q=" + data.results[defaults.longUrl].shortUrl + "&status=";
+ url += $('textarea#message').val() + " " + data.results[defaults.longUrl].shortUrl;
+ window.open(url);
+ });
+
+ // Load comments
+ $("#comment").html("");
+ $("#comment").tweet({
+ avatar_size: 32,
+ count: 20,
+ query: data.results[defaults.longUrl].shortUrl,
+ loading_text: '<img src="/images/loading.gif"></img> Loading comments...',
+ callback: function(){
+ // Clear out links to this page
+ var searchString = "<a href=\"" + data.results[defaults.longUrl].shortUrl + "\">" + data.results[defaults.longUrl].shortUrl + "</a>";
+ var newHTML = $("#comment").html().replace(new RegExp( searchString, "gi" ), '');
+ $("#comment").html(newHTML);
+ }
+ });
+ });
+});

0 comments on commit c744198

Please sign in to comment.