The Bento Twitter component allows you to embed a Tweet or Moment. Use it as a web component <bento-twitter>, or a Preact/React functional component <BentoTwitter>.

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.

The examples below demonstrate use of the <bento-twitter> web component.

Example: Import via npm

[example preview="top-frame" playground="false"]

Install via npm:

npm install @ampproject/bento-twitter

import '@ampproject/bento-twitter';

[/example]

Example: Include via `<script>`

[example preview="top-frame" playground="false"]

<head>
  <script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
  <style data-bento-boilerplate>
    bento-twitter {
      display: block;
      overflow: hidden;
      position: relative;
    }
  </style>
  <!-- TODO(wg-bento): Once available, change src to bento-twitter.js -->
  <script async src="https://cdn.ampproject.org/v0/amp-twitter-1.0.js"></script>
  <style>
    bento-twitter {
      width: 375px;
      height: 472px;
    }
  </style>
</head>
<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');
    await customElements.whenDefined('bento-twitter');

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

[/example]

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/amp-twitter-1.0.css">

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

<style data-bento-boilerplate>
  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`.

Preact/React Component

The examples below demonstrate use of the <BentoTwitter> as a functional component usable with the Preact or React libraries.

Example: Import via npm

[example preview="top-frame" playground="false"]

Install via npm:

npm install @ampproject/bento-twitter

import React from 'react';
import { BentoTwitter } from '@ampproject/bento-twitter/react';
import '@ampproject/bento-twitter/styles.css';

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

[/example]

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: '300px', height: '100px'}}  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 ( ); }`
title (optional)	Define a `title` for the component iframe. The default is `Twitter`.

FAQs

What is @ampproject/amp-twitter?

Is @ampproject/amp-twitter well maintained?

Package last updated on 14 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@ampproject/amp-twitter

Bento Twitter

Behavior

Web Component

Example: Import via npm

Example: Include via <script>

Layout and style

Attributes

Preact/React Component

Example: Import via npm

Layout and style

Props

Related posts

Package Maintainers Call for Improvements to GitHub’s New npm Security Plan

Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain

Example: Include via `<script>`