Embedded timelines from Twitter

Embedded timelines from Twitter

This article explains Embedded timelines from Twitter. Twitter is a social media platform. On Twitter, users’s posts called as tweets. Like other social platform, Twitter has also developer platform, which provides many services like embed tweets, share tweets, show timelines on websites and many more. So Lets start with Embedded timelines from Twitter.

Embedded timelines

Embedded timelines are the service provided by Twitter to embed latest Tweets on your website in many view like linear and compact view. Basically, Embedded timelines from Twitter are used to show latest Tweets from a Twitter account. The embedded timeline widget also provivde features to search tweets on the widget itslef and that redircts to live conversation on twitter account.

Basically, Twitter provides 3 type of timelines that can be embed to websites

Profile timeline
A profile timeline embed service is used to show the latest Tweets from the any specific public Twitter account.

Lists
A list timeline embed service is used to show latest Tweets from the items in a collection or exhibition, you can it as public list of Twitter accounts. In this list timeline, widget has a header showing the list’s name, list description description, and collection or exhibition. You can cre lists on Twitter website, app, or in TweetDeck.

Collections
A collection timeline displays Tweets curated by a Twitter user in their chosen display order. You can create collections by using the API or TweetDeck.

 

How to add an Embedded timelines from Twitter to your website

To embed Twitter timelines to your website, Visit publish.twitter.com to generate embed codes for any type of embed timelines like profiles, lists, and collections. On Twitter.com, find and click on the “Embed this” link or the “Share” menu of a TweetDeck column to generate embed codes.

Dimensions
Twitter also provides features to set the size (width X height) of Embedded timelines widget. By default its adjusts to the width of its parent element with a minimum width of 180 pixels and a maximum width of 520 pixels automatically. By default the grid display of embedded twitter timeline has a minimum width of 220 pixels. You can the cusotmize the size or the max width or the max height of an embedded timeline by adding a attribute called data-width or data-height to the anchor element of embed code.

<a class="twitter-timeline"
href="https://twitter.com/w3classes"
data-width="300"
data-height="300">
Tweets by @w3classes
</a>

Customize widget components

Custom chrome

Control the frame around the linear timeline by setting a data-chrome attribute with space-separated tokens for each chrome component.

Token Description
noheader Hides the timeline header. Implementing sites must add their own Twitter attribution, link to the source timeline, and comply with other Twitter display requirements.
nofooter Hides the timeline footer and Tweet composer link, if included in the timeline widget type.
noborders Removes all borders within the widget including borders surrounding the widget area and separating Tweets.
noscrollbar Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.
transparent Removes the widget’s background color.

Example:

<a class="twitter-timeline"
 href="https://twitter.com/w3classes"
 data-chrome="nofooter noborders">
 Tweets by @w3classes
</a>

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.