Twitter feed

**lyleyboy** · Nov 4, 2011 10:37

Hi folks,

I have a little script that pulls down my twitter feed into a <ul>

The only problem is that the links in the text are just text rather than hyper links.

How can I loop through the content and change each http://www.something.com into proper

Code:

<a href="http://www.something.com>http://www.something.com</a>

I'm fairly new to JS so please be gentle with me.

Thanks.

**ralph.m** · Nov 4, 2011 17:20

You'll need to post your JS code so that a modification can be provided.

**sdleihssirhc** · Nov 4, 2011 17:56

Also, which browsers are you trying to support? IE6? Mobile Safari?

**lyleyboy** · Nov 5, 2011 04:54

My code.

I found most of this on a tutorial but I have added to it.

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>JQUery get tweets</title>
		<style>
			
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
		<script>
			$(document).ready(function(){
				
	
						
				var params = $("#tweets").attr("rel");
				params = params.split("|");
				username = params[0];
				count = params[1];
				var format='json';
				var url='http://api.twitter.com/1/statuses/user_timeline/'+username+'.'+format+'?callback=?';
				$.getJSON(url,function(tweet){ 
					var tweets='<ul>';
					for (i=0;i<=count;i++){
						tweets+= "<li>" + (tweet[i].text) + "</li>";
					}	
					tweets+= "</ul>";				
					
					var start = tweets.indexOf("http");
					var end = tweets.indexOf(" ", start);
					var len = end - start;
					var link = tweets.substr(start,len)
					console.log(start + " " + end + " " + link);	
					
					$("#tweets").html(tweets);
				});
			});
		</script>
		
	</head>
	<body>
		
		<div id="tweets" rel="smileyhcoder|5"></div>
		
	</body>
</html>

Not sure if it's better to loop through the end result or to replace during each occurrence of the for loop. In either case there could and will be multiple links.

Thanks

**centered effect** · Nov 5, 2011 06:11

This should work - it also adds the links to @Name and to #Searches, which you may want as well....

Code:

var params = $("#tweets").attr("rel").split("|"),
	username = params[0],
	count = params[1],
	url = 'http://api.twitter.com/1/statuses/user_timeline/' + username + '.json?callback=?';
	
$.getJSON(url, function(tweet) { 
	var i, tweets;	
	tweets += '<ul>';
	for (i = 0; i <= count; i++){
		tweets += '<li class="tweet">' + (tweet[i].text) + '</li>';
	}	
	tweets += '</ul>';				
	$("#tweets").html(tweets);
	
	$('.tweet').each(function() {
		var matchees
			atNamePattern = /@[\w-]+/,
			atSearchPattern = /#[\w-]+/,
		
			// Modified from http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links/7123542#7123542
			urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;
		
		// Modified from http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links/7123542#7123542
		$(this).html(
			$(this).html().replace(urlPattern, '<a href="$&">$&</a>')
		);

		$(this).html(
			$(this).html().replace(atNamePattern, '<a href="http://twitter.com/$&">$&</a>')
		);

		$(this).html(
			$(this).html().replace(atSearchPattern, '<a href="http://twitter.com/search?q=$&">$&</a>')
		);
	});
});

**centered effect** · Nov 5, 2011 10:07

Simplified this some more, I wasn't crazy about the previous solution:

Code:

var params = $("#tweets").attr("rel").split("|"),
	username = params[0],
	count = params[1],
	url = 'http://api.twitter.com/1/statuses/user_timeline/' + username + '.json?callback=?';
	
$.getJSON(url, function(tweet) { 
	var i, tweets,
		atNamePattern = /@[\w-]+/,
		atSearchPattern = /#[\w-]+/,
		// Modified from http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links/7138764#7138764					
		urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;	
	tweets += '<ul>';
	for (i = 0; i <= count; i++) {
		tweet[i].text = tweet[i].text
			.replace(urlPattern, '<a href="$&">$&</a>')
			.replace(atNamePattern, '<a href="http://twitter.com/$&">$&</a>')
			.replace(atSearchPattern, '<a href="http://twitter.com/search?q=$&">$&</a>');
		tweets += '<li class="tweet">' + (tweet[i].text) + '</li>';
	}	
	tweets += '</ul>';				
	$("#tweets").html(tweets);
});

**lyleyboy** · Nov 6, 2011 09:00

Absolutely perfect.

That's exactly what I was looking for.

Thanks so much

User Tag List

Thread: Twitter feed

Thread Tools

Display

Twitter feed

Bookmarks

Bookmarks

Posting Permissions