How to Develop an App with Twitter for Websites

Judah Frangipane
Jan. 10 2014, 10:00AM EST

Twitter for Websites enables you to integrate individual tweets and timelines right in your website or application. These tweets and timelines can display media, including photos, videos and article summaries. They are also fully interactive, allowing your readers to interact with them just as they would on Twitter.com.

Individual Tweet

The first and easiest way to embed an individual tweet is to simply include the URL to the tweet in your WordPress blog post. This is supported by default from WordPress 3.4 and higher. If you don't use WordPress, skip to the next section.

To get the URL of the tweet, find the tweet in the user's timeline and click on the Expand link.

Once the link is expanded, click on details.

This will redirect you to the specific tweet. When the page loads, copy the URL in the browser address bar.

When you create your article in WordPress, paste this URL into the blog post.

When you publish or preview your post, the Twitter URL will be replaced automatically by WordPress and display the embedded tweet as shown in the image below.

You can also embed a specific tweet by using the code provided by the Embed Tweet link. You can find this option in the More link menu next to the Reply, Retweet and Favorite links. Click the More link and select "Embed Tweet."

This will open the Embed Tweet dialog.

Copy and paste the code into your HTML page, or, if you are using WordPress, paste the code into the editor. (Note: In WordPress, paste the HTML code into the editor while in Text mode rather than Visual mode, as shown below. Visual mode usually mangles pasted HTML code.)

When you preview or publish your post, the HTML code will load and display the individual tweet.

Timelines

Twitter allows you to embed timelines in your website or application from an individual user, a list of users, a search term or a hashtag. The embedded timelines are live and interactive, and are built specifically for the web, mobile web and touch devices.

User Timeline

ProgrammableWeb User Timeline

Search Term or Hash Tag Timeline

Hashtag Timeiine

All of the embedded timelines (called widgets) can be created from the Widget settings page of your Twitter account. If you don't have a Twitter account you must register for it first. Once you have registered and logged in, open the Widget settings page and click on the Create New button.

This will display the Create a New Widget page.

Create New Widget

This page lets you select the type of timeline widget and the options of that timeline. By default, the user timeline is selected, but you can choose the remaining types by clicking on the Favorites, List or Search link.

As you make changes to your timeline, a preview is displayed to the right. (Note: When entering a username, search term or hash tag, you must tab away from the text input before the preview is updated.)

When you are finished creating your timeline, click the Create Widget button. Twitter will then display a text area with the HTML code.

Timeline Widget code

Copy the generated code and paste it into your HTML page. If you are using WordPress, paste this into the editor in Text mode as described in the individual tweet section. When you preview your page in the browser, your timeline will be displayed.

Once you get started with Twitter integration, you will find that Twitter for Websites allows you to do much more than we have touched on here. You can read more about the Twitter API here.

Judah Frangipane

Comments

User HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.