How To: Code Live Tweeting Part 1

I am exploring, step by step, the ways to embed live timelines into a website. Twitter creates a “widget” that you may code onto a page (very simple) but many sites like WordPress don’t accept Twitter’s code.

This is what the final product should look like:

The idea behind this, especially for sports teams, is to embed a live feed of game action through a very light code that can upload through mobile very easily. During tomorrow’s Texas Stars game, I will be exploring the option of creating a custom timeline that enables multiple users to enter the live timeline (ie. we can include our play-by-play, marketing department and other Twitter handles that are relevant to the game).

You must first create a widget through Twitter under your user settings. Type in the account of the name you would like to create the widget for. In this case, I’m using @texasstars (it’s game day). Next, choose the pixel length you would like your timeline to appear as – this example is 1,500 px.

Now, if you are coding on a regular HTML or CSS built site, you may simply add the code into a post or page that you would like to direct your audience to.

If you are running a WordPress site, like myself, you will need to find the widget ID located in the HTML address at the top. In this example mine was 40397—-2791—-8 (I added dashes for security).

Now, go into WordPress and type into the “Text” of a post (or the coded part of the post) and type:

Screen Shot 2013-11-22 at 2.09.58 PM

Mine was:

Screen Shot 2013-11-22 at 2.09.49 PM

That should do it!

Tune in tomorrow to learn how to add multiple accounts into a live feed so that your audience may follow multiple angles of a game. This is a very effect tool for sports teams, or anyone that wants to live tweet.