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
<div id="twitter">
    <h2>Latest Tweets</h2>
    <p>Um hier etwas mehr als nur die Aufforderung "<em>Follw me on <a href="http://twitter.com/twittername">Twitter</a></em>" zu sehen, würde ich Sie bitten, dass Sie JavaScript in Ihrem Browser aktivieren.</p>
</div>

Das wars dann schon.

Wie das Ganze dann aussieht, kann man sich auf meiner eigenen Webseite anschauen -> http://ppfeufer.de

Artikel / Seite weiterempfehlen

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>