Tweets per JS einbinden

Einbinden der JavaScript und CSS Dateien


page {
  # JS Lib einbinden
  includeJSlibs {
    twitter = http://platform.twitter.com/widgets.js
    twitter.external = 1
  }
  # Lokales CSS
  includeCSS.twitter = pfad-zu-datei/twitter.css
  # Lokales JS
  includeJSFooter.twitter = pfad-zu-datei/twitter.js
}

# oder JS Lib per html
<script src="//platform.twitter.com/widgets.js"></script>

Einbinden der JavaScript und CSS Dateien

Lokale CSS Datei (twitter.css)


#tweet {
	width: 430px;
	min-height: 80px;
	border: 1px solid #F5F5F5;
	padding: 5px;
	margin-top: 2em;
}

#tweet a.profil {
	float: left;
}

#tweet .content {
	margin-left: 60px;
}

#tweet h3,
#tweet p,
#tweet span {
	margin: 0;
	padding: 0;
}

#tweet p {
	font-size: 0.9em;
}

#tweet span {
	font-size: 10px;
	color: #ccc;
	display: block;
	text-align: right;
	margin-top: 5px;
}

twitter.css

Lokale JS Datei (twitter.js)


jQuery(document).ready(function($){

  var theTweets = null;

  jQuery.ajax({
    /* URL mit Suchwort (typo3) und Anzahl (100) tweets */
    url: 'http://search.twitter.com/search.json?rpp=100&q=typo3',
    dataType: 'jsonp',
    success: function (data) {
      theTweets = data.results;

      setTimeout(function() {
        $('#tweet').fadeOut(200);
      }, 100);
    }
  });

  /* markieren deaktivieren*/
  $('#tweet').attr('unselectable', 'on');
  $('#tweet').css('MozUserSelect', 'none');
  $('#tweet').css('KhtmlUserSelect', 'none');

  /* zeit lassen zum einlesen der daten */
  setTimeout(function(){
    showTweet();
  },1000);

  function showTweet (){
    var max = theTweets.length;
    /* einen zufalls tweet anzeigen */
    var i = Math.floor(Math.random()*theTweets.length);
    var randomTweet = theTweets[i];
    /* url's im text ersetzen */
    var text = randomTweet.text.replace(/http:\/\/(\S+)/, "<a href=\"http://$1\">http://$1</a>");
    text = text.replace(/@(\S+)/, "<a href=\"http://twitter.com/$1\">@$1</a>");
    /* html aufbau */
    $('#tweet').html('<a class="profil" target="_blank" href="http://twitter.com/' + randomTweet.from_user + '"><img src="' + randomTweet.profile_image_url + '" width="50" height="50" border="0" /></a><div class="content"><h3><a  target="_blank" href="http://twitter.com/' + randomTweet.from_user + '"> ' + randomTweet.from_user_name + '</a></h3><p>' + text + ' <br /><span class="count">' + i + '/' + max +'</span></p></div>');
    /* anzeige effekt per jquery */
    $('#tweet').fadeIn(500);
    /* eine zufällige Link Farbe */
    $('#tweet a').css('color', 'rgb(' + Math.floor(Math.random()*255) + ',' + Math.floor(Math.random()*255) + ',' + Math.floor(Math.random()*255) + ')');

    setTimeout(function(){
      $('#tweet').hide();
      showTweet();
      /* wieder starten in ... */
    },20000);
  }

});


twitter.js

In TYPO3 ein HTML erstellen


<div id="tweet">tweets loading...</div>
HTML Element
tweets loading...