Attention!       May 31, 2011 Get all the details around our new Follow Button    x

Read the detailed documentation about our Follow Button here.

Display Guidelines

Home » Supplemental Documentation » Display Guidelines

Looking for Broadcast or Offline display guidelines? »

The Anatomy of a Tweet

Requirements

  1. Tweet Author: The author's name should be presented as the author's Twitter username or name with the username present. The name should be linked to the user's Twitter profile page at http://twitter.com/username, made actionable using a Web Intent, or linked within your service's internal representation of the author's profile, which should contain a link to the user's Twitter profile page. The author's username should be styled differently than the Tweet text and links (bold, color, size, or other typographic convention), and should not be preceded by an @ symbol.
  2. @mentions: Mentions of other Twitter usernames must link to the profile page at http://twitter.com/username, made actionable using a Web Intent, or linked within your service's internal representation of the user's profile, which should contain a link to the username's Twitter profile page.
  3. Hashtags: If any hashtags ('#' followed by a string of characters) are mentioned in the Tweet, they should link to a twitter.com search results page for that query term (for example, http://twitter.com/search?q=%23newtwitter) or an internal representation of the results containing a link to the Twitter search page.
  4. URLs: If any URLs are included in the Tweet, they must be hyperlinked and the hyperlink must link to the location passed through the API. Hyperlinked URLs are best displayed when visually differentiated (colors or underline).
  5. Branding: If one Tweet is displayed independently, it must be labeled with either the Twitter wordmark or the Twitter Bird (consult our Image Resources), or with text reading "Content from Twitter." If multiple Tweets are grouped, the Twitter wordmark or "Content from Twitter" must be placed in a close proximity to the grouped content.
  6. Tweet Box: If showing a box for users to Tweet from, "What's Happening?" should be written above the text field. This Tweet box should also either be near Tweets that include the Twitter wordmark or the Twitter Bird, or the Twitter wordmark or the Twitter Bird should be present within the box.
    1. Tweet button: The button should be displayed and labeled as "Tweet" if the content is being posted exclusively to Twitter, or "Update" if directing to other services in addition to Twitter.
    2. Character count: A character count helps users counts down to stay within 140 characters
  7. Images: If displaying images posted via Twitter, always display the image and its associated Tweet together. The Tweet must include the full text, the author's username or name with the username present, and should be linked to the author's Twitter profile page at http://twitter.com/username. Clicking on the image should ultimately open the image url contained in the Tweet.
    1. The Tweet text may be displayed beneath the associated image, much like a caption.
    2. If it is not possible to display the full Tweet along with the image (for example because the image is being displayed as a thumbnail), make the image clickable to a view where it is clearly associated with the Tweet that mentions it.

Exceptions to the above 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.

Suggestions

The following are suggestions based on how Tweets look on Twitter. You may find that this isn't the most relevant way to display the data you show, and we encourage your creativity. However, if you're looking for some direction, please see the following:

  1. Avatar & Alignment: We show the user's avatar on the left side of the Tweet. Remaining Tweet content is aligned‐left, immediately to the right of the avatar. The avatar links the user's Twitter profile page at http://twitter.com/username.
  2. Timestamp and Permalink: This information can be shown either relative, e.g. "2 minutes ago", or absolute, e.g. "8:45 AM, Jul 8th"). The timestamp should be on its own line after the Tweet text and styled differently to be less prominent than the Tweet text (lighter color and/or smaller size). The timestamp should also link to the Twitter hosted permalink page for the individual Tweet.
  3. Tweet Actions: Reply, Retweet, and Favorite actions should always be available from a Tweet, and should be displayed with their respective action icons. They should be arranged left to right as Reply, Retweet, Favorite. Easily accomplish this by utilizing Web Intents.
  4. Source: Along with the timestamp and permalink, you may choose to display the client or means by which the Tweet was posted (e.g. "from web" or "from Twitter for iPhone"). If client is supplied, please make sure it links to the source page URL provided.
  5. Multiple Tweets: If showing multiple Tweets at once, they can be visually separated by horizontal lines, empty spaces, or alternate background colors. The empty space should be proportional to the overall height of the Tweet itself.
  6. Multiple Tweets, One Author: We find that when showing multiple Tweets from the same user, it looks best if the profile picture is not repeated with each Tweet. Showing one avatar with content from the same user provides for a simpler experience.
  7. Chronological order: It usually makes sense for Tweets to be ordered in reverse chronological order (latest first), but we understand that this might not always be the most relevant way to arrange Tweets. When shown as search results or other criteria (keyword, user, or other editorial constraints) Tweets may be ordered by those criteria.
  8. Name with Username: If the full name is displayed alongside the Twitter username, the Twitter username should be visually differentiated (e.g. color or bold) and more prominent.
  9. Search Link: Information becomes more discoverable when a search term links to a Twitter search results page. If you have a product that returns search results for Tweets, we recommend that the term links back to the relevant search page within Twitter.

More information

For more on how to use the Twitter marks, see http://support.twitter.com/forums/26257/entries/77641