SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Twitter feed

  1. #1
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Twitter feed

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You'll need to post your JS code so that a modification can be provided.

  3. #3
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Also, which browsers are you trying to support? IE6? Mobile Safari?
    I'm the web overlord for Graphic Business Systems

  4. #4
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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>')
    		);
    	});
    });

  6. #6
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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);
    });

  7. #7
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely perfect.

    That's exactly what I was looking for.

    Thanks so much


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •