Adding Tweets to Websites (using JQuery Extension by seaofclouds)

Next, add your function to make the call to the Twitter class, which is printed below. The function will reference a <DIV>, and the ID of this should be set in your function. In the example below, the ID is called "tweet". You will then need to add a <DIV> tag with this ID to your web page, and the content will be added here.

function callTwitters() {
      jQuery(function($){
        $("#tweet").tweet({
           // ..... add your customisation here .....
       }).bind("loaded",
            function(){
               $(this).find("a").attr("target","_blank");
            }
       )
        .bind("empty",
                function(){
                    $(this).find("ul").append("<p>No tweets.</p>");
                }
           );
      });
 }


In the above example, I have included two 'bind' tags. I feel that this will always need to be used, but if you do not wish to use them for whatever reason, you can remove them. The first will add the property 'target=_blank' to all <A> tags. (This will ensure that all links will open in a new window so that users will not be navigated away from your website.) The second will display a message if no tweets were returned.

I have included some of the customisation options below. These will be added to the code above, in place of the comment in the code above. (Simply add each configuration item with a comma following it, but do not include a comma after the last item.)

avatar_size: 20, // Set the size of the avatar, in pixels.
count: 5, // Set the number of tweets you wish to be displayed
usernames: ["jenikya", "twitter"], // If you want tweets from more than one user, list all users.
username: "jenikya", // List the user you want to see tweets from
loading_text: "searching twitter...", // Set the text to display before tweets are loaded
refresh_interval: 60, // Set the refresh, which will look for new tweets every 60 seconds, in this case
template: "<div class=twitmain> {text} {avatar} </div> {time} {user}", //Set a template, which can include styling as well as the items received from Twitter      
filter: function(t){  // Set up a filter to filter any results. In this example, we filter out replies, designated by the '@' symbol.
                   return ! /^@\w+/.test(t["tweet_raw_text"]);
},   
join_text: "auto", // Automatically join the text
fetch: 100, // Fetch a sampling of results if you use a filter or a query. It will ignore all results that are filtered out.

Instead of specifying usernames individually, you can automatically view all tweets from users in a list. That way, you don't need to make a code change to add a new user. To do this, simply add a 'username' and a 'list' attribute. (Make sure that you set up the list on twitter first, and the list will need to be a public one.)

username: "jenikya",
list: "myPublicList"

The 'query' attribute can also be used to gather results. For example, if you wanted to return all results with a hashtag, you would use the 'query'. However, if you use the 'query' attribute, it will ignore the 'username', 'usernames', and 'list' settings. The query is set to null by default. The query below will return a list of tweets with the #London hashtag. Tweets will be from any user on Twitter that has used this hashtag.
query: "#London",

If you want to only specify tweets from your user when the #London hashtag has been used, simply complete the following:
query: "from:jenikya #London",

Fortunately, Twitter allows web developers access to their feeds without the glitches that Facebook had. (Last year at about this time, I added Facebook comments to a series of websites. The weekend that I worked on this, there was a glitch in Facebook which meant that none of the changes were making their way though; even the Facebook developers on the forums admitted the issues and it seemed that one developer was solely in charge of the task of fixing it. It took three days before Facebook's feed started to work again; meanwhile I'd wasted my weekend thinking that I got something wrong and spent countless hours going over my work and trying alternative methods.)

Twitter also allows web developers the ability to format the tweets in the manor that they see fit, whereas Facebook packages up the whole lot and send it in an iFrame, so customisation is limited.

For more information and for the code from seaofclouds and other examples, visit the website: http://tweet.seaofclouds.com/