TYPO3: Twitter-Timeline einbinden

Machen Sie auf Ihrer Website auf die neuesten News Ihres Twitter-Accounts aufmerksam und binden eine Twitter-Timeline ein.

Der Kurznachrichtendienst Twitter bringt Informationen auf den Punkt. Wenn Sie selbst einen Twitter-Account betreiben und regelmäßig über Neuigkeiten aus Ihrem Unternehmen oder der Branche berichten, können Sie damit auch Ihre Website bereichern. Durch das Einfügen einer Twitter-Timeline, erscheinen Ihre letzten Tweets auch auf Ihrer Web-Präsenz. Somit zeigen Sie den Besuchern nicht nur, dass Sie erfolgreich verschiedene Kanäle bedienen, sondern machen auch gleichzeitig Werbung für Ihren Twitter-Account.

Für das Einfügen mit Hilfe von Java wird zunächst die Position der Timeline auf der Website mit diesen zusätzlichen Codezeilen festgelegt:

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/TWITTER_ACCOUNT.json?count=2&callback=?',
 function(tweets){
            $("#twitter-blog").html(tz_format_twitter(tweets));
        }); });
</script>
)

Über CSS legen Sie nun das Design Ihrer Timeline fest:

#twitter-blog{margin-top:40px}
#twitter-blog li{margin:0 0 40px 0;padding:0 0 0 50px;background: line-height:40px}
#twitter-blog li:last-child{margin-bottom:0}
#twitter-blog a { color:#33ccff;}
#twitter-blog b a{color:#33ccff;font-weight:300}

Nun legen Sie eine neue js-Datei an, um die Tweets regelmäßig auf Ihre Website zu laden. Der Datei-Inhalt sollte wie folgt lauten:

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 + (relativ
e_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';
  }
}