Bento Twitter

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
    />
    <style>
      bento-twitter {
        width: 375px;
        height: 472px;
      }
    </style>
    <style>
      body {
        background: #ecf1f3;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>

</head>

<body>

    <bento-twitter
      id="my-tweet"
      style="width: 375px; height: 720px"
      data-tweetid="1397995435386679302"
    >
    </bento-twitter>

</body>

Embeds Twitter content like a Tweet or a Moment.

Use bento-twitter as a web component or a React functional component:

↓ Web Component ↓ React / Preact

Web Component

You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See Layout and style.

Import via npm

npm install @bentoproject/twitter

import {defineElement as defineBentoTwitters} from '@bentoproject/twitter';
defineBentoTwitters();

Include via `<script>`

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-twitter-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css" crossorigin="anonymous">

Example

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
    />
    <style>
      bento-twitter {
        width: 375px;
        height: 472px;
      }
    </style>

</head>

<body>

<bento-twitter id="my-tweet" data-tweetid="885634330868850689"></bento-twitter>

</body>

Layout and style

Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
/>

Alternatively, you may also make the light-weight pre-upgrade styles available inline:

<style>
  bento-twitter {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

Container type

The bento-twitter component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with height, width, aspect-ratio, or other such properties):

bento-twitter {
  height: 100px;
  width: 100%;
}

Attributes

data-tweetid / data-momentid / data-timeline-source-type (required)	The ID of the Tweet or Moment, or the source type if a Timeline should be displayed. In a URL like https://twitter.com/joemccann/status/640300967154597888, `640300967154597888` is the tweet id. In a URL like https://twitter.com/i/moments/1009149991452135424, `1009149991452135424` is the moment id. Valid timeline source types include `profile`, `likes`, `list`, `collection`, `url`, and `widget`.
*data-timeline- (optional)**	When displaying a timeline, further arguments need to be provided in addition to `timeline-source-type`. For example, `data-timeline-screen-name="amphtml"` in combination with `data-timeline-source-type="profile"` will display a timeline of the AMP Twitter account. For details on the available arguments, see the "Timelines" section in Twitter's JavaScript Factory Functions Guide.
*data- (optional)**	You can specify options for the Tweet, Moment, or Timeline appearance by setting `data-` attributes. For example, `data-cards="hidden"` deactivates Twitter cards. For details on the available options, see Twitter's docs for tweets, for moments and for timelines.
title (optional)	Define a `title` attribute for the component. The default is `Twitter`.

Interactivity and API usage

Programmatically changing any of the attribute values will automatically update the element. For example, changing the tweet id via data-tweetid will automatically load the new tweet:

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
    />
    <style>
      bento-twitter {
        width: 375px;
        height: 472px;
      }
    </style>

</head>

<body>

<bento-twitter id="my-tweet" data-tweetid="885634330868850689">
    </bento-twitter>
    <div class="buttons" style="margin-top: 8px">
      <button id="change-tweet">Change tweet</button>
    </div>

    <script>
      (async () => {
        const twitter = document.querySelector('#my-tweet');

        // set up button actions
        document.querySelector('#change-tweet').onclick = () => {
          twitter.setAttribute('data-tweetid', '495719809695621121');
        };
      })();
    </script>

</body>

Preact/React Component

Import via npm

npm install @bentoproject/twitter

import React from 'react';
import {BentoTwitter} from '@bentoproject/twitter/react';
import '@bentoproject/twitter/styles.css';

function App() {
  return <BentoTwitter tweetid="1356304203044499462"></BentoTwitter>;
}

Layout and style

Container type

The BentoTwitter component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with height, width, aspect-ratio, or other such properties). These can be applied inline:

<BentoTwitter
  style={{width: 300, height: 100}}
  tweetid="1356304203044499462"
></BentoTwitter>

Or via className:

<BentoTwitter
  className="custom-styles"
  tweetid="1356304203044499462"
></BentoTwitter>

.custom-styles {
  height: 100px;
  width: 100%;
}

Props

tweetid / momentid / timelineSourceType (required)	The ID of the Tweet or Moment, or the source type if a Timeline should be displayed. In a URL like https://twitter.com/joemccann/status/640300967154597888, `640300967154597888` is the tweet id. In a URL like https://twitter.com/i/moments/1009149991452135424, `1009149991452135424` is the moment id. Valid timeline source types include `profile`, `likes`, `list`, `collection`, `url`, and `widget`.
card / conversations (optional)	When displaying a tweet, further arguments can be provided in addition to `tweetid`. For example, `cards="hidden"` in combination with `conversation="none"` will display a tweet without additional thumbnails or comments.
limit (optional)	When displaying a moment, further arguments can be provided in addition to `moment`. For example, `limit="5"` will display an embedded moment with up to five cards.
timelineScreenName / timelineUserId (optional)	When displaying a timeline, further arguments can be provided in addition to `timelineSourceType`. For example, `timelineScreenName="amphtml"` in combination with `timelineSourceType="profile"` will display a timeline of the AMP Twitter account.
options (optional)	You can specify options for the Tweet, Moment, or Timeline appearance by passing in an object to the `options` prop. For details on the available options, see Twitter's docs for tweets, for moments and for timelines. Note: When passing in the `options` prop, make sure to optimize or memoize the object: `const TWITTER_OPTIONS = { // make sure to define these once globally! }; function MyComponent() { // etc return ( <Twitter optionsProps={TWITTER_OPTIONS} /> ); }`
title (optional)	Define a `title` for the component iframe. The default is `Twitter`.

Bento Twitter

<head>

<body>

Web Component

Import via npm

Include via <script>

Example

<head>

<body>

Layout and style

Container type

Attributes

Interactivity and API usage

<head>

<body>

Preact/React Component

Import via npm

Layout and style

Container type

Props

Include via `<script>`