Twitter requires that the user authorizes us to pull their timeline. The way we do that is by sending the client to the "Twitter Authorization URL" found in their site details in the Perpetua Console. Following that URL will send the client to a Twitter page that will have them login if they aren't already, and then say that they authorize our PerpetuaCMS app. Once they do that their site is ready to show their Twitter Feed using one of the following methods.

This will set up a standard rotator that will rotate through the available tweets.

<div id="twitterContainer">
    <div class="twitterRotator">
        <div class="twitterRotatorWindow">
            <cfif StructKeyExists(Application, "TwitterCache")>
                <cfloop array="#request.twitter_timeline#" index="request.tweet_info">
                    <div>
                        <cfoutput>
                            <span>#request.tweet_info.text#</span>
                            <a href="#request.tweet_info.tweet_url#" class="tweet-time-ago">#request.tweet_info.datetime#</a>
                        </cfoutput>
                    </div>
                </cfloop>
            </cfif>
        </div>
        <ul class="twitterRotatorNavigation"><cfif StructKeyExists(Application, "TwitterCache")><cfloop array="#request.twitter_timeline#" index="request.tweet_info"><li></li></cfloop></cfif></ul>
        <div class="twitterRotatorDescriptions"><cfif StructKeyExists(Application, "TwitterCache")><cfloop array="#request.twitter_timeline#" index="request.tweet_info"><div></div></cfloop></cfif></div>
    </div>
</div>
<!--- END TWITTER --->

<script type="text/javascript">
    function relative_time(time_value) {
        var values = time_value.split(" ");
        time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
        var parsed_date = Date.parse(time_value);
        var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
        var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
        delta = delta + (relative_to.getTimezoneOffset() * 60);
        
        if (delta < 60) {
            return 'less than a minute ago';
        } else if(delta < 120) {
            return 'about a minute ago';
        } else if(delta < (60*60)) {
            return (parseInt(delta / 60)).toString() + ' minutes ago';
        } else if(delta < (120*60)) {
            return 'about an hour ago';
        } else if(delta < (24*60*60)) {
            return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
        } else if(delta < (48*60*60)) {
            return '1 day ago';
        } else {
            return (parseInt(delta / 86400)).toString() + ' days ago';
        }
    }

    $$(".tweet-time-ago").each(function(tta) {
        tta.update(relative_time(tta.innerHTML));
    });
</script>

<script type="text/javascript">
    document.observe("dom:loaded", function() {
        new perpetuacms.eventbox($("twitterContainer").down(".twitterRotator"), {
            type: "slide_vertical",
            delay: 5000,
            duration: 1.0
        });
    });
</script>

This will allow you to specify how many tweets that are displayed on the page. Set the orange variable below (request.tweets_to_show) to the number desired.

<ul id="twitter_update_list">
    <cfif StructKeyExists(Application, "TwitterCache")>
        <cfset request.tweets_to_show = 1>
        <cfif request.tweets_to_show GT ArrayLen(request.twitter_timeline)>
            <cfset request.tweets_to_show = ArrayLen(request.twitter_timeline)>
        </cfif>
        <cfloop from="1" to="#val(request.tweets_to_show)#" index="i">
            <cfset request.tweet_info = request.twitter_timeline[i]>
            <cfoutput>
                <li>
                    <span>#request.tweet_info.text#</span>
                    <a href="#request.tweet_info.tweet_url#" class="tweet-time-ago">#request.tweet_info.datetime#</a>
                </li>
            </cfoutput>
        </cfloop>
    </cfif>
</ul>

<script type="text/javascript">
    function relative_time(time_value) {
        var values = time_value.split(" ");
        time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
        var parsed_date = Date.parse(time_value);
        var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
        var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
        delta = delta + (relative_to.getTimezoneOffset() * 60);
        
        if (delta < 60) {
            return 'less than a minute ago';
        } else if(delta < 120) {
            return 'about a minute ago';
        } else if(delta < (60*60)) {
            return (parseInt(delta / 60)).toString() + ' minutes ago';
        } else if(delta < (120*60)) {
            return 'about an hour ago';
        } else if(delta < (24*60*60)) {
            return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
        } else if(delta < (48*60*60)) {
            return '1 day ago';
        } else {
            return (parseInt(delta / 86400)).toString() + ' days ago';
        }
    }

    $$(".tweet-time-ago").each(function(tta) {
        tta.update(relative_time(tta.innerHTML));
    });
</script>