Legutóbbi Tweetek a weboldaladon

11.11.03.Legutóbbi Tweetek a weboldaladon

Számos weboldalon találkozni olyan widgettel, amely a legutóbbi néhány tweet bejegyzését jeleníti meg az oldalnak, vagy az azt üzemeltető személynek, esetleg az oldal témájába vágó más személyekének. E szolgáltatás kivitelezésére több módszer is létezik, kezdve az egyszerűbbtől, a bonyolultabb PHP-s és AJAX-os megoldásokig. Ebben a rövid bejegyzésben a legegyszerűbbet fogom bemutatni, ami kis kreativitással nagyon jól is mutathat a weboldalunkon.

A design

Első lépésként tervezzük meg a widget designját a kedvenc képszerkesztő programunkban. Én ezt Photoshopban tettem meg, ahol az alábbi képet alkottam:

Lássuk a HTML kódunkat:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Legutóbbi Tweetek</title>
</head>
<body>
	<div id="twitter_div">
		<ul id="twitter_update_list"></ul>
		<a href="http://twitter.com/hwsw_" title="Twitter profil">
			...kövess te is!
		</a>
	</div>
	<script type="text/javascript" src="http://twitter.com/javascripts/
	blogger.js"></script>
	<script type="text/javascript" src="http://twitter.com/statuses/
	user_timeline/hwsw_.json?
	callback=twitterCallback2&count=1"></script>
</body>
</html>

Ennél egyszerűbb nem is lehetne, igaz? Szükség van egy DIV és egy UL elemre, amelyben a friss tweet, vagy tweetek fognak megjelenni listaként. Opcionálisan elhelyezhetünk benne egy linket is, amely a Twitter profilunkra mutat.
A lényeg a két JavaScript sor lesz, ahol az első a tweetek megjelenítését végzi, a második pedig az adott felhasználó tweetjeit kérdezi le. A felhasználót a .json előtti string fogja azonosítani, jelen példában a hwsw_, amellyel a hwsw.hu tweetjeit kérdezzük le. A count változó értékének megadásával a megjelenítendő tweetek számát tudjuk megadni.

Majd egy kis CSS formázás:

BODY {
	background: url('tweet_bg.jpg') no-repeat;
}

#twitter_div {
	width:160px;
	height:220px;
	margin:60px 0 0 290px;
	line-height:22px;
	text-align:center;
	font-family:"Comic Sans MS", cursive;
	font-size: 0.9em;
	color:#666;
}

#twitter_div UL {
	list-style: none;
	padding:0;
	margin:0;
}

#twitter_div UL LI {
	padding-bottom:10px;
	margin-bottom:10px;
}

#twitter_div a {
	color:#6fbcec;
	text-decoration:none;
}

#twitter_div a:hover {
	color:#2987c2;
}

Azt hiszem kár is lenne túlmagyaráznom a kódot, hisz mindenki másképp fogja megformázni a tweetek megjelenését. Én most Comic Sans betűkészlettel, szépen középre helyezve a szóbuborékban jelenítem meg a legutolsó tweetet.

És a végeredmény így néz ki:

A képre klikkelve meg tudjátok nézni működés közben is a példát. Aki inkább letöltené a forráskódot, amely mellé a PSD-t is mellékeltem, az itt szintén megteheti:

FájlLetöltveDátumMáret

Legutóbbi Tweetek2511.11.03.606.98 kB