Embedding a Twitter Timeline

Embedding a Twitter Timeline on an OU Campus Page

Twitter provides a service by which a Twitter account holder can embed a user timeline on a web page. This involves creating a Twitter widget. Several widgets are available and can be configured with the Twitter Widgets Configurator.

Widgets Configurator

Users viewing the embedded timeline on the page can expand Tweets to see Twitter Cards inline, retweets, and favorited counts. An integrated Tweet box allows users to respond, start new conversations, follow, and includes an option to auto-expand media.

There are several types of timelines, each of which have their own options. These include:

  • Tweets based on a user's timeline (use the @username, for example @omniupdate)
  • Favorited tweets by any user
  • Lists based on specific users
  • A timeline based on a specific search (use the hashtag #, for example #omniupdate)
  • Customize timelines (collections of curated tweets)

Options include sizing the box that encapsulates the Twitter feed, choosing a light or dark feed, and a link color, among other options. A "safe search mode" can be used to exclude sensitive content and profanity. After creating the widget at Twitter, it can then be embedded on the OU Campus web page.

Creating the Widget

A Twitter account is required to be able to create the widget.

1. From the Twitter home for the account, click the Settings icon.

Twitter Setup

2. From the menu, click Settings again.

3. From the left menu, choose Widgets.

Twitter Settings Account Menu

When logged into the account, the following page is a direct link to create a widget or view any previously created widget.

https://twitter.com/settings/widgets

Widgets

4. Click Create New.

5. Choose a timeline source and configure the settings for the widget. By default, a timeline source based on the currently logged in user @name is used, but there are a number of configuration options available to tweak the widget. See the examples at the bottom of the page that illustrate the different settings and results.

Twitter Widget Creation

6. Click Create Widget.

7. From the field at the bottom of the screen, copy the code and paste it into the source code of the OU Campus page.

Widgets Code
Or copy the code into a text file temporarily if necessary and see the instructions below for how to access the source code within OU Campus.

Embedding the Timeline Widget on the OU Campus Web Page

Source code view via the Source Editor is inherently available for level 9 and 10 administrators, and it can be granted as a permission for levels 1 through 8 by a Level 10 administrator in the user restrictions. Also the default WYSIWYG Editor includes an HTML tool that allows a view of the HTML for the editable region.

To add the code to the page:

1. Edit the page on which the feed should appear.

2. From the WYSIWYG Editor toolbar, click the Edit HTML Source icon. Note: If the Edit HTML Source icon is not available on a customized toolbar, it may be necessary to contact a site administrator to edit the page or provide source code access.

Edit HTML Source

3. Copy and paste the code into the desired location on the page using the HTML Source Editor.

 HTML Source Editor

4. The linked text is shown in the editor.

Link in Editor

5. Save the page and the live feed is shown in preview.

6. Publish the page to make the embedded timeline widget live on the web page.

Embedded Twitter Feed on Published Page

Customizing the Widget

A Twitter timeline widget can be edited after initial creation from the Twitter Widgets page for the account. There are a number of client-side options available that can further customize the embed code. This involves editing the code manually. The ARIA accessibility system is used by default and the setting can be adjusted from polite to assertive if necessary.

Note: Keep in mind that when deleting a widget from Twitter, it will also remove it from the page in OU Campus to which it was added.

Example of the Default Code

<a class="twitter-timeline" href="https://twitter.com/omniupdate" data-widget-id="444538378067783680">Tweets by @omniupdate</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Example of Overrides to the Server-Side Settings

The example below doesn't show the <script> that is included but emphasizes a few of the customizations that can be added to the markup. These are documented at the Twitter Developers page for embedded timelines and here are few examples:

  • data-border-color="#BD13C6" -- Changes the border color of the bounding box for the widget. The hex format is required.
  • data-theme="dark" -- Changes the theme to include the dark background and white text rather than vice-versa.
  • width="300" and height="600" -- The dimensions of the bounding box are also customizable. The default is 520x600px, but the width adapts to the width of the its parent element (i.e., pasting the widget into a div with a width of 300px will result in a widget that is 300px wide).
  • data-link-color="#F95B02" -- Changes the link color to the specified color. 
<a class="twitter-timeline" href="https://twitter.com/omniupdate" data-widget-id="444538378067783680" 
data-border-color="#BD13C6"
data-theme="dark"
width="300" height="600">OmniUpdate Tweets (@omniupdate)
data-link-color="#F95B02"</a>

Live Examples of a Twitter Widgets

Example Using a Twitter Name

(Tweets by OmniUpdate [@omniupdate])

 

Example Using a List 

(Tweets from @kgreen49092095/Education Resources)

A list is created from Settings > Lists > Create New List, and then add usernames to the list. Once the Twitter list is created, create a new widget, click the List tab, and select the list. 

 

Example Using a Hashtag Search

(Tweets about "#oucampus")

 

Example Using a Text-based Search Query

(Tweets about "higher education")

 

Example Using a Collection

(Tweets comprised of a collection of specific tweets)

 

Example Using Favorited Tweets

 

Example Using Customization

(Tweets about "#oucampus")