Creating An Tweet Like Text Box with jQuery - Tweetbox

File Size: 29.3 KB
Views Total: 2112
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Creating An Tweet Like Text Box with jQuery - Tweetbox

Tweetbox is a jQuery plugin which converts an DIV container into a Tweet-like text box with support for character limit/counter, #Hashtag, @Mention and URL highlighting.

How to use it:

1. Add the jQuery library and other necessary resources at the bottom of the document.

<script src=""></script>
<script src="js/rangy-core.js" type="text/javascript"></script>
<script src="js/rangy-textrange.js" type="text/javascript"></script>

2. Add the jQuery tweetbox plugin after jQuery library.

<script src="js/jquery.tweetbox.js" type="text/javascript"></script>

3. Create an DIV element for the Tweet-like text box.

<div id="demo">



4. The sample CSS to customize the styles of the hash tags, mentions and URLs.

#demo {
  position: absolute;
  width: 80%;
  left: 10%;
  top: 50px;
  height: 300px;
  border: 1px solid black;
  background-color: white;
  font-size: 18px;
  padding: 1%;

.url {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2px 4px;

.mention {
  color: #fff;
  background-color: #c0392b;

.hashtag {
  color: #fff;
  background-color: #34495e;
  padding: 5px;

.url {
  color: #fff;
  background-color: #2980b9;
  text-decoration: underline;
.tweet-box-editable:afterr {
 content:' #tweetrm';

div.tweet-box-bottom { background-color: #5facdd; }

button.tweet-box-button {
  background-color: #81c0e9;
  border: 1px solid #3990cd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: white;
  font-weight: bold;

div.tweet-box-info {
  font-size: 12px;
  color: rgba(255,255,255,.8);

4. Initialize the plugin by calling the function on the DIV container.

<script type="text/javascript">

5. Available options to customize the plugin.

<script type="text/javascript">
cb:false, // callback function for submission
css:{'font-size':'inherit'}, // CSS to apply to the editor
default:false, // default content, good for replies
postfix:' #tweetrm', // add content to an end of a tweet, reduces available characters
limit:140, // change the twitter character limit (from 140)
highlight:[ // regular expressions matching content and what span[class] they get
action:'tweet', // specify if it is a tweet or retweet
button:{ // hash for button text key being the action
reply:'Tweet Reply'

This awesome jQuery plugin is developed by gdbate. For more Advanced Usages, please check the demo page or visit the official website.