Javascript required
Skip to content Skip to sidebar Skip to footer

Link Twitter Feed to Squarespace Free

silvabokis

squarespace development + strategy + UX + design & build + marketing

I'm a freelance user experience consultant who delivers projects large and small for a client base that includes multinationals, SMEs, and sole traders.
I specialise in formulating new media strategy, defining information architecture, user experience design, interaction design, prototyping, user research & testing, website and application building, and online marketing.

How to embed a Twitter Widget into a Squarespace website

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 byFollowing me or sending me a Tweet.

Get in touch for help with embedding Twitter and other widgets

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.

    3. The most important thing to do, if you want your widget to work properly, is to add your Squarespace admin URL 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.

    Step1 - Click the 'Add block' button and select a 'CODE' block

    Step1 - Click the 'Add block' button and select a 'CODE' block

    Step 2 - Paste the Twitter widget code and Save.

    Step 2 - Paste the Twitter widget code and Save.

    Step 3 - It won't look right in the admin interface, so click 'View Page'

    Step 3 - It won't look right in the admin interface, so click 'View Page'

    Step 4 - Sit back and admire your Twittery handiwork.

    Step 4 - Sit back and admire your Twittery handiwork.

    macdermottpubset48.blogspot.com

    Source: https://www.silvabokis.com/squarespace-tips/how-to-embed-a-twitter-widget-into-a-squarespace-website