Twitter On Paper

Airlines Montly Twitter Report

The Path to 10 Billion Tweets

What do Twitter users Love (And Hate) the Most?

Which States Twitter the Most

Twitter vs Facebook

Twitter’s Meteoric Rise

If You Printed Twitter …

The History of Twitter’s Valuation

Twitter Facts & Figures

The Twitter Biotch

A Year of Twitter

The Four Stages Of Getting Twitter

Why You Can’t Ignore Twitter

Top 10 Most Retweeted Twitter Users

Facebook vs Twitter

The journey of a tweet

Top Twitter Apps

5 Scientifically Proven Ways to Get More Followers

Is Twitter losing its tweet-factor?

The Story (so far) of Twitter

Twitter’s Most Influential Users

What Color Is Twitter?

Twitter PR Strategy

The Twitterverse

What Are People Saying on Twitter About Facebook

Why Do We Follow Company On Twitter

Who’s Using Twitter And How They’re Using It

SMS Vs Email Vs Twitter

15 Most Popular Twitter Clients

Timeline: Le Twitter Hack

He Tweeted, She Tweeted: Men vs. Women On Twitter

Inside the Political Twittersphere

Twitter Malware Through Time

How Airlines Use Twitter

If Twitter Community 100 People

Twitter By The Numbers

A Day In Life Of Twitter Spambot

Twitter Overview

Top Super Bowl Ads on Twitter

The Oscars, On Twitter

Curate your Knowledge with Twitter

Twitter Infographic

Barclays Premier League Tweet Map

Design Blogs by Twitter Followers

This example only created for smartphone resolution, and very simple single twitter search without pagination or load more function, and to fetch data twitter server here is using PHP.

View Demo | Download Source

(use mobile webkit browser to see demo)

Sencha Touch Code

The Sencha Touch code consist of four panel component one for main component, one for top toolbar, this panel not doing nothing but just showing application title, one for search textfield and button, and the last one for displaying search result

Ext.setup({
    onReady: function() {
        var topToolbar = new Ext.Toolbar({
            dock : 'top',
            ui: 'dark',
            title: 'Sencha Twitter Search'
        });

         var tpl = new Ext.XTemplate(
            '<div id="tweet_container">',
                '<tpl for=".">',
                    '<div class="tweet_data">',
                    '<div class="tweet_avatar">',
                        '<img width="30" height="30" src="{profile_image_url}"/>',
                    '</div>',
                    '<div class="tweet_content">',
                        '<a class="user" href="http://twitter.com/{from_user}">{from_user}</a>&nbsp;',
                        '{text}',
                    '</div>',
                    '<div class="clear"></div>',
                    '</div>',
                '</tpl>',
            '</div>'
         );

        var resultPanel = new Ext.Panel({
            layout: 'fit',
            style: 'padding-bottom: 10px;',
            tpl: tpl
        });

        var searchPanel = new Ext.Panel({
            padding: 10,
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                flex: 4,
                xtype: 'textfield',
                style: 'margin-right: 10px;',
                id: 'textquery'
            },{
                flex: 2,
                xtype: 'button',
                text: 'Search',
                handler: function() {
                    var query = Ext.getCmp("textquery").getValue();
                    Ext.Ajax.request({
                        url: 'index.php?act=search&q='+query,
                        success: function(e) {
                            var obj = Ext.util.JSON.decode(e.responseText);
                            var msg = obj.results;
                            var html = tpl.apply(msg);
                            resultPanel.update(html);
                        }
                    });
                }
            }]
        });

        var myPanel = new Ext.Panel({
            dockedItems: [topToolbar],
            items: [searchPanel, resultPanel],
            scroll: 'vertical',
            style: 'background: #DDEEF6;',
            fullscreen : true
        });
    }
});

The result panel using XTemplate to displaying search result, and remember to set the config layout value to ‘fit’ , so it can be scrollable.

PHP Code

The PHP code fetch the search result as a JSON format, this is only using twitter search api, so we don’t need to register for using this api, here is the link to know more about twitter search api, in case you wanna know about other parameter or getting as other format.

if (isset($_GET["act"]) && $_GET["act"] == "search") {
    $url = 'http://search.twitter.com/search.json?q='.$_GET["q"];

    $content = file_get_contents($url);
    $array = json_decode($content);

    $data = array();

    foreach ($array->results as $var => $value)
    {
        // adding url
        $pattern = '/\b(https?:\/\/[-A-Z0-9+&@#\/%?=~_|$!:,.;]*[A-Z0-9+&@#\/%=~_|$])/i';
        preg_match_all($pattern, $value->text, $regs);
        $loop = count($regs[0]);

        for ($i = 0; $i < $loop; $i++) {
            $value->text = str_replace($regs[0][$i], '<a class="outlink" href="'.$regs[0][$i].'">'.$regs[0][$i].'</a>', $value->text);
        }

        $data[] = array(
            "profile_image_url" => $value->profile_image_url,
            "from_user"         => $value->from_user,
            "text"              => $value->text
        );
    }

    $out = array(
        "success" => true,
        "results" => $data
    );

    echo json_encode($out);
    exit;
}

In PHP code there are a regex function I get from phpfreak to check whether the tweets contain some url, if yes it will change directly to html link element. Last this are the screen example, if you want to see the demo, better using your iphone, android smartphone or using the android emulator, cause I’m not creating condition for desktop browser or tablet.

View Demo | Download Source

Status.net

- StatusNet is the open source microblogging platform that helps you share and connect in real-time within your own domain. With StatusNet you can encourage collaboration, build and engage your community, and be in command of your brand. -

I think this is the most promising twitter clone based PHP right now, running very smooth on my localhost, without problem, it has many great feature like twitter has and quite nice default design and it is free but if you want to take it to the enterprise level, they provide some service too.

Jisko

- Since Jisko is a microblogging system that lets you share short messages between your network of friends, it can help you and your company improving the internal organization between departments or even among employees. -

Floopo

- Floopo enables you to create a micro blog (or what some would call  a twitter clone) in just minutes. It comes with all the features you would expect but also includes some very cool features. For more details on the full list of feature see Micro blog features. -

This project development seems stopping, don’t know, but still good to try, and you need ionCube PHP installed on your server.

Noserub

- NoseRub only defines the social network and some basic content types like media, links, micropublishing and text. You can add all your contacts to a NoseRub network and aggregate several social networks into just one. And you always have full control of your data, as you can install NoseRub on your own server and have it connect to other servers out there. -

Noserub mix all the web feeds all around the net, which mean it can connects to your favorite social media site, but it’s like the development stop for a while. The script is based on old CakePHP version, the PHP 5.3 version won’t work well, just downgrade your PHP to 5.2 to try it.

Sharetronix Personal

- Sharetronix is the world’s favorite opensource microblogging platform -

Sharetronix looks promising cause there a company backed up this project but it seems you only can use it for free if you are using in personal project, not for commercial.

Pagecookery

The project in is japanese language but still work when i’m installing.

First is the get-tweets.php, is to fecth the latest tweets using Twitter API, you can se on the code below the $username variable is dynamic which means it will be input by users (it will explained on the next step) and this PHP script returned as the XML document.

<?php

$username = $_GET['username'];

$twitterHost = "http://twitter.com/statuses/user_timeline/".$username.".xml?count=10";

$curl = curl_init();

curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
curl_setopt($curl, CURLOPT_URL, $twitterHost);

$result = curl_exec($curl);
curl_close($curl);

header('Content-Type: application/xml; charset=ISO-8859-1');

print $result;

?>

And second is the ExtJS code, just put it inside your HTML code (my filename is index.html) and always to include the required ExtJS file (ext-all.css, ext-base.js, and ext-all.js). Because the PHP script returned as XML, so we have to catch with ExtJS XMLReader, and the tweets will be showed after the users insert a twitter username and push the button, so we create FormPanel component to catch the value from the users, here’s the code

<script type="text/javascript">
Ext.onReady(function(){
    var proxyTweets = new Ext.data.HttpProxy({
        url: 'get-tweets.php?username=mashable'
    });

    var strTweets = new Ext.data.Store({
        proxy: proxyTweets,
        reader: new Ext.data.XmlReader({
            record: 'status'
        }, [
            'text'
        ]),
        listeners: {
            'beforeload': function() {
                Ext.getCmp('twitter_username').setDisabled(true);
                Ext.getCmp('btnGetTweets').setDisabled(true);
            },
            'datachanged': function() {
                Ext.getCmp('twitter_username').setDisabled(false);
                Ext.getCmp('btnGetTweets').setDisabled(false);
            }
        }
    });

    var tplTweets = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="tweetbox">{text}</div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    );
    var dataTweets = new Ext.DataView({
        autoScroll: true, store: strTweets, tpl: tplTweets,
        autoHeight: false, height: 265,
        multiSelect: true, itemSelector: 'div.thumb-wrap',
        emptyText: 'No tweets to display',
        style: 'border:1px solid #99BBE8;background:#fff;'
    });
    var panelTop = new Ext.FormPanel({
        title: 'Enter Twitter Username', width: 400,
        renderTo: 'top', buttonAlign: 'center',
        labelWidth: 150, fileUpload: true,
        frame: true, style: 'margin: 0 auto;',
        id: 'panelTop',
        items: [{
            xtype: 'textfield',
            emptyText: '',
            fieldLabel: 'Twitter Username',
            buttonText: 'Select a File',
            width: 230,
            id: 'twitter_username'
        }],
        buttons: [{
            id: 'btnGetTweets',
            text: 'Latest Tweets',
            handler: getTweets
        }],
        keys: [{
            key: [Ext.EventObject.ENTER], handler: getTweets
        }]
    });

    function getTweets() {
        var u = Ext.getCmp('twitter_username').getValue();
        proxyTweets.setUrl('get-tweets.php?username=' + u, false);
        strTweets.load();
        Ext.getCmp('panelBottom').setTitle('Latest Tweets From ' + u);
    }

    var panelBottom = new Ext.Panel({
        title: 'Latest Tweets', frame: true, width: 400,
        height: 300, id: 'panelBottom', style: 'margin: 0 auto;',
        renderTo: 'bottom', items: [dataTweets]
    });
});
</script>

And the last is the simple HTML tag to be ExtJS Panel Container

<body>
  <div id="container">
    <div id="top"></div>
    <div id="bottom"></div>
  </div>
</body>

Here is the sample screenshot and like usual you can download the complete code from this post or view the online demo just click the link below the thumb image.

View Demo | Download Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Twitter Like Login Screen</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="divcontent">
    <div id="divlink">
        <span class="spLeft">Have an account?</span>
        <span class="spUnclicked" id="spLink">
            <a href="" id="textSignin" class="text_link" onclick="showHideLogin(); return false;">
                Sign In
            </a>
        </span>
    </div>

    <div style="clear:both;"></div>

    <div id="divlogin">
        <form action="" method="post">
            <label for="username" class="formLabel">Username or Email</label>
            <input type="text" name="username" class="field"/>
            <label for="password" class="formLabel">Password</label>
            <input type="password" name="passord" class="field"/>
            <div class="submit">
                <input type="submit" value="Sign In" id="signin_submit"/>
                <input type="checkbox" name="remember" id="remember"/>
                <label for="remember" id="labelInline">Remember Me</label>
            </div>
            <div class="forgot">
                <a href="" class="link_bottom">Forgot Password?</a>
                &nbsp;
                <a href="" class="link_bottom">Forgot Username?</a>
            </div>
            <div class="forgot">
                <a href="" class="link_bottom">Already using Twitter on your phone?</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>

To separate the div Sign In link and the div login i’m using another div with css style clear:both because I want to put the login screen exactly on the bottom of div Sign In, the real twitter is using absolute position for login form, because they have the content to show, but not here. So the complete css file look like this

* { font-family: "Arial" }
body {
    background: #dbe9ed;
}
#divcontent {
    width: 800px;
    margin: 0 auto;
}
#divlink {
    text-align: left;
    float: right;
    font-size: 11px;
    background: #fff;
    padding: 5px 0 5px 8px;
    color: #666;
    /* mozilla firefox */
    -moz-border-radius: 5px;
    /* google chrome & safari*/
    -webkit-border-radius: 5px;
    /* opera */
    border-radius: 5px;
}
#divlink a {
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    padding: 0 18px 0 0;
}
.spLeft {
    float: left;
}
.spUnclicked {
    padding: 5px 7px 5px 5px;
    margin-left: 5px;
    /* mozilla firefox */
    -moz-border-radius: 5px;
    /* google chrome & safari*/
    -webkit-border-radius: 5px;
    /* opera */
    border-radius: 5px;
}
.spClicked {
    padding: 5px 7px 5px 5px;
    background: #ccc;
    margin-left: 5px;
    /* mozilla firefox */
    -moz-border-radius: 5px 5px 0 0;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    /* google chrome & safari*/
    -webkit-border-radius: 5px 5px 0 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 3px 3px;
    /* opera */
    border-radius: 5px 5px 0 0;
    box-shadow: 0px 3px 3px #666666;
}
.text_link {
    padding-right: 15px;
    color: #7fb3cc;
    background: url(../images/toggle_down_dark.png) no-repeat scroll right center;
}
.text_link_clicked {
    color: #000;
    background: #ccc;
    background: url(../images/toggle_up_dark.png) no-repeat scroll right center #ccc;
}
#divlogin {
    float:right;
    background: #fff;
    border: 5px solid #ccc;
    background-color: #ffffff;
    /* mozilla firefox */
    -moz-border-radius: 5px 0 5px 5px;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    /* google chrome & safari*/
    -webkit-border-radius: 5px 0 5px 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 3px 3px;
    /* opera */
    box-shadow: 0px 3px 3px #666666;
    border-radius: 5px 0 5px 5px;
}
#divlogin form {
    margin: 0;
    padding: 5px 8px;
}
.formLabel {
    font-size: 11px;
    color: #666;
    display: block;
    padding: 10px 0 7px 0;
}
#divlogin {
    width: 245px;
    display: none;
}
#divlogin form .field {
    border: 1px solid #ddd;
    padding: 5px;
    width: 218px;
}
#signin_submit {
    background: url(../images/bg-btn-blue.png) repeat-x scroll 0 0 #3399dd;
    /* mozilla firefox */
    -moz-border-radius: 4px 4px 4px 4px;
    /* google chrome & safari*/
    -webkit-border-radius: 4px;
    /* opera */
    border: 1px solid #3399dd;
    color: #FFF;
    font-size: 11px;
    font-weight: bold;
    margin: 0 5px 0 0;
    padding: 4px 10px 5px;
    text-shadow: 0 -1px 0 #3399dd;
}
#signin_submit:focus, #signin_submit:hover {
    cursor: pointer;
    background-position: 0 -5px;
}
#signin_submit:active {
    background-image: none;
}
.submit {
    color: #666;
    font-size: 11px;
    margin: 12px 0 12px 0;
}
.submit #remember {
    position: relative;
    top: 3px;
}
.submit .labelInline {
    display: inline;
}
.link_bottom {
    color: #CC3366;
    font-size: 11px;
    text-decoration: none;
}
.link_bottom:hover {
    text-decoration: underline;
}
.forgot {
    margin-bottom: 5px;
}

As you can see on the code above the css code to creating rounded corner and shadow is different, it depend on the browser engine, but it wont work on IE, the “Sign In” button style I copied from the Twitter site it self. There are two unused css style like .spClicked and .text_link_clicked, but they will be used when we call using javascript, and here the complete javascript code

document.onclick = check;
function Flag() {
    this.init = 1;
}

flag = new Flag;

function check(e) {
    var target = (e && e.target) || (event && event.srcElement);
    var objDiv = document.getElementById('divlogin');
    var objLink = document.getElementById('textSignin');
    var objSpan = document.getElementById("spLink");
    var parent = checkParent(target);
    if (flag.init == 1) {
        if (parent) {
            objDiv.style.display = 'none';
            objLink.className = 'text_link';
            objSpan.className = 'spUnclicked';
        }
        if (target == objLink) {
            objDiv.style.display = 'block';
            objLink.className = 'text_link_clicked';
            objSpan.className = 'spClicked';
        }
    }
    flag.init = 1;
}

function checkParent(t) {
    while (t.parentNode) {
        if (t == document.getElementById('divlogin')) {
            return false;
        }
        t = t.parentNode;
    }
    return true;
}

function showHideLogin() {
    var display = document.getElementById("divlogin").style.display;
    if (display == 'none' || display == '') {
        document.getElementById("divlogin").style.display = 'block';
        document.getElementById("textSignin").className = 'text_link_clicked';
        document.getElementById("spLink").className = 'spClicked';
        flag.init = 1;
    } else {
        document.getElementById("divlogin").style.display = 'none';
        document.getElementById("textSignin").className = 'text_link';
        document.getElementById("spLink").className = 'spUnclicked';
        flag.init = 0;
    }
}

The last file is the javascript, so the javascript code have to handle the users event this is what I have try with the real twitter, the login form shows when users clicks on the sign in link (so now the login form is visible). When the login form is visible there is two event that can close the login screen, first when users click outside the form, and second when users click again the sign in link (like toggle button). Now you can see the two css class .spClicked and .text_link_clicked are used when the login form visible. Here the result

DOWNLOAD SOURCE

.spClicked.