@Anywhere Features: Tweet Box

Updated on Wed, 2012-01-04 09:05

Overview

The Tweet Box allows Twitter users to tweet directly from within your web site or web application.

Basic Usage

The default Tweet Box will work without any customizations and is activated using this short snippet. This code will display a Tweet Box on the page inside the div with the id of default-textbox.

```
<div id="tweetbox"></div>
```
```
<script type="text/javascript">
```
```
  twttr.anywhere(function (T) {
```
```
    T("#tweetbox").tweetBox();
```
```
  });
```
```
</script>
```

Configuration

There are several configuration parameters for the Tweet Box which are all set by passing arguments to the tweetBox method. Examples of how to use the Tweet Box parameters are given further down this page.

Parameter	Default Value	Allowed Values	Description
`counter`	`true`	`true` or `false`	Whether to display the character counter or not
`height`	515px	any number	The height of the Tweet Box in either pixels (px) or ems (em)
`width`	65px	any number	The width of the Tweet Box in either pixels (px) or ems (em)
`label`	“What’s happening?”	any string of characters	The text which goes above the Tweet Box
`defaultContent`		any string of characters	A suggested message for the user to Tweet. Can include #hashtags and @mentions
`data`		an object	A collection of key, value pairs of additional information to use when updating a users status.
`onTweet`		a function	This is a function you can create which will be called after the Tweet Box has sent the Tweet. The function takes two parameters, `plaintext` and `html`, which represent the posted Tweet in that format.

Examples

The examples that follow show different ways you can use the Tweet Box. The code to produce the example is also given so you can copy and paste. Remember you still need to add to the top of your webpage

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_KEY&amp;v=1" type="text/javascript"></script>

with YOUR_KEY set to your application’s key.

These examples are real Tweet Boxes. If you press Tweet you will Tweet to your followers.

Default TweetBox

This Tweet Box example has no customizations and is what you would see if you just called .tweetBox().

```
<div id="example-default"></div>
```
```
<script type="text/javascript">
```
```
  twttr.anywhere(function (T) {
```
```
    T("#example-default").tweetBox();
```
```
  });
```
```
</script>
```

Customized TweetBox

In this example the Tweet Box has a custom height and width. The label has also been changed to What did you have for lunch? and the character counter has been removed. The default content has been also set to I had .

```
<div id="example-custom"></div>
```
```
<script type="text/javascript">
```
```
 twttr.anywhere(function (T) {
```
```
   T("#example-custom").tweetBox({
```
```
     'counter' : false,
```
```
     'height'  : 100,
```
```
     'width'   : 400,
```

     'label'   : "What did you have for lunch?",

```
     'defaultContent' : "I ate ",
```
```
   });
```
```
 });
```
```
</script>
```

TweetBox which alerts the posted Tweet

You can listen and process the Tweet just sent by listening for the onTweet event. In this example we will log the plaintext version of the Tweet to the console and display an alert of the HTML version.

```
<div id="example-ontweet"></div>
```
```
<script type="text/javascript">
```
```
  twttr.anywhere(function (T) {
```
```
    T("#example-ontweet").tweetBox({
```

      onTweet : function(plaintext, html) {

```
        console.log(plaintext);
```
```
        alert(html);
```
```
      }
```
```
    });
```
```
  });
```
```
</script>
```

TweetBox with extra meta data

In some cases you may want to add extra information about the Tweet such as if it is a reply, or where it is being Tweeted from. Any parameter available in the /statuses/update method can be used.

In this example we are indicating the Tweet is being sent from Twitter HQ, who’s place_id is 247f43d441defc03. We’re also saying the Tweet will be a reply to Tweet 17889110158. You’ll notice in this example that the defaultContent has also been set. This is because a reply must start with the screen name of the user who posted the Tweet being replied to. In this case Tweet 17889110158 was posted by @anywhere so we start the Tweet with their name.

```
<div id="example-metadata"></div>
```
```
<script type="text/javascript">
```
```
  twttr.anywhere(function (T) {
```
```
    T("#example-metadata").tweetBox({
```

      'defaultContent' : "@anywhere thanks!",

```
      'data' : {
```

        'place_id' : '247f43d441defc03',

        'in_reply_to_status_id' : '17889110158'

```
      }
```
```
    });
```
```
  });
```
```
</script>
```