Twitter Feed

Add live twitter streams to your web pages. Just copy code + enter your twitter username!

CSS/JS files (add code to <HEAD> section):


<!-- DC Twitter CSS -->
<link href="dreamcodes/twitter_tweet/jquery.tweet.css" rel="stylesheet">

<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

<!-- DC Twitter JS -->
<script src="dreamcodes/twitter_tweet/jquery.tweet.js" charset="utf-8"></script>

News Ticker Feed

Display one tweet at a time like a news ticker from twitter user "microsoft"

View code:


<!-- DC Twitter Settings -->
<script type="text/javascript">
jQuery(function ($) {
    $("#ticker").tweet({
        username: "microsoft", // define your twitter username
        page: 1,
        avatar_size: 32, // avatar size in px
        count: 20, // how many tweets to show
        loading_text: "loading ..."
    }).bind("loaded", function () {
        var ul = $(this).find(".tweet_list");
        var ticker = function () {
                setTimeout(function () {
                    ul.find('li:first').animate({
                        marginTop: '-4em'
                    }, 500, function () {
                        $(this).detach().appendTo(ul).removeAttr('style');
                    });
                    ticker();
                }, 4000); // duration before next tick (4000 = 4 secs)
            };
        ticker();
    });
});
</script>
<style type="text/css">
#ticker ul.tweet_list {
    height:4em;
    overflow-y:hidden;
}
#ticker .tweet_list li {
    height: 4em;
}
</style>

<!-- DC Twitter Start -->
<div id="ticker" class="query" style="width:80%;"></div>
<!-- DC Twitter End -->

Basic Twitter Feed

Display three latest tweets from twitter user "dreamtemplate"

View code:


<!-- DC Twitter Settings -->
<script type="text/javascript">
jQuery(function ($) {
    $(".tweet").tweet({
        username: "dreamtemplate", // define your twitter username
        avatar_size: 16, // avatar size in px
        count: 3, // how many tweets to show
        loading_text: "loading tweets..."
    });
});
</script>
<!-- DC Twitter Start -->
<div class="tweet query" style="width:80%;"></div>
<!-- DC Twitter End -->

Live Search Query Feed

Display five newest tweets based on query: "#Microsoft". Refresh feed every 60 seconds in real-time.
Query by text or #hash tag acceptable.

View code:


<!-- DC Twitter Settings -->
<script type="text/javascript">
jQuery(function ($) {
    $("#query").tweet({
        avatar_size: 16, // avatar size in px
        count: 5, // how many tweets to show
        query: "#microsoft", // search query
        loading_text: "searching twitter...",
        refresh_interval: 60 // seconds before next refresh
    });
});
</script>
<!-- DC Twitter Start -->
<div id="query" class="query" style="width:80%;"></div>
<!-- DC Twitter End -->

Multiple User Feed

Display ten newest tweets from two twitter users "microsoft" and "google"

View code:


<!-- DC Twitter Settings -->
<script type="text/javascript">
jQuery(function ($) {
    $("#fromtwo").tweet({
        avatar_size: 16, // avatar size in px
        count: 10, // how many tweets to show
        username: ["google", "microsoft"], // define twitter usernames
        loading_text: "searching twitter...",
    });
});
</script>
<!-- DC Twitter Start -->
<div id="fromtwo" class="query" style="width:80%;"></div>
<!-- DC Twitter End -->

Twitter Feed with Navigation Controls

Display latest tweets from user "microsoft". Enable forward/backward buttons.

View code:


<!-- DC Twitter Settings -->
<script type="text/javascript">
jQuery(function ($) {
    var options = {
        username: "microsoft", // define twitter usernames
        page: 1,
        avatar_size: 16, // avatar size in px
        count: 5, // how many tweets to show
        loading_text: "loading ..."
    };

    var widget = $("#paging .widget"),
        next = $("#paging .next"),
        prev = $("#paging .prev");

    var enable = function (el, yes) {
            yes ? $(el).removeAttr('disabled') : $(el).attr('disabled', true);
        };

    var stepClick = function (incr) {
            return function () {
                options.page = options.page + incr;
                enable(this, false);
                widget.tweet(options);
            };
        };

    next.bind("checkstate", function () {
        enable(this, widget.find("li").length == options.count)
    }).click(stepClick(1));

    prev.bind("checkstate", function () {
        enable(this, options.page > 1)
    }).click(stepClick(-1));

    widget.tweet(options).bind("loaded", function () {
        next.add(prev).trigger("checkstate");
    });
});
</script>
<!-- DC Twitter Start -->
<div id="paging">
    <div class="widget query" style="width:80%;"></div>
    <div class="controls">
        <button class="prev" type="button" disabled>←</button>
        <span class="pagenum"></span>
        <button class="next" type="button" disabled>→</button>
    </div>
</div>
<!-- DC Twitter End -->


Twitter Feed Features





© TemplateAccess