Instructables

Easiest way to display tweets from different users without rewriting the code for every one separately

I am creating a web app that uses the tweet jquery plugin to display tweets of a specified twitter user.I have a list with some twitter users that I want to display their tweets, however it will be very difficult to rewrite the whole code for each one of the twitter users. Is there any way that I could only change the username when clicking on a specified link? Here is my code:

<!DOCTYPE html><html>
<head><meta charset="UTF-8" />
<title>jQTouch &beta;t</title> <style type="text/css" media="screen">@import "jqtouch/jqtouch.css";</style>
    <style type="text/css" media="screen">@import "themes/artspot/theme.css";</style> <style type="text/css" media="screen">@import "extensions/jqt.listIndex/jqt.listIndex.css";</style>
    <script src="jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf- 8"></script> <script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf- 8"></script>
    <script src="extensions/jqt.autotitles.js" type="application/x-javascript" charset="utf-8"></script> <script src="extensions/jqt.bars/jqt.bars.js" type="application/x-javascript" charset="utf-8"></script>
    <script src="extensions/jqt.listIndex/jqt.listIndex.js" type="application/x-javascript" charset="utf-8"></script> <script src="jquery.tweet.js" charset="utf-8"></script>
    <script src="tweetstars.js" charset="utf-8"></script>
</head>
<body><div id="jqt">
    <!--Homepage--> <div id="home" class="current">
        <div class="toolbar"> <h1>Tweetstars</h1>
        </div> <ul class="rounded">
            <li class="arrow"><a href="#bigList">StarList</a></li> </ul>
    </div> <!--List of stars and popular people that publish tweets-->
    <div id="bigList" class="indexed"> <div class="toolbar">
            <h1></h1> <a href="#" class="back"></a>
        </div> <div class="s-scrollwrapper">
            <div> <ul id="thelist" class="edgetoedge">
                    <li class="sep">#</li> <li><a href="#">3 Ring Wing Ding</a></li>
                        <li><a href="#">14 Carrot Rabbit</a></li> <li><a href="#">90 Day Wondering</a></li>
                    <li class="sep">A</li><br/> <li class="sep">B</li><br/>
                    <li class="sep">C</li><br/> <li class="sep">D</li><br/>
                    <li class="sep">E</li><br/> <li class="sep">F</li><br/>
                    <li class="sep">G</li><br/> <li class="sep">H</li><br/>
                    <li class="sep">I</li><br/> <li class="sep">J</li><br/>
                    <li class="sep">K</li><br/> <li class="sep">L</li><br/>
                    <li class="sep">M</li> <li><a href="#mairiboo">mairiboo</a></li>
                    <li class="sep">N</li><br/> <li class="sep">O</li><br/>
                    <li class="sep">P</li><br/> <li class="sep">Q</li><br/>
                    <li class="sep">R</li><br/> <li class="sep">S</li><br/>
                    <li class="sep">T</li><br/> <li class="sep">U</li><br/>
                    <li class="sep" id="V">V</li><br/> <li class="sep">W</li><br/>
                    <li class="sep">X</li><br/> <li class="sep">Y</li><br/>
                    <li class="sep">Z</li><br/> </ul>
            </div> </div>
    </div> <!--Artists and generally popular people-->
    <div id="mairiboo"> <div class="toolbar">
            <h1></h1> <a href="#" class="back"></a>
        </div> <div class="s-scrollwrapper">
            <ul class="rounded"> <script type="text/Javascript">
                    $(function(){ $(".tweet").tweet({
                        username: "mairiboo", avatar_size: 50,
                        count: 20, loading_text: "loading tweets..."
                      }).bind("loaded",function(){$(this).find("a").attr("target","_blank");}); });
                    </script> <div class='tweet query'></div>
            </ul> </div>
    </div></div>
</body></html>

You can use Php, or you can use the JavaScript Onclick event to do it.
arv_christos (author)  steveastrouk2 years ago
So is there any way to access the username: and create a variable that i will change every time I press a link?
arv_christos (author)  steveastrouk3 years ago
Can you be more specific about the onclick event???