Display Guidelines

Introduction

Users must have a consistent experience wherever they interact with Tweets, whether on Twitter.com, a mobile client, website, or in an application developed with the Twitter API. To ensure consistency across the platform and ecosystem, we’ve put together the following Display Guidelines for developers to implement when creating experiences with Tweets and Timelines.

Individual Tweet

  1. Tweet Author
    1. The Tweet author’s avatar must always be displayed.
    2. The author’s name and @username must be displayed next to the avatar.
    3. The @username must always be displayed with the “@” symbol.
    4. The avatar, name, and @username must all link to the user’s Twitter profile [1].
  2. Tweet Text
    1. Tweet text must be displayed on a line below the author’s name and @username, and may not be altered or modified in any way.
    2. Entities within the Tweet text must be properly linked to their appropriate home on Twitter.com:
      1. @mentions must link to the mentioned user’s profile [1].
      2. #hashtags must link to a twitter.com search with the hashtag as the query. e.g. #flora must be linked to https://twitter.com/search/%23flora
      3. Links in Tweet text must be displayed using the display_url field in the URL entities API response, and link to the original t.co url field.
  3. Tweet Actions
    1. Reply, Retweet, and Favorite action icons must always be visible for the user to interact with the Tweet. These actions must be implemented using Web Intents or with the authenticated Twitter API.
    2. No other social or 3rd party actions may be attached to a Tweet.
  4. Timestamp and Permalink
    1. The Tweet timestamp must always be visible and include the time and date. e.g. “3:00 PM - 31 May 12”.
    2. The Tweet timestamp must always be linked to the Tweet permalink page on twitter.com. e.g. https://twitter.com/jack/statuses/20
  5. Branding
    1. It must always be clear to the viewing user that they are looking at a Tweet, and that the content is from Twitter.
    2. The Twitter logo or Follow button for the Tweet author must always be displayed in the top right corner.
  6. Images and Media
    1. pic.twitter.com images available in the Tweet entities must be displayed as part of the Tweet, and must link back to the Tweet permalink page.
    2. pic.twitter.com images may not be detached and displayed separately from the Tweet.

Timelines

In addition to the above Tweet display guidelines, a few modifications to the Tweet anatomy are required when displaying as part of a timeline:
  1. Tweet Author
    1. The user’s name and @username should be displayed on one line, with the name first.
    2. The avatar must be positioned to the left of the name, @username, and Tweet text.
  2. Timestamps
    1. Tweet timestamp should be displayed in the top right corner.
    2. For Tweets that have been sent in the last 24 hours, use the short form timestamp, for example “20s” for a Tweet sent 20 seconds ago, “3m” for 3 minutes ago, “5h” for 5 hours ago.
    3. Tweets older than 24 hours should show a short form date including the day and month, e.g. “6 Jun”.
  3. Tweet Actions
    1. Reply, Retweet and Favorite Tweet action icons must always be available to the user when interacting with the Tweet on the timeline. e.g. hover, touch.
  4. Retweets
    1. If the Tweet being displayed is a Retweet, the name of the user who Retweeted it and the Retweet icon must be displayed under the Tweet text. e.g. “Retweeted by Josh Brewer”. The name should link to the the Retweeting user’s profile [1].
  5. Timeline Integrity
    1. Tweets that are grouped together into a timeline should not be rendered with non-Twitter content. e.g. comments, updates from other networks.

Footnotes

  1. Linking the @username to a Twitter profile:
    1. You must use one of the methods below when linking from an avatar, name, and @username:
      1. Link directly to the user’s profile page on twitter.com. e.g. https://twitter.com/jack
      2. Use a Web Intent to the user’s profile.
      3. Link to an internal profile for the user within your app. That profile must have a link back to the user’s profile page on Twitter.com.

Applications that cannot implement these guidelines due to the technical limitations of their platform should make a best effort to satisfy as many rules as possible. Exceptions will be made on a case by case basis by email approval. Please contact trademarks@twitter.com if you feel that an exception is necessary.