Tim Butterfield
Twitter Feed on website

Put twitter on your website with tweet!, an unobtrusive javascript plugin for jquery.

Download

Demos & examples

See tweet.seaofclouds.com, or the bundled index.html file.

Features

  • Works with Twitter API v1.1
  • Caches resources server-side in flat JSON files
  • Supports OAuth Token Authentication (via Twitter App)
  • small size and fast download time
  • will not slow down or pause your page while tweets are loading
  • display up to 100 tweets, as permitted by the twitter search api
  • display tweets from a twitter search, or from your own feed
  • optional verb tense matching, for human readable tweets
  • optionally display your avatar
  • optionally display tweets from multiple accounts!
  • automatic linking of @replies to users twitter page
  • automatic linking of URLs
  • automatic linking of #hashtags, to a twitter search of all your tags
  • converts <3 to a css styleable (we hearts)
  • customize the style with your own stylesheet or with other jquery plugins
  • customize the layout with a user-defined template function
  • supports RequireJS and other AMD-compatible javascript loaders
  • available on cdnjs

Usage

  1. Get JQuery. In these examples, we use Google's AJAX Libraries API.

  2. include jQuery and jquery.tweet.js files in your template's <head>.

    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>

  3. You need to have a twitter App for your usage in order to obtain OAuth credentials, see https://dev.twitter.com/apps for help.

  4. After creating your app, configure index.php with your OAuth credentials, and enable caching if you desire. Your cache directory of choice must be writable by PHP.

  5. If you keep index.php somewhere besides /twitter/, specify the path to it via the modpath option, relative to your domain.

  6. In <head>, Initialize tweet! on page load with your Username and other options

    <link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>

  7. In <body>, include a placeholder for your tweets. They'll get loaded in via JSON. How fancy!

    <div class="twitterfeed"></div>

  8. Style with our stylesheet in <head>, or modify as you like!

    <link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>

Twitter OAuth Token for Authentication

Click here to find out how

Support

If you are having issues, set $debug = true; in index.php. Errors should be logged to the JS console on execution.

If you still can't figure it out, visit StanScates GitHub page.

[koken_photo label="friends.jpg" id="840" media_type="image"]