Tag Archives: twitter

Including retweets in your custom Twitter feeds

Posted on April 30, 2012 by
1 comment

Here are the codes I use to create a custom Twitter feed for my websites which includes retweets.

First you will want to insert the Javascript that makes the whole thing work. Copy and paste this line of code into your website, preferably just before the closing <body> tag:

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=thelibzter&include_rts=1&callback=twitterCallback2&count=6" type="text/javascript"></script>

Replace the words THELIBZTER in the above example with your own Twitter username. Change the number 4 after “count” to the number of tweets that you want to display.

Next, copy and paste the following html into the web page where you want the Twitter widget to display:

<div id="twitter">
<div id="twitter_t"></div>
<div id="twitter_m">
 <div id="twitter_container">
 <ul id="twitter_update_list"></ul>
 </div>
</div>
<div id="twitter_b"></div>
</div>

And, finally, copy and paste the following CSS into your website’s stylesheet:

#twitter {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:430px;
border:1px solid #c9c9c9;
}
#twitter_t {
width:405px;
height: 44px;
background:#c68aeb url(yourimagehere);
color:#fff;
text-shadow:.5px .5px #333;
font-size:18px;
font-family:Candara;
padding-top:20px;
padding-left:25px;
}
#twitter_m {
width: 400px;
padding: 0 15px;
background:#f7effc;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:5px;
padding-top:5px;
}
#twitter_update_list {
width: 413px;
padding: 0;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #31353d;
line-height: 16px;
font-weight:bold;
margin-left:-13px;
}
#twitter_update_list li {
width: 400px;
list-style: none;
padding:15px;
border-bottom: dotted 1px #ccc;
}
#twitter_update_list li a {
color:#631891;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #31353d;
}
#twitter_b {
width: 430px;
height: 29px;
background:#c68aeb url(yourimagehere);
}

Of course, you will probably want to edit the CSS codes for your Twitter widget.

And that, my friends, is all it takes to create a custom Twitter widget for your website! :) Have fun, and let me know if you run into any issues.

FURTHER READING:

If you want to remove the time stamp from the tweets in your custom Twitter feed, please check out this post  – http://icode4you.net/creating-a-custom-twitter-feed-how-to-remove-the-time-stamp-from-tweets.

Make sure you also check out another post I wrote that has the styles for several different custom Twitter widgets that are all ready to incorporate into your website!

And here is a link to a post that provides the codes and instructions on how to create a Twitter feed of the search results for a certain term.

Categories: CSS, HTML, Javascript | Tags: , , , , , ,

Creating a custom Twitter feed with avatars for your website

Posted on February 20, 2012 by
8 comments

Here is the simple code I use to create a Twitter feed which includes avatars for a website:

 

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Twitter feed with avatars</title>
	<style type="text/css">
		body {
			background: #333333;
		}
		.twtr-widget {
			float: left;
			width: 300px;
			margin: 50px 0 0 80px;
			padding: 0 0 15px;
			background: #fafafa;

			/*** cross browser box shadow ***/
			-moz-box-shadow: 0 0 2px #fff;
			-webkit-box-shadow: 0 0 2px #fff;
			-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3)";
			filter:
				progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=0,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=90,strength=3)
				progid:DXImageTransform.Microsoft.Shadow

(color=#ffffff,direction=180,strength=3)
				progid:DXImageTransform.Microsoft.Shadow

(color=#ffffff,direction=270,strength=3);
			box-shadow: 0 0 2px #fff;

			/*** kind of cross browser rounded corner ***/
			-webkit-border-radius: 3px;
			-khtml-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
		}
			.twtr-hd {
				/*** cross browser rgba ***/
				background-color: transparent;
				background-color: rgba(255,255,255,0.3);
				filter:progid:DXImageTransform.Microsoft.gradient

(startColorstr=#30ffffff,endColorstr=#30ffffff);
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient

(startColorstr=#30ffffff,endColorstr=#30ffffff)";
			}
			.twtr-bd {}
				.twtr-widget .twtr-bd .twtr-tweet {
					margin: 5px 0 0;
					padding: 0 0 5px;
					border-bottom: 1px solid #cecece;
				}
				.twtr-tweet:before {
					display: block;
					float: left;
					margin: -5px 0 0 5px;
					font-size: 50px; /* let's make it a big quote! */
					color: #bababa;
					text-shadow: 0 1px 1px #909090;
					font-family: "times new roman", serif;
				}
			.twtr-ft { display: none; }
	</style>
</head>
<body>
	<script src="http://widgets.twimg.com/j/2/widget.js"></script>
	<!-- first box -->
	<script>
	new TWTR.Widget({
	  version: 2,
	  type: 'profile',
	  rpp: 4,
	  interval: 6000,
	  width: 300,
	  height: 300,
	  theme: {
		shell: {
		  background: 'transparent',
		  color: '#333'
		},
		tweets: {
		  background: 'transparent',
		  color: '#333',
		  links: '#c10000'
		}
	  },
	  features: {
		scrollbar: false,
		loop: false,
		live: false,
		hashtags: true,
		timestamp: true,
		avatars: true,
		behavior: 'all'
	  }
	}).render().setUser('thelibzter').start();
	</script>

 

You can see a working example of this Twitter feed at http://icode4you.net/wp-content/uploads/2012/02/twitterfeed_with_avatars.html.

Categories: HTML, Javascript, Random | Tags: , , , ,

Creating a custom Twitter feed: How to remove the time stamp from tweets

Posted on October 19, 2011 by
2 comments

Here is the easiest way that I have found to remove time stamps from your custom Twitter feed.

Note: You can find detailed instructions on how to create a custom Twitter feed quickly and easy as well as several examples of pre-styled custom Twitter feeds for you to use and customize for your own site at blog.thelibzter.com, and instructions on how to create a custom Twitter feed of the search results for a specific term right here on Icode4you.net.

Open the html page where you have your Twitter feed, scroll down to the bottom of the page, and erase this line:

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>

In its place, copy and paste this code:

<script type="text/javascript">
function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  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);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return '';
  } else if(delta < 120) {
    return '';
  } else if(delta < (60*60)) {
    return '';
  } else if(delta < (120*60)) {
    return '';
  } else if(delta < (24*60*60)) {
    return '';
  } else if(delta < (48*60*60)) {
    return '';
  } else {
    return '';
  }
}
</script>

This code tells our Twitter feed to return empty values instead of the time stamp.

Save the file and re-upload it to your site. Your Twitter feed should be working exactly as it was before with the exception that there are no time stamps on your tweets.

You can see a working example of a custom Twitter feed with no time stamp here.

Further reading: You can find detailed instructions on how to create a custom Twitter feed  and several examples of pre-styled custom Twitter feeds at blog.thelibzter.com, and instructions on how to create a custom Twitter feed of the search results for a specific term right here on Icode4you.net.

As always, just let me know if you have any questions or problems.

Categories: CSS, Javascript | Tags: , , , ,

Creating a custom Twitter feed of search results for a specific term

Posted on August 22, 2011 by
8 comments

Here are the codes you need to create a custom Twitter feed that displays search results for a specific term or user.

First, let’s create the Javascript file that makes it all work.

Copy and paste this code into your favorite text editor:

$(document).ready(function() {
    // json call to twitter to request tweets containing our keyword, in this case 

'thelibzter'
    $.getJSON("http://search.twitter.com/search.json?q=thelibzter&callback=?", function(data) 

{
        // loop around the result
        $.each(data.results, function() {
            var text = this.text;
    
            if(text.charAt(0) != '@') {
                // construct tweet and add append to our #tweets div
                var tweet = $("<div></div>").addClass('tweet').html(text);
                // analyse our tweet text and turn urls into working links, hash 

tags into search links, and @replies into profile links.
                tweet.html('<div>' +
                    tweet.html()
                    .replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:

[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>')
                    .replace(/(^|\s)#(\w+)/g,'$1<a 

href="http://search.twitter.com/search?q=%23$2">#$2</a>')
                    .replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/

$2">@$2</a>')
                    + '<br /><a href="http://www.twitter.com/' + 

this.from_user + '/status/' + this.id_str + '" target="_blank">' + $.timeSinceTweet

(this.created_at) + '</a></div>'
                    )
                    .prepend('<a href="http://www.twitter.com/' + 

this.from_user + '" target="_blank"><img src="' + this.profile_image_url + '" width="48" 

height="48" /></a>')
                    .appendTo('#tweets')
                    .fadeIn();
            }
        });
    });
});

(function($) {
    $.timeSinceTweet = function(time) {
        var date = new Date(time);
        var diff = ((new Date()).getTime() - date.getTime()) / 1000;
        var day_diff = Math.floor(diff / 86400);
        
        if (day_diff < 0 || day_diff >= 31 || isNaN(day_diff)) {
            return "View tweet";
        }
        
        if(day_diff == 0) {
            if(diff < 60) {
                return Math.ceil(diff) + " seconds ago";
            }
            else if(diff < 120) {
                return "1 minute ago";
            }
            else if(diff < 3600) {
                return Math.floor( diff / 60 ) + " minutes ago";
            }
            else if(diff < 7200) {
                return "1 hour ago";
            }
            else if(diff < 86400) {
                return Math.floor( diff / 3600 ) + " hours ago";
            }
        }
        
        if(day_diff == 1) {
            return "Yesterday";
        }
        else if(day_diff < 7) {
            return day_diff + " days ago";
        }
        else if(day_diff < 31) {
            return Math.ceil( day_diff / 7 ) + " weeks ago";
        }
        else {
            return "View Tweet";
        }    
    }
})(jQuery);

 

You will want to change the words highlighted in red above (thelibzter) to whatever search term you want to use.

Save the file as main.js and upload it to your server.

Now, add this line of code to the <head> section of your website:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>

Make sure that the path to main.js is correct.

You will want to style the Twitter feed to match the design of your web page. Add this code to your stylesheet and feel free to edit it to make the Twitter display the way you want:

#container { width: 500px; margin: 0 auto; }
#tweets .tweet {
  padding: 10px 20px;
  font-size: 15px;
  position: relative;
  border-bottom: 1px dashed #ededed;
  overflow: hidden;
}
#tweets .tweet img { margin-right: 12px; float: left; }
#tweets .tweet .content { width: 400px; float:  left; }
#tweets .tweet .content a.view { font-size: 10px; }

Now, simply add this code to your web page wherever you want the Twitter feed to appear:

<div id="container">
  <h1>Search results for "TheLibzter"</h1>
  <div id="tweets"></div>
</div>

And that’s it! Let me know if you run into any issues or have any questions.

You can find instructions and codes to use to create your own custom Twitter feed here – creating a custom Twitter widget for your website.

You can also find several custom Twitter feeds that I designed and are available for you to use here – custom Twitter feeds for your website.

Categories: Javascript, Random | Tags: , , , ,