Tweet Slider V1

We are extremely proud of the new side sliding Twitter mini-client we have coded. We didn’t just do this for fun; one of our clients wanted to show their tweets horizontally, and we couldn’t find anything that anyone had done already to perform the task we needed, so we wrote our own (see below).

As you can see the tweets are from @Twitter, which we have done for display purposes.

To have this on your own site it is really simple:

Step 1: CSS

Add the following to your CSS document:

#tweets {
width:500px !important;
height:0px;
overflow:hidden !important;
position:relative;
margin:10px 0;
padding:0;
}

#tweets h4 {
text-align:left;
margin:10px 0;
padding:0
}

#tweets ul {
list-style:none;
width:3000px;
margin:0;
padding:0;
position:relative;
}

#tweets ul li {
width:500px;
margin:0;
padding:0;
float:left;
position:relative;
left:0;
}

#tweets ul li div, #tweets ul li div span {
width:auto;
text-align:left;
margin:0 auto;
}

#tweets ul li img {
padding-right:2px

}

Step 2: Add Javascript File(s)

The slider requires Jquery, so if you don’t already have it you can add it like so:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Click here to download tweet-slider.js

Open the file in your preferred text editor and enter the screen name of the person who’s tweets you would like to display.

Add it to your server and link to it within a script tag like so:

<script type="text/javascript" src="path-to-file/tweet-slider.js"></script>

Step 3: Add Placeholder

Now all you need to do is add the following to your html pages wherever you want the slider to display:

<div id="tweets">
 

  <ul></ul>
</div>

And your Tweet Slider will display when you reload the page.

Note: The slider is set to a width of 500px, which is an average of content areas. If you have a different width and would like to use the slider, please contact us using the contact form in the sidebar.