Izvor hdonweb

Twitter Status Updates Na Vlastitoj Internet Stranici

Ivan Mišić
12.12.2009
0 Komentara
Tweet
Internet, Programski jezici | css, JavaScript, php, Twitter

Od gomile gotovih dostupnih widgeta/pluginova ponekad je lakše odvojiti malo svog vremena i napraviti vlastiti dizajn za stari način prikazivanja tweetova putem njihovih JavaSkripti i custom CSS-a.

Osim Twitter Profile Widgeta o kojem ću kasnije, pokazat ću vam kako korištenjem JavaSkripti i CSS-a možete napraviti vlastiti dizajn za prikazivanje zadnje objavljenog posta na Twitteru. Primjer ću raditi na vlastitom Twitter profilu, a niže na slici možete vidjeti što ćemo u konačnici dobiti.

HTML kod bez kojeg to neće raditi je:

<div id="twitter"></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"><!--mce:0--></script>
<script src="http://twitter.com/statuses/user_timeline/hdonweb.json?callback=twitterCallback2&amp;count=1" type="text/javascript"><!--mce:1--></script>

Osim toga ja sam dodao još jednu liniju koda sa linkom na Twitter profil <h1><a href=”http://twitter.com/hdonweb”>@hdonweb</a></h1>.

<div id="twitter">
<h1><a href="http://twitter.com/hdonweb">@hdonweb</a></h1>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"><!--mce:2--></script>
<script src="http://twitter.com/statuses/user_timeline/hdonweb.json?callback=twitterCallback2&amp;count=1" type="text/javascript"><!--mce:3--></script>

Ono što morate napraviti je umjesto “hdonweb” upisati vaš Twitter user “…user_timeline/hdonweb.json?callback…”, a brojka na kraju označava koliko će se updatea prikazati “callback=twitterCallback2&count=1“.

Na ovom koraku ste postigli da se zadnji Twitter Status Update prikazuje kada pokrenete datoteku gdje ste kod smjestili.

No bez CSS stilova izgleda nepregledno, stoga sam vam pripremio CSS kod s dijelovima CSS 3:

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {border:0;margin:0;padding:0}
body {background-color:#F3F3F3; text-shadow:1px 1px 1px #fff}
#twitter {width: 300px; margin: 150px auto;background-color:#F8F8F8;border: 1px solid #CDCDCD;border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;-moz-box-shadow:0 0 25px #ccc;-webkit-box-shadow:0 0 25px #ccc; -moz-border-radius:10px; -webkit-border-radius:10px}
#twitter h1 a {display: block; border-top: 1px solid #fff; margin: 0 0 15px 0;font: 40px "Myriad Pro",Myriad,Helvetica,Arial,sans-serif;color:#000;text-decoration:
none;background-color:#DCDCDC;text-align:center;-moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px}
#twitter h1 a:hover {color: #1980D9}
#twitter ul {list-style: none; padding: 0 0 0 90px;background: url(twitter.png) 10px 0 no-repeat}
#twitter ul li {padding: 0 10px 10px 0}
#twitter ul li a {font: italic 14px Georgia, Times, Serif;color: #999;text-decoration: none}
#twitter ul li a:hover {text-decoration: underline}
#twitter ul li span {font: 16px Helvetica, Arial, Sans-Serif; color: #555}
#twitter ul li span a {font: 16px Helvetica, Arial, Sans-Serif;color: #1980D9}

Sjene i zaobljeni rubovi su rezultat CSS 3, stoga za pravilan prikaz morate imati Internet preglednik koji ga podržava (Google Chrome, Firefox 3.5+)

A kako to sve skupa izgleda pogledajte:

Demo | Download demo: Twitter Status Updates (332)

QR kod za Twitter Status Updates Na Vlastitoj Internet Stranici

Povezani postovi

« Web Hosting što, kako, zašto?

500+ Božićnih Ikona za vaš web »

Tutorijali @ HelpDesk on WEB

Twitter Status Updates Na Vlastitoj Internet Stranici

Povezani postovi

Komentirajte tutorijal

Stranice

Svakako posjetite