Tweet tweeter, X, embed, align,

  • Embed
  • Align
  • Adjust width
  • Align right 300 px
  • Margins ???

Embed

How to embed a Tweet on your website or blog

Click the  ... icon located within the Tweet.

From the menu, select Embed Tweet.

This will open publish.twitter.com where you can customize the look of the embedded Tweet by clicking set customization options.

If the Tweet is a reply to another Tweet, you can check Hide Conversation to hide the original Tweet.

Once you like the look of the embedded Tweet, copy the code provided by clicking the Copy Code button.

Paste the code into your blog or website.

Does not appear in Compose View, only in the preview

How to embed a post on your website or blog X Help Center

Align

How to Center Align Your Embedded Tweets [Quick Tip]

1. In the HTML, do a Ctrl F search for twitter-tweet to find your embedded tweet.

2. Find the first row of the embedded tweet, where it reads <blockquote class="twitter-tweet">

3. Insert tw-align-center after twitter-tweet, and be sure to include a space after the word tweet.

The final product will read: <blockquote class="twitter-tweet tw-align-center">

Mar 16, 2013

Varying 'Embed Tweet' Dimensions? - Publisher Tools / Twitter for Websites - Twitter Developers

When embedding a tweet the first line will look something like this:
blockquote class=“twitter-tweet” lang=“en”>
Just add width=“x” after the lang component…
blockquote class=“twitter-tweet” lang=“en” width=“325”>

Align right 300 px

<blockquote

    class="twitter-tweet tw-align-right"
    data-conversation="none"
    data-lang="en" 
   width="300px"
>



Custom CSS | Docs | Twitter Developer Platform

blockquote.twitter-tweet {

  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 0 16px 16px 16px;
  max-width: 468px;

}
blockquote.twitter-tweet p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

blockquote.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;

}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}

Margins

Margin - Tailwind CSS

Add margin to all sides
Control the margin on all sides of an element using the m-{size} utilities.

<div class="bg-gray-400"><span class="m-8 bg-yellow-200">Target</span></div>

Comments