19x bewertet

Twitternews

von Porzelaine  |  27.11.2009 um 19:39 h
Codeschnipsel
Typ: Codeschnipsel
Stufe:Einfach
Twitter ist ja bekanntlich der schnellste und einfachste Neugkeitenverbreiter den es zur Zeit gibt. Dieses Tutorial zeigt euch, wie man seine letzten Tweets in die eigene Homepage einbindet.

Dazu bindet man diesen Javascript-Codeschnipsel irgendwo vor </html> in der index-Datei ein. Damit es am wenigsten stört, am Besten ganz unten.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/DEINTWITTERHIER.json?callback=twitterCallback2&count=WIEVIEL"></script>

Ersetzten muss man:
DEINTWITTERHIER mit deinen Twitterusernamen/ erster Teil der URL
WIEVIEL mit einer Zahl, die Zahl gibt an, wieviele deiner letzten Tweets angezeigt werden.

Und den Code, der schlussendlich an der gewünschten Stelle die Tweets einfügt.
<div id="twitter_div"> <ul id="twitter_update_list"></ul> <a href="http://twitter.com/DEINTWITTERHIER" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a> </div>
Auch hier DEINTWITTERHIER wieder mit deinem Usernamen ersetzten. Am leichtesten mit div′s positionieren!

Dass die neusten Tweets auch schön aussehen, lassen sie sich ganz einfach im CSS stylen (in der <style>-section oder im style.css...
Aber Twitternews lassen sich nicht mit eigenen Definitionen stylen.
Hier ein Beispiel von FR34K:

#twitter_update_list li { list-style-type: none; padding: 3px; border-bottom:1px dotted #CCCCCC; } #twitter_update_list li a { color: #719F6C; text-decoration:none; } #twitter_update_list li a:hover { color: #9BC67A; tex

Noch eine süße Idee, seine Tweets aufzupimpen:
Bild
(Tweets in die Sprechblase)

Falls ihr eine Fehlermeldung wie CHRI$ bekommt, dass ihr zuerst eure Logindaten angeben müsst, bevor ihr die News sehen könnt, dan ist euer Account auf privat eingestellt. Damit jeder eure Tweets dann auch auf eurer Seite lsen kann, müsst ihr es auf öffentlich stellen ;)



18 Kommentare




charming_junkie

6 Sternchen : )
am 27.11.2009 um 21:02 Uhr


Kaley

Kann man nicht viel falsch machen :)
am 28.11.2009 um 00:03 Uhr


Nobi

wunderbar :)
am 28.11.2009 um 00:06 Uhr


jeffreecyde

toooll<3
am 28.11.2009 um 01:17 Uhr


Samiko

Tolles Tutorial! Gibt′s auch 6 Sterne von mir. ;)
am 28.11.2009 um 09:48 Uhr


Fr34k

Vielleicht solltest du noch ergänzen, wie man dann mittels CSS auch die Darstellung der Tweets verändern kann.


/* Twitter ------------------------------------------------------------------- */
#twitter_update_list li
{
list-style-type: none;
padding: 3px;
border-bottom:1px dotted #CCCCCC;
}

#twitter_update_list li a
{
color: #719F6C;
text-decoration:none;
}

#twitter_update_list li a:hover
{
color: #9BC67A;
text-decoration:underline;
}


So sieht das bei mir aus... (Unten in der Navi)
am 28.11.2009 um 10:14 Uhr


Fr34k

Ach so, den Twitter Code hab ich so angepasst:

<div id="twitter_update_list"></div>
<a href="http://twitter.com/DEINTWITTERNAME" id="twitter-link" style="display:block;text-align:right;">» Follow me on Twitter</a>
am 28.11.2009 um 10:17 Uhr


SmaX

Cool! 6P!
am 28.11.2009 um 11:58 Uhr


Porzelaine

wow, dankeschön für das tolle feedback <3
hätt′ ich nicht erwartet...
am 28.11.2009 um 15:10 Uhr


Fr34k

ah cool :) Das mit dem Tweety ist ja süß *g*
am 29.11.2009 um 10:26 Uhr


DJaneMauzi

Danke für dieses tollen Tut. =) Nur findsch es en bissle doof, das die CCS.Datei nicht wirklich weiter erklärt wurden. =/ Oder wie man den Hintergeund einbaut. Ich habe es zwar jetzt hinbekommen. Aber ein totaler Anfänger könnte, damit nicht wirklich was anfangen. =) Aber ansonsten ist das eigentlich ganz toll gemacht. ˆ-ˆ Und der Tweet ist auch ganz süß *Q*
am 05.12.2009 um 00:04 Uhr


Sadako

danke <3
oh gott das vögelchen is so süß Smilie
am 08.12.2009 um 21:58 Uhr


boukevard

sehr süß. danke
am 02.01.2010 um 14:02 Uhr


Chri$

Hallo, wollte das Ganze eben bei mir einbauen allerdings öffnet sich bei mir, wenn die Seite läd, ein Fenster wo ich meine Twitterdaten angeben muss Smilie erst dann zeigt er mir die Tweets an. Habe eben alles auch noch mal mit Freaks Seite verglichen.. Sehe jetzt nicht, wo bei mir ein Unterschied sein soll (außer, dass ich die blogger.js aufm eigenen Server habe..) Hier kann man schauen: klick (bitte die Baustelle ignorieren xD)
am 09.01.2010 um 11:47 Uhr


Chri$

OK - hat sich erledigt. Es ist eigentlich ziemlich logisch (xD) - wenn man den Account auf privat stellt, muss man sich erst einloggen, um die Tweets sehen zu können. Da hat klein Chris nicht dran gedacht >>′ Naja. Könnte man ja vll für Vollchecker wie mich im Tut noch erwähnen xD
am 09.01.2010 um 12:29 Uhr


Porzelaine

oh gott sorry XD
Ich hab gar nicht gesehn dass du was geschrieben hast, aber gut dass das jetzt klappt :)
Ich schreibs dazuˆˆ
am 10.01.2010 um 13:24 Uhr


llarca

das tut is echt gut gemacht :) und bei mir klapps wunderbar.
am 22.01.2010 um 13:24 Uhr


SheGoesPanic

6 Sternis, toll erklärt & danke. :)
am 29.01.2010 um 12:07 Uhr