Embedding a Twitter Timeline

Embedding a Twitter Feed using the Twitter Timeline Component


1. Navigate to https://twitter.com/settings/widgets.

2. In the main section beside “Widgets” click the “Create new” button.

3. In this window, choose a timeline source: user timeline, favorites, list or specific hash tags. For the purpose of this example, the user timeline for "@sfu_it" account was selected.

4. To create a widget that will showcase sfu_it tweets, click on the “User timeline” tab. Configure and customize your feed by filling in the different fields.

5. Click “Save Changes.

6. Now take a look at the URL, it should look something like this: https://twitter.com/settings/widgets/XXXXXXXXXX. The ID is located right after "/widgets/" part of the URL, copy the ID. You will need to add this unique number string to the Twitter Timeline component later.

Setting up AEM

1. In AEM navigate to the "Twitter Timeline" component under “Social.”

2. Pull in a twitter timeline component under the tab “Social

3. Select "Edit." Add your twitter username and widget ID which you copied from the URL.

Add a Twitter feed using the HTML component

1. Follow the steps 1-4 above.

2. After saving your changes, copy the code generated by Twitter.

Adding the component

1. Add an HTML component to your page.

2. Paste the code into the HTML component.

To view the component, select the Preview mode from the Sidekick and refresh your browser.