Anzeige der letzten Tweets auf einer Webseite

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 Smilie: :-)

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
<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

Werbung

WordPress SEO Plugin

Über H.-Peter Pfeufer

Ich bin Webentwickler/ -programmierer aus Leidenschaft, WordPressbegeistert und ab und an auch mal ein netter Mensch.
Vor allen schreibe ich über alles was mit den Themen Webentwicklung/ -programmierung und WordPress zu tun hat. Nebenher auch mal einige Gedanken zu allgemeineren Themen.

Kategorie(n): JavaScript, jQuery
Tags: , ,
Setze ein Lesezeichen auf den Permalink.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

 

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>