Scrolling Twitter Feed [V5]

This is a jQuery powered script which pulls the content from a Squarespace twitter widget with help from liScroll to provide the marquee action. Here’s a guide!

(Example)

1) Create a twitter widget in Squarespace to pulls in the feeds you want (see right).

2) Hide the twitter widget. There are 2 ways of doing this, the easiest is to move the widget into an unused sidebar from within architecture. If you are already using both sidebars, you’ll need to hide the widget manually - find it the widget’s id using the developer tools and use {display:none;} on it in Custom CSS. Note: Don’t use a hidden section in the sidebar as Squarespace won’t serve this on the page at all, meaning we can’t pull the content.

3) Install jQuery if you haven’t done so already.

4) Download the liscroll.js file and upload it to file storage. Call the script the same way as jQuery (but make sure it is after jQuery). See this post for more help.

5) Add this code below 3&4:

<script>
$(document).ready(function() {
ele = $("#twitterScroller");
setTimeout(function() {
$('.twitter-item-basic').each(function(index) {
var tweet = $(this);
ele.append('<li>' + ($(tweet).clone()).remove().html() + '</li>');
});
ele.liScroll();
}, 1000);
});
</script>

6) Add this to your custom CSS, it’s a slightly modified version of the liScroll CSS. 

.tickercontainer {
width: 100%;
height: 21px;
margin: 0;
padding: 0;
overflow: hidden;
}
ul.newsticker {
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left;
margin: 0 40px 0 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 0px 0 5px;
}
ul.newsticker span {
margin: 0 10px 0 0;
line-height:21px;
}

7) The whole things gets completely messed up in IE6, so I recommend adding this into Extra Header Code for maximum compatibility:

<!--[if IE 6]>
<style type="text/css">
.tickercontainer {display:none !important;}
</style>
<![endif]-->

8) Last thing is to add the HTML to where you want the feed to appear:

<ul id="twitterScroller"></ul>

If you feel like it, you can add the twitter bird as in the demo with a little CSS knowledge (inspect this page to see how I’ve done it!). If you have any problems, leave a comment!