Tweetywall - YUI Plug-In To Put Twitter Live On Your Website

1 comments - add one

Have you ever seen those sites that have Twitter posts sprinkled all over the place? Would you like to have access to this same functionality without having to do anything? Here at DeVSeO we use Twitter for a number of things and in a number of places. I decided to help you guys out by turning one of ours scripts that we use here into a fully customisable release so that you, too, can have Twitter on your own site with absolutely no coding ability whatsoever. It couldn't be easier. All you need is:

a JavaScript file (provided by us)
an area on your site with a specific ID
an API Key that you can get from the form at the bottom of this page.

Once you have these two things you will have Twitter directly on your site. Oh, and one more thing we require is that you sign up for an API key (which is free and easy to do too!). The sign up form can be found below as can a link to the script you require.

Installation Insructions

In the <head> of your document you will need the following:

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yuiloader-dom-event/yuiloader-dom-event.js&2.7.0/build/animation/animation-min.js&2.7.0/build/json/json-min.js"></script>
<script type="text/javascript" src="/path/to/tweetywall.js"></script>

Or if it suits you, chuck them at the bottom of the page somewhere. It doesn't really matter as the file waits for load events before running so your page will always be fully loaded before this script kicks in. (The first file is just some dependencies that our script requires and can be used directly from Yahoo. If you want you can download the file at the other end of that link and add it to your hosting space.)

Where you want the tweets to appear just add the following HTML:

<div id="twitterFeeds"></div>

You do not have to use a <div> but a block-level element is preferable as it will need to contain block-level elements too. A customisable CSS file, which contains:

#tweetStats {
	padding: 0 15px;
	margin-top: 12px;
	text-align: center;
}
	#tweetStats p {
		display: inline;
		margin: 0 15px;
	}
#twitterFeeds .twitDiv {
	margin: 12px 15px;
	border: solid #999;
	border-width: 1px 0;
	background: #555;
	padding: 5px 10px;
	position: relative;
	overflow: hidden;
}
	#twitterFeeds .twitDiv.twitOver {
		background: #333;
		border-color: #111;
	}
	#twitterFeeds .twitDiv .twitImgDiv {
		float: left;
		width: 50px;
		height: 50px;
		margin: 0 10px 0 0;
		position: relative;
		float: left;
	}
	#twitterFeeds .twitDiv .twitImgDiv.right {
		float: right;
		margin: 0 0 0 10px;
	}
		#twitterFeeds .twitDiv .twitImgDiv img.twitImg {
			width: 50px;
			height: 50px;
		}
		#twitterFeeds .twitDiv .twitImgDiv img#replyImg {
			position: absolute;
			top: 2px;
			left: 2px;
			cursor: pointer;
		}
		#twitterFeeds .twitDiv .twitImgDiv img#rtImg {
			position: absolute;
			top: 2px;
			right: 2px;
			cursor: pointer;
		}
		#twitterFeeds .twitDiv .twitImgDiv img#dmImg {
			position: absolute;
			bottom: 2px;
			left: 2px;
			cursor: pointer;
		}
		#twitterFeeds .twitDiv .twitImgDiv img#settingsImg {
			position: absolute;
			bottom: 2px;
			right: 2px;
			cursor: pointer;
		}

Now, because we have made this script very customisable it is necessary to quickly go through exactly what you can and shouldn't change. There are a number of options at the top of the JavaScript file you require that mostly speak for themselves and are commented, but if you still don't understand anything please read on.

How To Customise The Script

If you open the JavaScript file in a text editor (if you don't have a specific one, use Notepad) you should see a load of script but near the top there should be a section that says "Change the settings below this line". Everything below that and above the line that reads "Do not modify anything below this line unless you know what you're doing!" is for you to change. Some options you can put what you want, others have one of two options set.

show_feeds: This is the maximum number of feeds that you want the script to show. For example, if you set this to 10 then 10 tweets will appear, one after another. Once the number has got to 10 tweets the last tweet will disappear and another will appear... always 10 tweets on the page
searchterm: This is quite simply what you want to search Twitter for. This can be a single word or a comma separated list such as 'development,seo,twitter', entirely up to you.
speed: This refers to the speed that tweets will appear one after another. It is in milliseconds so 5000 = 5 seconds. Simple again, if set to 5000 this will show a new tweet every 5 seconds.
recheck: We have limited the number of tweets that are found to 15, each time. Obviously once those 15 have appeared you're going to want to find more. This is the time it takes to re-search Twitter for tweets. The timing is the same as previous, 5000 = 5 seconds.
show_anim: This determines whether or not to fade in and out the new and old tweets (respectively). There are two options, either true or false. True allows animation, false disables it.
show_menu: If you look at the Tweetywall we have here you will see a section at the top that tells you how many tweets have been found in the last search and the number that have been shown so far. This options refers to this menu and again has two options, true or false depending on whether you want it on or off, respectively.
show_picture: This option, set to true or false again, simply determines whether or not to show a picture of the person who tweeted.
picture_side: With reference to the above option 'show_picture', this will determine which side the image will appear in the tweet compared to the text. For example, if set to 'left' the picture will appear on the left of the text. The options are either 'left' or 'right'.
max_feeds: This is the maximum number of feeds to get from Twitter. The absolute maximum is 15, but you may only want it to query for 3 at a time. This value sets this number.
language: Kind of speaks for itself. It is the language that you want to search Twitter for. The default is 'en' and this value must be a valid language code.
api_key: This is the most important option because you will require an API Key in order to get this script to work on your website. The form below can be used to get an API key (or to get your API Key again if you have lost it). Once you have one, copy the whole thing into this field and, hey presto!, your script will be able to work!

If you have any issues with the script at all please comment at the bottom here or use the contact form and I'll get back to you as soon as possible.

Request For API Key

Use this form to request an API for your site.

DEVseo

Making It Your Web