TwitterNatter.js Twitter share plugin

TwitterNatter.js

Having a ‘tweet this’ button is all fine and dandy – but the user does have to write his/her own comment at the next stage. Why not cut out the middle man and have them write it on your site and send it straight to Twitter? TwitterNatter.js is a small Javascript plugin which does just that, whilst looking awesome.

TwitterNatter.js In Action

Try it out below. Use the textarea to type your tweet and hit tweet to post to your Twitter! The URL will be shortened using t.co.

How TwitterNatter.js Works

TwitterNatter.js works by constructing its own elements within a <div> tag with the id twitnat. It then listens to events on those elements and handles them elegantly. Clicking ‘Tweet’ opens a new window (or tab) so as not to lose your visitor.

Simply download the files (see below), upload them to your website root and follow these two steps:

  1. Put these lines in your website’s <head> section:
    <script type="text/javascript" src="TwitterNatter.min.js"></script>
    <link rel="stylesheet" href="TwitterNatter.css" type="text/css" media="screen" />
    
  2. Then add the following line wherever you want TwitterNatter.js to appear!
    <div id="twitnat"></div>
    

Style TwitterNatter.js

Simply open up the .css file included in the package and style away! Very simple, very quick. Suits any website with only a handful of changes.

Download TwitterNatter.js

TwitterNatter.js Package

Usage and Licensing

Use as you wish, commercial or not. No redistribution allowed without my consent. The code is minified but I have no problem with you modifying it. To do so, use JSBeautifier.

Share.

Discuss.

Related Articles.