Search
Clear search
Close search
Google apps
Main menu
true

Twitter Timeline component

Twitter Timeline is an HTML5 custom element for displaying a Twitter user timeline in Google Web Designer creatives. The user timeline includes a follow button in the header, allowing viewers to follow the account with one click. There's also a Tweet box in the footer, enabling viewers to Tweet directly to the user without leaving the page. Learn more about Twitter's embedded timelines

Create a Twitter user widget

Before you can use the component, create a widget for the Twitter user account you want to embed:

  1. Go to Twitter's user widget settings, and sign in to your Twitter account.
  2. Adjust widget settings. When you're done, click Create widget.
  3. Copy the value of the data-widget-id attribute from the provided HTML code.
    For example, the provided HTML code will look similar to the code below. Copy the widget ID, shown in bold:
    <a class="twitter-timeline" href="https://twitter.com/GoogleWDesigner" data-widget-id="540195049519079425">Tweets by @GoogleWDesigner</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>

Install the component

This component only works with Google Web Designer. Don't have Google Web Designer? Download it here. If you have a previous version installed, it will automatically be updated to the latest version.

  1. Download the Twitter Timeline component. (You don't need to unzip the file).
  2. In Google Web Designer, click the Image of add new component button in Google Web Designer button at the bottom of the Components panel.
  3. Select the .zip file you downloaded and click "Open".

Learn more about installing and removing custom components in Google Web Designer

Use the component

Drag the component to the stage to start using it in your creative. To customize, first select the component on the stage, then open the Properties panel and scroll down to Component properties

Component properties

Property Description
Name Sets the name of the component.
Widget ID Required: The ID of a Twitter Timeline widget, taken from the data-widget-id attribute of the provided HTML code for the Twitter account's widget settings. See Create a Twitter user widget
Color theme Sets the color theme of the widget. Select either dark or light.
Border color Sets the color of the border lines inside and outside the widget. Enter a hexidecimal color value, for example, #CC0000. If empty, the default gray color is used.
Tweet limit Sets a limited number of Tweets to show, from 1-20. The timeline will automatically adjust its height to fit the specified number of Tweets. When set, the timeline will not poll for new Tweets after it is first displayed.

Link color

Sets the color of links inside the widget. Enter a hexidecimal color value, for example, #CC0000. If empty, the default blue color is used.

Twitter screen name

Overrides the timeline with this user's Tweets. Don't include the @ symbol. For example, to embed Adam Savage's timeline (Twitter handle @donttrythis), enter donttrythis.

Advanced properties

To show the advanced settings, click Show advanced settings in the Component properties pane.

Property Description
ARIA polite Sets the politeness level for accessibility. Screen readers use politeness levels to decide how to notify the user of a content update:
  • polite - When a new Tweet is displayed, the viewer will be notified when they're done with their current task.
  • assertive - When a new Tweet is displayed, the viewer will be notified as soon as possible.
  • rude - When a new Tweet is displayed, the content will be read immediately.
Chrome

A list of timeline elements to hide, separated by spaces:

  • noheader - hides the header

  • nofooter - hides the footer, if visible

  • noborders - removes all borders: around the widget, between Tweets, and inside a Tweet

  • noscrollbar - crop and hide the timeline scrollbar, if visible

  • transparent - remove background color

For example, to remove the background color and hide the borders, enter:
transparent noborders

Twitter user ID Overrides the timeline with this user's Tweets. For example, to embed Google's Creative Sandbox timeline, enter the Twitter user ID: 43901113.
Show replies When checked, the timeline will include Tweets that are replies to other users.
Favorite screen name Overrides the timeline with this user's favorited Tweets.
List ID Overrides the timeline with Tweets from this list. Must be paired with List owner ID or List owner screen name. See Twitter's Timeline Override Parameters for more details.
List slug Displays a Twitter list using a short identifier selected by the list owner. Must be paired with List owner ID or List owner screen name. See Twitter's Timeline Override Parameters for more details.
List owner ID Display a Twitter list belonging to this user. Must be paired with a specific list provided by List slug or List ID. For example, to embed a list owned by Google's Creative Sandbox, enter the Twitter user ID: 43901113.
List owner screen name Display a Twitter list belonging to this user. Must be paired with a specific list provided by List slug or List ID. Don't include the @ symbol. For example, to embed a list owned by Google Web Designer, enter the Twitter screen name: googlewdesigner.

Events

Events are how you connect a physical gesture from your user to a recorded action in your ad. The component sends the following events, which can be used to trigger other actions:

  • Widget Ready
  • Widget Error

Preview

Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.

Was this article helpful?
How can we improve it?