<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WebDesign &#38; Such &#187; Twit</title>
	<atom:link href="http://webdesignandsuch.com/tag/twit/feed/" rel="self" type="application/rss+xml" />
	<link>http://webdesignandsuch.com</link>
	<description>a Beantown Design Production</description>
	<lastBuildDate>Thu, 29 Jul 2010 00:02:25 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Embed a Twitter Feed on your website with jQuery</title>
		<link>http://webdesignandsuch.com/2009/12/embed-a-twitter-feed-on-your-website-with-jquery/</link>
		<comments>http://webdesignandsuch.com/2009/12/embed-a-twitter-feed-on-your-website-with-jquery/#comments</comments>
		<pubDate>Wed, 09 Dec 2009 01:17:34 +0000</pubDate>
		<dc:creator>ilz</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Code Snippets]]></category>
		<category><![CDATA[Downloads]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Twit]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=612</guid>
		<description><![CDATA[
			
				
			
		

In a previous post I showed possibly the easiest way to embed a Twitter feed on your website. This brought up a couple of questions from some users.
1. Can you make a background behind individual Tweets?
2. Can you put the date on it&#8217;s own separate line?
As the case goes with a lot of things these [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-bottom:10px">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwebdesignandsuch.com%2F2009%2F12%2Fembed-a-twitter-feed-on-your-website-with-jquery%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=?url=http%3A%2F%2Fwebdesignandsuch.com%2F2009%2F12%2Fembed-a-twitter-feed-on-your-website-with-jquery%2F&amp;style=normal" height="61" width="51" /><br />
			</a>
		</div>
<p><img alt="" src="http://webdesignandsuch.com/posts/jQuery-twitter/twitter.jpg" title="embed twitter" class="alignnone" width="422" height="211" style="border:3px solid #ddd; margin:0 0 15px 0"/></p>
<p>In a <a href="http://webdesignandsuch.com/2009/11/how-to-embed-a-twitter-feed-on-your-website/">previous post</a> I showed possibly the easiest way to embed a Twitter feed on your website. This brought up a couple of questions from some users.</p>
<p><strong>1. Can you make a background behind individual Tweets?<br />
2. Can you put the date on it&#8217;s own separate line?</strong></p>
<p>As the case goes with a lot of things these days <em><strong>jQuery to the rescue</strong></em>! Check out the demo to see both of these things in action, and then continue reading to see how to accomplish these things with jQuery and download the source files.</p>
<p><a class="demo-link" href="http://webdesignandsuch.com/posts/jQuery-twitter/">View Demo</a><span id="more-612"></span></p>
<p>The jQuery and CSS code to make this happen came from Chris over at CSS-Tricks. I slimmed down and edited it to make it work for me. Here is a zip of the files used for the demo so you can download and edit it as you want.</p>
<p><a class="demo-link" href="http://webdesignandsuch.com/posts/jQuery-twitter/jQuery-twitter.zip">Download Files</a></p>
<p>You&#8217;ll see in the head of the index page the jQuery which makes it work. The line you need to change is the following:</p>
<div class="codeBox">
<strong>http://twitter.com/status/user_timeline/<span style="color:#09a1dc">ilz_</span>.json?<span style="color:#09a1dc">count=5</span>&#038;callback=?</strong></div>
<p>First replace the part I highlighted in Blue &#8220;ilz_&#8221; with your Twitter user name.<br/><br />
Next, replace &#8220;count=5&#8243; with the number of tweets you want to show up on your page.</p>
<p>Other than that, you should be able to style the rest of the text, links, etc. as long as you know basic CSS. <strong>Enjoy!</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/2009/12/embed-a-twitter-feed-on-your-website-with-jquery/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
