Tutorial #2
Embed a Single Tweet Basic   2013-10-31

Introduction

Twitter provides several ways to display tweets or twitter feeds in your web pages.

Here is the easiest way that involves nothing more than cutting and pasting a chunk of html code into your page.

The end result should look something like this :

Screenshot of Demo


Step by Step

1: Go to the twitter feed that contains your target tweet on Twitter's own web site - I'm going to use the BBC World News feed here.

2: Find the target tweet and click on the More link in the lower right corner. This brings up a small menu - select Embed Tweet from this.

Screenshot of Demo

3: In the popup window there is a block of HTML code that has already been selected. Copy this to your clipboard with Cmd-C.

Screenshot of Demo

4: In the HTML view of your web page, paste the block of code into a suitable location, save, reload the page and you should see the tweet displayed.


Understanding the Code

There are two parts to this block of code. The blockquote tags enclose the content of the Tweet, including the Link to the specific twitter status (the formal name for a tweet) - with the unique ID of 395287088033447936.

Following this is a script tag that loads a Javascript file from the Twitter URL //platform.twitter.com/widgets.js

Note that you don't need the http: prefix in the URL if it is loading from within a web page, but you do need to add this if you want to enter the URL into your browser.

The script tag contains the async attribute. This causes the script to executed asynchronously while the remainder of the page is still loading, which improves performance.

widgets.js is Twitter's proprietary code that looks for the contents of the blockquote and formats that into a functional tweet that you can reply to, retweet, etc.

If you look at the contents of that script (http://platform.twitter.com/widgets.js) you will see that the code is virtually unreadable as it has been minified to reduce its size and speed up the download.


Code for this Tutorial


Share this tutorial


Related Tutorials

7 : Embed a Twitter Timeline   (Basic)


Comment on this Tutorial


comments powered by Disqus