Loading...

Twitter Timeline in TYPO3 von WAM

Alles Rund um Webdesign, Seo und vielem mehr
Start / Blog - / Twitter Timeline in TYPO3

Twitter Timeline in TYPO3

4. Mai 2013  WAM 
Timelline

Die Twitter Timeline kann man in zwei Versionen in seine Typo3 Seite einbauen. Einmal die Version mit einem InlineFrame, die direkt auf Twitter unter Einstellungen / Widgets, zur Verfügung steht. Oder die über Java. Die Zweite Variante läuft auch bei uns auf der Seite.

Der Einbau läuft relativ simpel ab. Eigentlich müsst Ihr nur den JavaScript im Typo3 Setup übergeben. Wir haben es wie folgt gemacht:

Über einen Marker die Position des Widgets  festgelegt. Bei  uns marks.TWITT. Vergesst nicht diesen Marker auch in die Template Vorlage einzufügen.

1.TS-Setup:

marks.TWITT = HTML
marks.TWITT.value (
<ul id=“twitter-blog“></ul>
<script type=“text/javascript“>
jQuery(document).ready(function($){
$.getJSON(‚http://api.twitter.com/1/statuses/user_timeline/DEIN_TWITTER_NAME.json?count=2&callback=?‘, function(tweets){
$(„#twitter-blog“).html(tz_format_twitter(tweets));
}); });
</script>
)

WICHTIG: Ändert den User. Unter DEIN_TWITTER_NAME muss auch euer Twitter name stehen.

2.CSS

Bei der CSS könnt Ihr euch austoben. Macht es so wie es euch gefällt.

#twitter-blog{margin-top:20px}
#twitter-blog li{margin:0 0 20px 0;padding:0 0 0 25px;background: line-height:20px}
#twitter-blog li:last-child{margin-bottom:0}
#twitter-blog a { color:#f3f3f3;}
#twitter-blog b a{color:#f3f3f3;font-weight:400}

 

3. Twitter Script einfügen.

Legt euch dafür eine neue js-Datei an, oder packt den Code mit in eine Vorhandene.
Wichtig ist, hier das Ihr auch den jquery.min.js benötigt. Und Dieser als erstes geladen werden muss.

function tz_format_twitter(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; 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(‚<li><span>’+status+'</span> <br/><b><a href=“http://twitter.com/’+username+’/statuses/’+twitters[i].id_str+'“>’+relative_time(twitters[i].created_at)+'</a></b></li>‘);
}
return 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 ‚less than a minute ago‘;
} else if(delta < 120) {
return ‚about a minute ago‘;
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ‚ minutes ago‘;
} else if(delta < (120*60)) {
return ‚about an hour ago‘;
} else if(delta < (24*60*60)) {
return ‚about ‚ + (parseInt(delta / 3600)).toString() + ‚ hours ago‘;
} else if(delta < (48*60*60)) {
return ‚1 day ago‘;
} else {
return (parseInt(delta / 86400)).toString() + ‚ days ago‘;
}
}

Fertig ist die Twitter Timeline.

TIP: setzt die js-Scripte in den Header.

Geschrieben von WAM
Avatar for WAM
Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Lassen Sie uns Sprechen