Twitter Timeline in TYPO3

Twitter Timeline in TYPO3

• WAM
• TYPO3 Codeschnipsel
• Samstag - 4 . Mai . 2013

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.