ComboStrap UI - Embedded Tweet
About
A tweet is a component that renders a tweet (called also embedded tweet) in your pages.
Syntax
A tweet is a blockquote:
- with a mandatory tweet URL in its cite tag
- with optional parameters
<blockquote parameterKey="parameterValue" >
Content
<cite>[[https://twitter.com/twitterHandle/status/twitterId|@handle date]]</cite>
</blockquote>
The content is optional and is used:
- by search engine
- in case of fallback when the tweet was deleted or twitter is not reachable.
The parameters that you can set as attribute of the blockquote tag are listed in the below table.
| Parameter | Possible Values | Default | Description |
|---|---|---|---|
| lang | Two letters | See lang | Language interface (if in the supported language otherwise en) |
| cards | hidden | links in a Tweet are not expanded to photo, video, or link previews | |
| conversation | none | if set, only the cited Tweet will be displayed even if it is in reply to another Tweet | |
| theme | light/dark | light | Displays Tweet in their theme |
| width | 250-550px | 550px | same as width (maximum width of the rendered Tweet in whole pixels) |
| align | left, right, or center | center | Float the Tweet |
| dnt | true/false | true | dont not track (dnt) (privacy) |
Example
Basic
Example from this release tweet
<blockquote>
New big release. 1.12 \\
Page analytics and Page Quality module were implemented \\
to improve SEO via the overal quality of the website. \\
There is so much new that it's difficult to summarize it in one tweet. \\
\\
See the change logs [[https://t.co/AJWxMRH3GQ]] \\
<cite>[[https://twitter.com/combostrapweb/status/1357699797541601286?ref_src=twsrc%5Etfw|combostrapweb (@combostrapweb) February 5, 2021]]</cite>
</blockquote>
New big release. 1.12
Page analytics and Page Quality module were implemented
to improve SEO via the overal quality of the website.
There is so much new that it's difficult to summarize it in one tweet.
See the change logs https://t.co/AJWxMRH3GQ
Advanced
The same tweet than in the basic example but with the following properties:
- Centered,
- Max Width,
- GUI in French,
- Dark Theme
- Hidden Cards
and without any content.
<blockquote lang="fr" width="300px" cards="hidden" align="center" theme="dark">
<cite>[[https://twitter.com/combostrapweb/status/1357699797541601286]]</cite>
</blockquote>
Configuration
Theme
The twitter:widgets:theme is a configuration that sets the default theme value for the website.
Possible values:
- light: Default
- dark: Displays Tweet with light text over a dark background.
Border-color
The twitter:widgets:border-color is a configuration that sets the default value of the border. Value: #55acee
Do Not Track
The twitter:dnt (Do Not Track - dnt) is a configuration that sets the privacy policy.
Values:
- on (default)
- off
This value can also be set by tweet with the value true/false
HTML
If you accepts HTML in your page via a HTMLOk Plugin, you can embedded them directly.
This is not the recommended way because:
- you allows html and opens the door to cross site attack (XSS)
- the twitter javascript is not managed and is embedded each time.
but it works and may fit your needs.
Go to:
- the meta generator
- or in the twitter timeline
- Grab the HTML code
As you can see twitter also see an embedded tweet as a quote.
- Put it between html tag.
<html>
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">
The tweet content
<a href="https://twitter.com/combostrapweb/status/1357699797541601286?ref_src=twsrc%5Etfw">February 5, 2021</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</html>
This method adds the widget.js everytime while the tweet syntax will take care of it and embed it only once.