Jquery plugins for Twitter API

Last update on February 26 2020 08:09:09 (UTC/GMT +8 hours)

Introduction

jquery Plugins for Twitter API are a simple and easy way to utilize Twitter API features. In this article, we will discuss how a Jquery Plugins works on top of Twitter API.

Tweetie

The Jquery plugin we will discuss here is Tweetie. it is a simple Twitter Feed Plugin that works with new Twitter 1.1 API.

You need to obtain CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN and ACCESS_SECRET for this. You may found a detailed guide for how to obtain that here.

Clone Tweetie for Github

sudo git clone https://github.com/sonnyt/Tweetie.git

Grant proper permissions to the Tweetie folder.

Edit config.php file present within api folder within Tweetie. Replace CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN and ACCESS_SECRET with your keys.

Code for implementing the jQuery Plugin as follows

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>jQuery Tweetie Plugin example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    </head>
    <body>
	<div class="MyTweets">
        <div class="tweets"></div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="tweetie.js"></script>
    <script type="text/javascript">
        $('.MyTweets .tweets').twittie({
            username: 'w3resource',
            list: 'sql',
            dateFormat: '%b. %d, %Y',
            template: '<strong class="date">{{date}}</strong> - {{screen_name}} {{tweet}}',
            count: 10
        }, function () {
            setInterval(function() {
                var item = $('.example2 .tweet ul').find('li:first');

                item.animate( {marginLeft: '-220px', 'opacity': '0'}, 500, function() {
                    $(this).detach().appendTo('.example2 .tweet ul').removeAttr('style');
                });
            }, 5000);
        });
    </script>
     </body>
</html>

You may view a live demo here

Previous: Twitter REST API Tutorial
Next: Google Plus API Tutorial