---json
{
    "description": "This article shows you the tweet web component and how you can use it to embed a tweet in your pages",
    "page_id": "81p1elltpj25lt806ieat",
    "title": "How to embed a tweet in your ComboStrap pages"
}
---
====== ComboStrap UI - Embedded Tweet ======


===== About =====
A ''tweet'' is a [[..:component|component]] that renders a tweet (called also embedded tweet) in your pages.


===== Syntax =====

A ''tweet'' is a [[..:block:blockquote|blockquote]]:
  * with a mandatory tweet URL in its [[docs:content:cite|cite tag]]
  * with optional [[#parameters]]

<code dw>
<blockquote parameterKey="parameterValue" >
    Content
    <cite>[[https://twitter.com/twitterHandle/status/twitterId|@handle date]]</cite>
</blockquote>
</code>


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 [[..:block:blockquote|blockquote tag]]  are listed in the below table.

^ Parameter ^ Possible Values ^ Default ^ Description ^ 
| lang | Two letters | [[docs:locale:lang|See lang]] | Language interface (if in the [[https://developer.twitter.com/en/docs/twitter-for-websites/supported-languages|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 | [[#theme|light]] | Displays Tweet in their [[#theme]] |
| width | 250-550px | 550px | same as [[docs:styling:dimension|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) ([[https://developer.twitter.com/en/docs/twitter-for-websites/privacy|privacy]])|



===== Example =====

==== Basic ====

Example from this [[https://twitter.com/combostrapweb/status/1357699797541601286|release tweet]]
<webcode name="Default" frameborder=0>
<code dw>
<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>
</code>

</webcode>

==== Advanced ====
The same tweet than in the [[#basic|basic example]] but with the following properties:
  * Centered, 
  * Max Width, 
  * GUI in French,
  * Dark Theme 
  * Hidden Cards
and without any content.


<webcode name="Default" frameborder="0" >
<code dw>
<blockquote lang="fr" width="300px" cards="hidden" align="center" theme="dark">
<cite>[[https://twitter.com/combostrapweb/status/1357699797541601286]]</cite>
</blockquote>
</code>
</webcode>





===== Configuration =====


==== Theme ====

The ''twitter:widgets:theme'' is a [[docs:app:configuration|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 [[docs:app:configuration|configuration]] that sets the default value of the border. Value: ''#55acee''

==== Do Not Track ====
The ''twitter:dnt'' (''Do Not Track - dnt'') is a [[docs:app:configuration|configuration]] that sets the [[https://developer.twitter.com/en/docs/twitter-for-websites/webpage-properties|privacy policy]]. 

Values:
  * ''on'' (default)
  * ''off''

<note>This value can also be [[#syntax|set by tweet with the value true/false]]</note>


===== HTML =====

If you accepts HTML in your page via a HTMLOk Plugin, you can embedded them directly.

<note>
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.
</note>

Go to:
  *the [[https://publish.twitter.com/|meta generator]]
  *or in the twitter timeline

{{docs:block:tweet_embeded_tweet.png|}}


  * Grab the HTML code 
<note>As you can see twitter also see an embedded tweet as a quote.</note>
  * Put it between ''html'' tag.
<code html>
<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>
</code>

<note>
This method adds the ''widget.js'' everytime while the tweet syntax will take care of it and embed it only once.
</note>



===== Documentation / Reference =====
  * [[https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/overview|The official embedded tweet documentation]]