How to embed a Twitter Widget into a Squarespace website
More in Plugins, Scripting and Styling
UPDATE: It's now a lot quicker and easier to embed a Twitter widget on a Squarespace 7 website.
I've revised this article because, since I wrote in in January 2013, the method for inserting a Twitter feed widget into a Squarespace website got a whole lot easier.
You don't need to be a Squarespace expert to embed the Twitter widget - in fact, it can be done in under a minute.
WATCH THE VIDEO TO SEE HOW EASY IT IS
..And here's the embedded widget
Test the widget by Following me or sending me a Tweet.
If you're really not confident about embedding the Twitter widget code you can drop me a line using the link above and I'll help you out for the cost of a few beers.
ORIGINAL POST STARTS HERE
What's wrong with the Squarespace Twitter feed implementation?
There's already a Squarespace content block that allows you to embed posts from your Twitter feed but (whisper this) it's. a. bit. boring.
Here's one to the right, in all its glory.
Although you can configure the number of posts to display, you can't customise the colours of the content block and the lack of title or border means that a person can't tell at a glance that they are looking at a list of Tweets.
I decided to have a look around to see if there was a more attractive way of displaying Tweets in a Squarespace page.
Embedding a Twitter Feed Widget into Squarespace
On the right you can see the official Twitter Feed Widget built into my Squarespace page. I think that it's a considerable improvement on the Squarespace version.
The steps to implementing the Twitter Widget are straightforward, although on my first attempt it didn't seem to be working. It took me a few minutes to work out why, but this guide will save you that bit of thinking time.
Here goes..
1. Go to https://twitter.com/settings/widgets - that's where you can build a number of different widget types. I can't remember if you need to agree to any terms, but if you do you'll finally be presented with a screen where you can create a new widget.
2. Click the 'Create New' button and you will be presented with the Configure a User Widget screen. Certain options will be prefilled, such as your Twitter username, and your website domain name (if it's in your Twitter user profile). You can amend the settings to amend the widget height, colour scheme, and so on.
Click to enlarge
3. The most important thing to do, if you want your widget to work properly, is to add your Squarespace built-in domain to the Domains input box. If you look on the screenshot above you can see that I have both www.silvabokis.com and colin-irwin-ui4r.squarespace.com in the domain box. If you don't do this the widget won't work when you try to preview your page.
4. Save the widget and copy the HTML code to your clipboard.
5. Now head over to your Squarespace admin pages and select the page you want to embed the widget on. The slideshow below shows, step by step, how to insert the Widget code. Just click the image to step through the slides.
