Tutorial #7
Embed a Twitter Timeline Basic   2013-11-02

Introduction

Twitter provides a easy way to embed a live feed for a specific Twitter user in your web page. The result looks like this:

Screenshot ...


Step by Step

You need to have a Twitter account to create a Timeline widget

1: Go to your twitter home page (https://twitter.com/ and sign in. Click on your Settings icon - that's the Gear wheel icon in the top right of the window - and select 'Settings' in the pull down menu.

2: In the Navigation panel on the left of that page, click on Widgets and then on 'Create New Widget' in the top right of the page.

3: The New Widget window opens up with your Twitter feed as the default. You can use this or enter any other Twitter username into the field in Configuration.

4: Select from the available options to customize your timeline - the panel on the right updates immediately to show what your choices look like.

5: Click Create Widget to save the settings. A box appears on the right that contains a block of HTML and JavaScript code.

6: Copy and paste this into your web page in the location you want the Timeline to appear. Save and reload your page to see the result.


Understanding the Code

I have added some newlines and indentation to the code to make it more readable.

It has two components :

First is a a link tag with a href to your Twitter account of interest and a data-widget-id attribute which is some Twitter internal unique ID.

The second is a small JavaScript function which seems a little cryptic. What it seems to do is to insert a script from Twitter (widgets.js) into your page, if it does not already exist.

This script probably looks for the data-widget-id value, fetches the data associated with it and displays it in your page at this location.

This is a case where there appear to be no values that you can modify in order to customize the timeline. The opportunity to do that was when you created the widget on the Twitter site.

The timeline widget will fit the size of the surrounding div, so if you want a more narrow timeline, simply wrap it with a div that has the width style set to, say, 200px.


Code for this Tutorial


Share this tutorial


Related Tutorials

2 : Embed a Single Tweet   (Basic)


Comment on this Tutorial


comments powered by Disqus