I wanted to add my Twitter updates to my Squarespace site. It’s really simple, but I didn’t find much on how to modify it. So I figured I’d post details on adding Twitter to a Squarespace site and customizing the appearance. Some of this may be helpful for adding Twitter to other sites, but I’ve written this specifically to apply to Squarespace.

Adding the HTML

I went to Twitter and copied the HTML “badge” code removing a few elements that I didn’t need. (I’m not fond of the Flash versions…) I created a new HTML widget in the sidebar and pasted the following code…

<div id=”twitter_div”>
    <ul id=”twitter_update_list”></ul>
</div>

<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/USERID.json?callback=twitterCallback2&amp;count=1”></script>

Two things to note in the final version that you will use. USERID will be replaced with your Twitter ID. And the last line says “count=1.” This is the number of Tweets posted to your site. I wanted a single update posted so mine says “count=1.” You may want 3 or more and you set that number here.

Adding the CSS

The next step is to style it to match your site design. I added four lines to the Custom CSS section under the Style Editing tab:

#twitter_div { text-align: right; color: #727277; font-size: 18 px; }
#twitter_div a:link { color: #727277; }
#twitter_div a:hover { color: #f97c00; }
#twitter_div span { display: block; margin-bottom: 10px; }

I used #twitter_div to modify the general properties, including the post itself and the time stamp below it. (By default, font size of the time stamp is set to be 80% of the post size.)

The #twitter_div a:link and #twitter_div a:hover are used to modify the appearence of the links.

The #twitter_div span section modifies the properties of the tweet. Inserting “display: block” separates the post from the time stamp. (Note: I found some tips online that added “display: block” to #twitter_div a:link. That works sometimes, but causes problems when you include a link, reply or mention in your post.) “Margin-bottom” adds space between the post and the time stamp. You could use “margin-top” here to add space between posts if you decide show more than one post.

And obviously, you can insert your own CSS here to match the design of your site. Have fun playing around with it.