So etwas Ähnliches habe ich hier ja schon mal vorgestellt, nur ging es in diesem Artikel um die Anzeige der letzten Tweets in der WordPress-Sidebar mit einm Plugin Namens TweetView. Natürlich ist dies auch auf einer “normalen” Webseite möglich.
Wie komme ich jetzt auf dieses Thema? Ganz einfach, ich stolperte gerade über den Suchbegriff “letze tweets auf homepage” mit dem ein Besucher in meinem Blog landete. Also bedien ich diesen hiermit 
Alles was man dazu braucht, ist einerseits das jQuery-Framework, ein kleines Javascript, welches auf das Framework aufsetzt, etwas CSS und etwas HTML-Code. Aber ein nach dem Andern.
Das jQuery-Framework gibt es auf der projekteigenen Seite zum Download.
Das JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | (function($) { /* jquery.twitter.js v1.5 Last updated: 08 July 2009 Created by Damien du Toit http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter Licensed under a Creative Commons Attribution-Non-Commercial 3.0 Unported License http://creativecommons.org/licenses/by-nc/3.0/ */ $.fn.getTwitter = function(options) { $.fn.getTwitter.defaults = { userName: null, numTweets: 4, loaderText: "Loading tweets...", slideIn: true, slideDuration: 750, showHeading: true, headingText: "Latest Tweets", showProfileLink: true, showTimestamp: true }; var o = $.extend({}, $.fn.getTwitter.defaults, options); return this.each(function() { var c = $(this); // hide container element, remove alternative content, and add class c.hide().empty().addClass("twitted"); // add heading to container element if (o.showHeading) { c.append("<h2>"+o.headingText+"</h2>"); } // add twitter list to container element var twitterListHTML = "<ul id=\"twitter_update_list\"><li></li></ul>"; c.append(twitterListHTML); var tl = $("#twitter_update_list"); // hide twitter list tl.hide(); // add preLoader to container element var preLoaderHTML = $("<p class=\"preLoader\">"+o.loaderText+"</p>"); c.append(preLoaderHTML); // add Twitter profile link to container element if (o.showProfileLink) { var profileLinkHTML = "<p class=\"profileLink\"><a href=\"http://twitter.com/"+o.userName+"\">http://twitter.com/"+o.userName+"</a></p>"; c.append(profileLinkHTML); } // show container element c.show(); $.getScript("http://twitter.com/javascripts/blogger.js"); $.getScript("http://twitter.com/statuses/user_timeline/"+o.userName+".json?callback=twitterCallback2&count="+o.numTweets, function() { // remove preLoader from container element $(preLoaderHTML).remove(); // remove timestamp and move to title of list item if (!o.showTimestamp) { tl.find("li").each(function() { var timestampHTML = $(this).children("a"); var timestamp = timestampHTML.html(); timestampHTML.remove(); $(this).attr("title", timestamp); }); } // show twitter list if (o.slideIn) { // a fix for the jQuery slide effect // Hat-tip: http://blog.pengoworks.com/index.cfm/2009/4/21/Fixing-jQuerys-slideDown-effect-ie-Jumpy-Animation var tlHeight = tl.data("originalHeight"); // get the original height if (!tlHeight) { tlHeight = tl.show().height(); tl.data("originalHeight", tlHeight); tl.hide().css({height: 0}); } tl.show().animate({height: tlHeight}, o.slideDuration); } else { tl.show(); } // add unique class to first list item tl.find("li:first").addClass("firstTweet"); // add unique class to last list item tl.find("li:last").addClass("lastTweet"); }); }); }; })(jQuery); // Twitter initialisieren. jQuery(document).ready(function() { $("#twitter").getTwitter({ userName: "", // Hier den Twitternamen eintragen numTweets: 5, loaderText: "Loading tweets...", slideIn: true, slideDuration: 750, showHeading: true, headingText: "Latest Tweets", showProfileLink: true, showTimestamp: true }); }); |
Das CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @charset "utf-8"; #twitter {width:35%;float:right;} .twitted {/*width:16em;width:33%;float:right;*/margin-bottom:1.5em;margin-left:1.5em;text-align:left;/*border:1px solid #888;*/} .twitted h2 {/*margin:0;margin-bottom:0.5em;padding:0.3em 0.8em;font-size:1em;color:#fff;background-color:#888;*/} .twitted p.preLoader {margin:0;padding:1em 1em 1em 3em;background:transparent url("jquery.twitter.loader.gif") 1em center no-repeat;/* generate your own loader gif: http://www.ajaxload.info */} .twitted ul#twitter_update_list {margin:0;/*padding:0 0.8em;*/list-style-type:none;} .twitted ul#twitter_update_list li {margin:0;padding:0.5em 0 0.5em 0;border-bottom:1px solid #ccc;} .twitted ul#twitter_update_list li span {/*tweet content*/display:block; word-wrap: break-word;} .twitted ul#twitter_update_list li span a {/*links in tweet content*/color:#053;} .twitted ul#twitter_update_list li a {/*timestamp link*/color:#000;} .twitted ul#twitter_update_list li.firstTweet {} .twitted ul#twitter_update_list li.lastTweet {border-bottom:none;} .twitted p.profileLink {display:block;margin:0;margin-top:0.5em;/*padding:0.3em 1em;*/color:#fff;/*background-color:#ddd;*/} |
Der HTML-Code
1 2 3 4 |
Das wars dann schon.
Wie das Ganze dann aussieht, kann man sich auf meiner eigenen Webseite anschauen -> http://ppfeufer.de


