Bento Twitter
Behavior
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-twitterimport '@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-twitterimport 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!
};
|
| title (optional) | Define a title for the component iframe. The default is Twitter. |