Modulor. Custom Software Solutions.
Share.
Facebook | Twitter | LinkedIn
Posted by: Gustavo on January 13, 2011
Category: Javascript
This is a very short tutorial on how to embed Twitter through its old but still very useful and flexible script.

Twitter stopped promoting this script a while ago, but it still works. We liked it because it allows full CSS styling, opposed to the inflexible Twitter feed widget commonly available.

Here are the steps to set it up:

1. Add the following html to your view:

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
</div>

2. Insert the javascripts that will load the feed on the view:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=10"></script>

Remember to replace USERNAME.json with your Twitter Username adding the .json extension. You can also manipulate the amount of tweets you wish to retrieve modifying the variable "count=10."

3. CSS Style

Now you can modify customize the styles. Some of the elements you can customize include:

div.navtitle {
}

ul#twitter_update_list {
]

ul#twitter_update_list li {
}

ul#twitter_update_list li a {
}

Now you can have a Twitter feed that can be mixed in with your current design.
djsaulruiz commented:
Posted Aug 25, 2012 08:34 PM
How do you find the rest of the property names? For example what's the syntax for tweets that are mentions?