miff blog

Danas bi imao samo 33 godina. Srecan rodjendan gde god da si ;)

I have no power over this
You know I'm afraid
The walls I built are crumbling
The water is moving
I'm slipping away

Ne znam koliko vas koristi twitpic.com ali je jako dobra stvar. Deljenje slike preko tvitera (da, mora tviter nalog). Pa ako koristite pomenute servise i zelite stream slika sa twitpic-a evo, uz minimalno PHP kodiranje :)

HTML blok

Pre svega HTML, prvi deo je poprilicno klasican, "uvlacenje" jQuery fajlova, prvij je jQ, ostala tri linka je ustvari plugin pisan od strane Mike Alsup, i na kraju malo CSS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
<style type="text/css">
	#slideshow { height: 182px; width: 182px;}
	#slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; cursor: pointer;}
	.nav {width: 182px;}
	.status {width: 140px; float: left;}
	#prev {width: 20px; float: left;}
	#next {width: 20px; float: right;}
</style>

Sledeci deo nema puno za objasnjavati, dva DIV-a, prvi #slideshow koji "drzi" slike, i drugi #nav koji sadrzi dve slike koje sluze za kontrolu prikaza, tu je i PHP foreach koja "izvrti" xml objekat koji je ranije pre svega pozvan.

<div id="slideshow" class="pics">
	<?php foreach($xml->channel->item as $path) { ?>
		<a title="<?php echo str_replace('miff78: ', '',$path->title);?>" href="<?php echo $path->link;?>">
			<img src="<?php echo findThumb($path->link);?>" alt="" width="150" height="150"/>
		</a>
	<?php } ?>
</div>
<div class="nav">
	<div id="prev"><img src="twp/prev1.png"/></div>
	<div class="status"></div>
	<div id="next"><img src="twp/next1.png"/></div>
</div>

JS blok

Ispod svega jQuery tj JS blok, ready funkcija koja poziva plugin cycle i pomocna funkcija onAfter ako zelite da se nesto dogadja posle prelistane slike :)

<script type="text/javascript">
    $(document).ready(function () {
		$('#slideshow').cycle({
			fx:     'scrollHorz', 
			prev:   '#prev', 
			next:   '#next', 
			timeout: 0
			//after: onAfter 
		});
		function onAfter() {
			$('.status').html(this.title);
		}
    });
</script>

PHP blok

PHP blok ima dve funkcije, prilicno jednostavno. Prva, ucita xml fajl za datog korisnika u jedan veliki niz, dok druga dodje kao pomagac i bavi se str_replace operacijom.

<?php
function getPic($uid){
		$url = 'http://twitpic.com/photos/'. $uid . '/feed.rss';
		$xml = simplexml_load_file($url) or die('Nisam uspeo da se ucitam fajl!');
		return($xml);
	}
	function findThumb($s) {
		$thumb = str_replace('http://twitpic.com', 'http://twitpic.com/show/thumb', $s);
		return($thumb);
	}
?>

Zadnju liniju koda koju ce te dodati je:

<?php $xml = getPic('miff78');?>

i ona ide u sam vrh dokumenta.

Source je ovde.

Ne zaboravite da mora SimpleXML, svuda gde pise miff78 zameniti sa zeljenim korisnickim imenom, takodje  na pojedinim hostovima mora da se doda php.ini u direktorijumu gde je skripta, ovaj red allow_url_fopen = on. 

Sa ukusom JavaScript-a, tacnije jQuery ili jos tacnije oba :)

Svi oni koje ne zele da se petljaju sa PHP-om ili nemaju podrsku za SimpleXML, evo JavaScript verzije. Samo je potrebno da se promeni 12. linija koda i umesto miff78, treba upisate korisnicko ime za koji zelimo TL:
$.getJSON('http://twitter.com/status/user_timeline/miff78.json?count=10&callback=?', function(data){

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style type="text/css">
	body { background: #1B1B1B; color: #fff; font: 11px Ariel, Verdana;}
	a {color: #AACFFF;}
	.tweet { width: 100%; border-bottom: 1px solid #ADD8E6;}
	#twitter {width: 100%; float: left;}
</style>
<img src="http://a1.twimg.com/a/1312594763/phoenix/img/twitter_logo_right.png"/>
<div id="twitter"></div>
<script type="text/javascript">
$(document).ready(function(){
	$.getJSON('http://twitter.com/status/user_timeline/miff78.json?count=10&callback=?', function(data){
		$.each(data, function(index, item){
			$('#twitter').append('<div class="tweet"><p style="margin: 0px;padding: 0px;">' + item.text.linkify() + '</p><p><strong>' + relative_time(item.created_at) + '</strong></p></div>');
		});
	});
	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);
	  
	  var r = '';
	  if (delta < 60) {
		r = 'minut pre';
	  } else if(delta < 120) {
		r = 'pre nekoliko minuta';
	  } else if(delta < (45*60)) {
		r = (parseInt(delta / 60)).toString() + ' minuta pre';
	  } else if(delta < (90*60)) {
		r = 'pre sat vremena';
	  } else if(delta < (24*60*60)) {
		r = '' + (parseInt(delta / 3600)).toString() + ' sati pre';
	  } else if(delta < (48*60*60)) {
		r = 'dan pre';
	  } else {
		r = (parseInt(delta / 86400)).toString() + ' dana pre';
	  }
	  
	  return r;
	}
	String.prototype.linkify = function() {
		return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
			return m.link(m);
		});
	};
});
</script>

Zip fajl sa ovim primerom se nalazi ovde, jer se kod ne vidi lepo (jos uvek :/)

Sa ukusom PHP-a :)

Ako vam ikada zatreba TL sa tvitera u PHP verziji, tu je. Potrebno je samo da je SimpleXML instaliran na serveru.

<?php
	// Init (Pozivanje $param1 = username sa twittera, $param2 = koliko statusa)
	getTwitterStatus('miff78',20);
	/*
	 * $uid = Twitter username // string
	 * $l	= Limit, koliko statusa da se prikazu // int
	 * return: Statuse
	 * */
	function getTwitterStatus($uid,$l){
		$url = "http://twitter.com/statuses/user_timeline/$uid.xml?count=$l";
		$xml = simplexml_load_file($url) or die('Nisam uspeo da se ucitam fajl!');
		echo '<ul>';
		foreach($xml->status as $status){
			$text = findTw($status->text);
			echo '<li>'.utf8_decode($text).'</li>';
		}
		echo '</ul>';
	}
	/*
	 * $s = Teks iz kojeg treba da se zamene @User i #Hashtag sa aktuelnim linkovima // string
	 * return: obradjeni tekst
	 * */
	function findTw($s) {
		$s = preg_replace("#(^|[\n ])([\w]+?://[\w]+[^ \"\n\r\t< ]*)#", "\\1<a href=\"\\2\" >\\2</a>", $s);
		$s = preg_replace("#(^|[\n ])((www|ftp)\.[^ \"\t\n\r< ]*)#", "\\1<a href=\"http://\\2\" >\\2</a>", $s);
		$s = preg_replace("/@(\w+)/", "<a href=\"http://www.twitter.com/\\1\" >@\\1</a>", $s);
		$s = preg_replace("/#(\w+)/", "<a href=\"http://search.twitter.com/search?q=\\1\" >#\\1</a>", $s);
		return($s);
	}
?>

Dok ne sredim ovaj prikaz coda, evo zip fajla.

PS. RegEX je mozda mogao bolje, zato nemoj odma neko da me napljuje nego neka napise u komentar :)