HowTo: Twitter in Homepage einbinden

Ich hab mal vor einige Zeit erwähnt, dass man Twitter auch ohne irgendwelche Plugins oder Tools, sondern einfach nur über ein kleines Script, in seine Homepage einbauen kann. Da ich Twitter nun selber auch so in meinen Blog eingebaut habe, werde ich euch einmal zeigen, wie ich das gemacht habe.

Der HTML Code

Da ich leider noch keine bessere Möglichkeit gefunden habe Code hier anzeigen zu lassen, werde ich ihn nur als Bild einfügen. Am Ende des Artikels gibt es dann noch eine Textdatei zum Download mit dem gesamten Code drin. Also hier der HTML Code: twitter_htmlUm das Bild größer zu sehen, müsst ihr auf das Bild klicken. Wie ihr seht, habe ich in dem Teil mit dem Script meinen Twitter namen “Ratze_” eingekreist. An dieser Stelle müsst ihr einfach euren eigenen Namen eingeben, ihr wollt ja sicherlich nicht meine Tweets einbauen :b In dem anderen Kreis, gebt ihr an, wie viele Tweets ihr anzeigen lassen wollt. Ich habe mich hier für einen entschieden. Damit erscheinen schon mal eure Tweets. Diese könnt ihr nun einfach noch mit ein bisschen CSS so aufstylen wie ihr wollt.

Der CSS Code

CSS

Ich habe es in meinem Fall so gelöst: Es gibt auch andere Möglichkeiten und es gibt vielleicht auch besser geschriebenes CSS aber es erfüllt seinen Zweck.

Das Ergebnis

tweet

Das Ergebnis könnt ihr auf der rechten Seite sehen. Falls ich das Design ändere und meine Twitter Updates nicht mehr rechts erscheinen, hier noch ein Bild: Hier noch der ganze Code zum einbauen von Twitter in die eigenen Homepage:

[html]<!———HTML———-></pre>
<div class="lasttweet">
<h1>Letzter Tweet:</h1>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ratze_.json?callback=twitterCallback2&count=30&include_rts=1"></script></div>
<pre>/* CSS */
.lasttweet h1{
font-size:22px;
padding-left:15px;
padding-top: 20px;
}
.lasttweet ul {list-style:none;}
.lasttweet a {
display:block;
margin-top:10px;
text-decoration:none;
color:#009FBF;
}
[/html]

Oder hier noch eine Textdaten mit dem ganzen Code drin: Klick

Update 11.08.2011:

Dank des Kommentares von Volllg“s ist es jetzt auch noch möglich, die Zeitangaben auf deutsch umzustellen. Anstatt die blogger.js von Twitter.com einzubinden, erstellt ihr einfach eine eigene. In dieser Datei muss folgender Code stehen:
[javascript]
function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\]*[^.,;’">\:\s\\)\]\!])/g, function(url) {
return ‚<a href="’+url+’">’+url+’</a>‘;
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+’<a href="http://twitter.com/’+reply.substring(1)+’">’+reply.substring(1)+’</a>‘;
});
statusHTML.push(‚</pre>
<ul>
<li><span>’+status+’</span> <a style="font-size: 85%;" href="http://twitter.com/’+username+’/statuses/’+twitters[i].id_str+’">’+relative_time(twitters[i].created_at)+’</a></li>
</ul>
<pre>‘);
}
document.getElementById(‚twitter_update_list‘).innerHTML = statusHTML.join(“);
}

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);

if (delta < 60) {
return ‚vor weniger als einer Minute‘;
} else if(delta < 120) {
return ‚vor etwa einer Minute‘;
} else if(delta < (60*60)) {
return ‚vor ‚ + (parseInt(delta / 60)).toString() + ‚ Minuten‘;
} else if(delta < (120*60)) {
return ‚vor etwa einer Stunde‘;
} else if(delta < (24*60*60)) {
return ‚vor etwa ‚ + (parseInt(delta / 3600)).toString() + ‚ Stunden‘;
} else if(delta < (48*60*60)) {
return ‚vor einem Tag‘;
} else {
return ‚vor ‚(parseInt(delta / 86400)).toString() + ‚ Tagen‘;
}
}
[/javascript]

Die letzten Zeilen sind für die Zeitangaben zuständig. Diese habe ich nun ins deutsche geändert. Wie es auf deutsch aussieht, wenn ihr alles eingebunden habt, könnt ihr in meiner Sidebar sehen. Meine blogger.js könnt ihr hier runterladen und in eure Website über diese Codezeile einbinden:

[html]
<script type="text/javascript" src="blogger.js"></script>
[/html]

Vielen Dank für den Hinweis! 🙂 Hat euch der Artikel geholfen? Wie bindet ihr bei euch Twitter ein?

Update 17.10.2012

Twitter hat etwas an der API geändert und somit diesen Code unbrauchbar gemacht. :-/ Leider kann ich nicht schnell einen ähnlich Code zur Verfügung stellen. Wenn ihr eure Tweets weiterhin in eure Seite einbinden wollt, dann solltet ihr euch über Twitter.com eine Box erstellen können, in denen eure Tweets zu sehen sind. Unten könnt ihr ein Beispiel davon sehen. Bei der Erstellung müsst ihr dringend darauf achten, dass ihr bei der Domain die exakte Domain angebt. www.ratze.eu hat bei mir nicht funktioniert, ratze.eu hingegen schon.

Ich hoffe es bereitet euch nicht zu viele Unannehmlichkeiten. Wenn ich wieder brauchbaren Code habe, werde ich mich hier wieder zurück melden. Hier ist noch der Link zur Twitter API, falls sich einer von euch selber damit beschäftigen möchte.


Ratze.eu