Embedding Tweets and Twitter Timelines on Your Web Pages

Embedding Tweets on your web page is a simple process that can be accomplished by grabbing a snippet of code from Twitter and placing it into your HTML. While this process is great for copying one tweet at a time, it isn’t the best if you want to have a regular update of tweets posted on your site. While you can find several third-party components for adding this functionality, you can also call the Twitter API and do it yourself.

Embedding an Individual Tweet

In case you aren’t aware of the process for embedding an individual tweet to your page, I’ve added the steps here. The first step is to find the tweet on Twitter and then click on it. This will bring up the tweet as shown in Figure 1:

Figure 1: A selected Tweet on Twitter

With the Tweet displayed, click on the down arrow in the upper right corner. This will display a menu as shown in Figure 2.

Figure 2: Selecting the Embed code.

Selecting Embed Tweet will give you the HTML code you need to add to your web page to display the tweet. Figure 3 shows the dialog presented by Twitter. The dialog also gives you a preview of what the embedded code should display.

Figure 3: The embed code from Twitter

You can simply copy and paste the highlighted HTML code, which is simply a blockquote, into your page to have the tweet displayed.

Displaying a Twitter Feed on Your Web Page

Just as you can embed an individual tweet, you can also embed a timeline. In essence, any Titter URL can be embedded on a website. To embed a timeline, start by going to https://publish.Twitter.com. On this page, you will be greeted with a dialog similar to Figure 4.

Figure 4: Embedding a Twitter Timeline

In this dialog, you can enter the URL for a timeline that you want displayed. For example, if I want to display my new tweets on my page, I can enter the URL to my timeline as shown in Figure 4. When I enter this URL, I’ll be prompted to select either an embedded timeline display or to add a Twitter Button.

Figure 5: Embedding a Twitter Timeline or a Twitter Button

Once you make your selection, then just like when embedding a tweet in Figure 3 above, you are presented with a piece of code and a preview. You can copy the code and page it into your Web site’s HTML to have the feed displayed.

The display of your timeline will, however, follow the defaults from Twitter. If you want to customize the look, you can change the height, width, color, and language by selecting the link to “set customization options”. This displays the options as shown in Figure 6.

Figure 6: Setting displays options for embedded Tweets.

In running through this process, I used the URL from Twitter for my own timeline and then set the options shown in Figure 6 for the display the result is the following code:

<a class="twitter-timeline" data-width="250" data-height="450" data-theme="light" href="https://twitter.com/BradleyLJones?ref_src=twsrc%5Etfw">Tweets by BradleyLJones</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Should you decide later that you want to change the size or options, you can adjust the width and height directly in the code. Of course, it is also easy to walk through the overall process as well!