ComboStrap UI - Embedded Tweet

About

A tweet is a component that renders a tweet (called also embedded tweet) in your pages.

Since version 1.12

Syntax

A tweet is a blockquote:

<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>

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 tweet 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

HTML

If you accepts HTML in your page, 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:

  • 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.

Documentation / Reference

Powered by ComboStrap