“Tweet Slider” dengan PHP dan jQuery


Biasanya di website company profile atau website pribadi dipasang widget twitter yang menampilkan tweet-tweet atau aktivitas yang di posting pada akun twitternya. Pada twitter menyediakan Twitter API yang bisa dikembangkan oleh pihak developer, contohnya ada startup yang mengembangkan API twitter yaitu ceritakota.com. nah, disini saya akan berbagi mengenai membuat tweet slider menggunakan PHP dan jQuery. Untuk mengambil aktivitas pada twitter bisa menggunakan JSON atau XML, untuk contoh alamatnya

https://api.twitter.com/1/statuses/user_timeline/herupurwito.xml

atau

https://api.twitter.com/1/statuses/user_timeline/herupurwito.json

Tapi, kali ini saya menggunakan yang berformat XML

Data pada xml akan di parsing menggunakan php kemudian akan ditampilkan ke dalam slide yang menggunaka jQuery.

Langsung saja kita lihat scriptnya :

<!doctype html>
<html>
	<head>
		<title>"Tweet Slider" dengan PHP dan jQuery - herupurwito.wordpress.com</title>
		<link rel="stylesheet" type="text/css" href="css/sliderkit-core.css" media="screen, projection" />
		<link rel="stylesheet" type="text/css" href="css/sliderkit-demos.css" media="screen, projection" />

		<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
		<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
		<script type="text/javascript" src="js/jquery.sliderkit.1.9.2.pack.js"></script>
		<script type="text/javascript">
			$(window).load(function(){ 	
				$(".contentslider-std").sliderkit({
					auto:1,
					tabs:1,
					circular:1,
					panelfx:"sliding",
					panelfxfirst:"fading",
					panelfxeasing:"easeInOutExpo",
					fastchange:1,
					keyboard:1
				});
				
			});	
		</script>
	</head>
	<body>
	<!-- Start contentslider-std -->
		<div class="sliderkit contentslider-std">
			<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a href="#" title="Previous"><span>Previous</span></a></div>
			<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a href="#" title="Next"><span>Next</span></a></div>
				<div class="sliderkit-panels">
					<?php
					$xml = file_get_contents('https://api.twitter.com/1/statuses/user_timeline/felixsiauw.xml');
					$e_xml = new SimpleXMLElement($xml);
					$jmlTweet = $e_xml->status->count();
					for ($i=0;$i<$jmlTweet;$i++){
						echo "
						<div class=\"sliderkit-panel\">
							<h3 style=\"margin-bottom:10px;\"><a href=\"https://twitter.com/" . $e_xml->status->user->screen_name . "\">@" . $e_xml->status->user->screen_name . " - " . $e_xml->status->user->name . "</a></h3>
							<div style=\"float:left;width:20%;\">
								<img style=\"border:1px solid;\" width=\"100%\" src=" . $e_xml->status->user->profile_image_url . ">
							</div>
							<div style=\"float:right;width:77%;/*text-shadow: yellow 0.2em 0.2em 0.3em;*/text-align:justify\">
								" . $e_xml->status[$i]->text . "
							</div>
							<div style=\"clear:both\"></div>
						</div>
						";
					}		
					?>
				</div>
		</div>
	<!-- // end of contentslider-std -->
	</body>
</html>

Jadi data yang ditampilkan dalam xml kita ambil berdasarkan elemen elemennya

nama lengkap : status->user->name

user : status->user->screen_name

profile picture : status->user->profile_image_url

tweet : status->text

tampilan hasilnya seperti ini :

tampilan Tweet Slider dengan PHP dan jQuery

tampilan Tweet Slider dengan PHP dan jQuery

untuk scriptnya, bisa download disini

slidekit : http://www.kyrielles.net/sliderkit

2 thoughts on ““Tweet Slider” dengan PHP dan jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s