jQuery HTML5 Twitter plugin for iPad using Localstorage

jQuery HTML5 Twitter plugin for iPad using Localstorage

I wrote a small jQuery plugin that gets it’s parameters from html 5 data attributes, so configuration is simple. It needs some cleanup but I’ll do that later ūüėČ

You can download a zip of the files

You can add 3 html5 data attributes to configure the plugin:

data-twitter-username (required / used to set the username)
data-twitter-tweet-count (optional / the amount of tweets returned -> Default is 5)
data-twitter-element-id (optional / you can specify a different element to apply the tweets to)

Example:

<div class="twitter" id="twitter" data-twitter-username="stevdobb" data-twitter-tweet-count="4" data-twitter-element-id="twitter"></div>

¬†Here’s a full example:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/stylesheet.css">
    http://js/jquery.js
    http://js/twitter.js
    <script>
    $(document).ready(function() {
        // search the page for the .twitter class
        $( ".js_twitter" ).each(function() {
            // Retrieve data attributes with twitter info
            var twitter_username = $(this).attr("data-twitter-username");

            var twitter_tweet_count = $(this).attr("data-twitter-tweet-count");
            if(!twitter_tweet_count){
                twitter_tweet_count = 5;
            }        

            var twitter_element = $(this).attr("data-twitter-element-id");
            if(!twitter_element){
                twitter_element = $(this).attr("id");
            }

            // Function retrieves tweets
            twitter(
                twitter_username,
                twitter_element,
                twitter_tweet_count
            );
        });
    });
    </script>
</head>
<body>
	<div id="container">
		<div class="js_twitter" id="twitter" data-twitter-username="stevdobb" data-twitter-tweet-count="4" data-twitter-element-id="twitter"></div>
	</div>
</body>
</html>

Because the Twitter search API limits unauthenticated API calls to 150 an hour for every public facing IP. OAuth API calls are permitted 350 calls an hour. You can check how many Twitter API you have  left this hour by going to

https://api.twitter.com/1/account/rate_limit_status.json

This will return the remaining calls and when the remaining hits will be reset formatted in JSON.

Twitter search API rate limit check

Because of that limitation I used localstorage in the plugin which stores a cached version there. So it will only work on browsers that support Localstorage. iPads support Localstorage. I set the localstorage lifetime to 15 minutes in the variable localstorage_lifetime. You can change its value if you want to (you need to convert it to milliseconds first). This is an example of the output of the plugin

jQuery html 5 twitter plugin (steven dobbelaere)

Download the plugin

One thought on “jQuery HTML5 Twitter plugin for iPad using Localstorage

  1. Hey! I could have sworn I’ve been to this site before but after reading through some of the post
    I realized it’s new to me. Nonetheless, I’m definitely delighted I found it and I’ll be bookmarking and checking back often!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s