···11-# Twitframe
11+# twitframe
2233-Twitframe allows one to display
44-[Embedded Tweets](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/overview)
33+twitframe allows one to display
44+[Embedded Tweets](https://developer.x.com/en/docs/x-for-websites/embedded-tweets/overview)
55on websites to dynamically show retweet and favorite counts, inline media/card
66data, and allow users to retweet/reply/favorite Tweets, all while isolating the
77Javascript and DOM manipulation to an embedded <tt>iframe</tt>.
88This increases security and speeds up website page loads.
991010-For more information on using Twitframe, view the
1111-[website](https://twitframe.com/).
1010+For more information on using twitframe, view the [website](https://tf.rita.moe/).
+271-213
index.html
···11<!DOCTYPE html>
22<html>
33<head>
44- <title>Twitframe - Embed Tweets in an iframe</title>
55- <style type="text/css">
66- body {
77- font-family: helvetica neue, arial, helvetica, sans-serif;
88- font-size: 10pt;
99- margin: 1em;
1010- max-width: 760px;
1111- margin-left: auto;
1212- margin-right: auto;
1313- }
1414- h1 {
1515- margin: 0;
1616- }
1717- a {
1818- color: #0000dd;
1919- }
2020- code, pre {
2121- background-color: #f2f2f2;
2222- display: block;
2323- outline: 1px solid #bbb;
2424- margin: 1em;
2525- padding: 1em;
2626- overflow-x: auto;
2727- }
2828- iframe, div.iframe {
2929- margin-left: 1em;
3030- font-family: serif;
3131- font-size: 12pt;
3232- }
3333- div.iframe {
3434- background-color: #fafafa;
3535- padding: 1em;
3636- height: 250px;
3737- width: 550px;
3838- overflow-x: auto;
3939- }
4040- div.iframe, iframe.gray {
4141- background-color: #fafafa;
4242- }
4343- tt {
4444- color: green;
4545- }
4646- hr {
4747- border: 1px solid gray;
4848- }
4949- </style>
5050- <script src="/jquery-1.9.1.min.js"></script>
44+ <meta charset="UTF-8">
55+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
66+ <title>twitframe</title>
77+ <meta name="description" content="Embed Tweets in an iframe">
88+ <style>
99+ body {
1010+ font-family: helvetica neue, arial, helvetica, sans-serif;
1111+ font-size: 10pt;
1212+ margin: 1em auto;
1313+ max-width: 760px;
1414+ }
1515+1616+ h1 {
1717+ margin: 0;
1818+ }
1919+2020+ a {
2121+ color: #0000dd;
2222+ }
2323+2424+ code,
2525+ pre {
2626+ background-color: #f2f2f2;
2727+ display: block;
2828+ margin: 1em auto;
2929+ outline: 1px solid #bbb;
3030+ overflow-x: auto;
3131+ padding: 1em;
3232+ }
3333+3434+ div.iframe,
3535+ iframe {
3636+ font-family: serif;
3737+ font-size: 12pt;
3838+ margin-left: 1em;
3939+ }
4040+4141+ div.iframe {
4242+ background-color: #fafafa;
4343+ height: 250px;
4444+ overflow-x: auto;
4545+ padding: 1em;
4646+ width: 550px;
4747+ }
4848+4949+ div.iframe,
5050+ iframe.gray {
5151+ background-color: #fafafa;
5252+ }
5353+5454+ tt {
5555+ color: green;
5656+ }
5757+5858+ hr {
5959+ border: 1px solid gray;
6060+ }
6161+ </style>
5162</head>
5263<body>
6464+ <h1>twitframe</h1>
53655454-<h1>Twitframe</h1>
6666+ <p>
6767+ twitframe allows one to display
6868+ <a
6969+ href="https://developer.x.com/en/docs/x-for-websites/embedded-tweets/overview"
7070+ rel="noopener noreferrer"
7171+ target="_blank"
7272+ >Embedded Tweets</a> on websites to dynamically show retweet and favorite counts, inline media/card data,
7373+ and allow users to retweet/reply/favorite Tweets, all while isolating the Javascript and DOM manipulation in an <tt>iframe</tt>.
7474+ This increases security and speeds up website page loads.
7575+ </p>
55765656-<p>
5757-Twitframe allows one to display <a
5858-href="https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/overview">Embedded Tweets</a>
5959-on websites to dynamically show retweet and favorite counts, inline media/card
6060-data, and allow users to retweet/reply/favorite Tweets, all while isolating the
6161-Javascript and DOM manipulation to an embedded <tt>iframe</tt>.
6262-This increases security and speeds up website page loads.
6363-</p>
7777+ <p style="color: gray; font-style: italic;">
7878+ This is an independent service not affiliated with Twitter in any way.
7979+ No guarantee of availability or security is made by using this service.
8080+ </p>
64816565-<p style="color: gray; font-style: italic;">
6666-This is an independent service not affiliated with Twitter in any way.
6767-No guarantee of availability or security is made by using this service.
6868-</p>
8282+ <p style="color: gray; font-style: italic;">
8383+ You're currently browsing a version of twitframe hosted by <strong>Rita.moe</strong>, with slight modifications to the original code.
8484+ </p>
69857070-<h3>Use</h3>
8686+ <h3>Use</h3>
71877272-<p>
7373-Add an <tt><iframe></tt> to your HTML document and pass (at least) the
7474-full URL to the Tweet as a <a
7575-href="https://en.wikipedia.org/wiki/Percent-encoding">URL-encoded</a>
7676-parameter <tt>url</tt> to <tt>http://twitframe.com/show</tt>:
7777-</p>
8888+ <p>
8989+ Add an <tt><iframe></tt> to your HTML document and pass (at least) the full URL to the Tweet as a
9090+ <a
9191+ rel="noopener noreferrer"
9292+ target="_blank"
9393+ href="https://en.wikipedia.org/wiki/Percent-encoding"
9494+ >URL-encoded</a> parameter <tt>url</tt> to <tt>http://tf.rita.moe/show</tt>:
9595+ </p>
78967979-<p>
8080-<code>
8181- <iframe border=0 frameborder=0 height=250 width=550
8282- <br>
8383- src="https://twitframe.com/show?<span style="color: green;"
8484- >url=https%3A%2F%2Ftwitter.com%2Fjack%2Fstatus%2F20</span>"></iframe>
8585-</code>
8686-</p>
9797+ <p>
9898+ <code>
9999+ <iframe border="0" frameborder="0" height="250" width="550"<br>
100100+ src="https://tf.rita.moe/show?<span style="color: green;">url=https%3A%2F%2Ftwitter.com%2Fjack%2Fstatus%2F20</span>"><br>
101101+ </iframe>
102102+ </code>
103103+ </p>
871048888-<p>
8989-This example code would produce the following (without the gray background):
9090-</p>
105105+ <p>
106106+ This example code would produce the following (without the gray background):
107107+ </p>
911089292-<iframe border=0 frameborder=0 height=250 width=550 class="gray"
9393-src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2Fjack%2Fstatus%2F20"></iframe>
109109+ <iframe
110110+ border="0"
111111+ class="gray"
112112+ frameborder="0"
113113+ height="300"
114114+ src="https://tf.rita.moe/show?url=https%3A%2F%2Ftwitter.com%2Fjack%2Fstatus%2F20"
115115+ width="550"
116116+ ></iframe>
941179595-<p>
9696-Note that a height of 250 may be too big for short tweets such as this one,
9797-but too small for long tweets with embedded media. See <a
9898-href="#sizing">sizing</a> below to automatically size the <tt>iframe</tt> based
9999-on its size.
100100-</p>
118118+ <p>
119119+ Note that a height of 300 may be too big for short tweets such as this one, but too small for long tweets with embedded media.
120120+ See <a href="#sizing">sizing</a> below to automatically size the <tt>iframe</tt> based on its size.
121121+ </p>
101122102102-<p>
103103-<h3>Graceful Degredation</h3>
104104-</p>
123123+ <p>
124124+ <h3>Graceful Degredation</h3>
125125+ </p>
105126106106-<p>
107107-If the Tweet data is known beforehand, it can be passed to Twitframe to be
108108-displayed before Twitter's Javascript loads.
109109-The following parameters may be passed:
110110-</p>
127127+ <p>
128128+ If the Tweet data is known beforehand, it can be passed to twitframe to be displayed before Twitter's Javascript loads.
129129+ The following parameters may be passed:
130130+ </p>
111131112112-<p>
113113-<ul>
114114-<li><tt>tweet</tt> - The full text of the Tweet</li>
115115-<li><tt>author_name</tt> - The full name of the Tweet's author</li>
116116-<li><tt>author_username</tt> - The username of the Tweet's author, including
117117- the @ sign</li>
118118-<li><tt>datetime</tt> - The date and time of the Tweet, in ISO 8601 format or a
119119- Unix timestamp</li>
120120-</ul>
121121-</p>
132132+ <p>
133133+ <ul>
134134+ <li><tt>tweet</tt> - The full text of the Tweet</li>
135135+ <li><tt>author_name</tt> - The full name of the Tweet's author</li>
136136+ <li><tt>author_username</tt> - The username of the Tweet's author, including the @ sign</li>
137137+ <li><tt>datetime</tt> - The date and time of the Tweet, in ISO 8601 format or a Unix timestamp</li>
138138+ </ul>
139139+ </p>
122140123123-<p>
124124-Each parameter should be properly URL-encoded when used as the URL for the
125125-iframe. An example using PHP:
126126-</p>
141141+ <p>
142142+ Each parameter should be properly URL-encoded when used as the URL for the iframe. An example using PHP:
143143+ </p>
127144128128-<p>
145145+ <p>
129146<pre>
130147<?php
131131-132132- $tf = "https://twitframe.com/show?" . http_build_query(array(
133133- "url" => "https://twitter.com/jack/status/20",
134134- "tweet" => "just setting up my twttr",
135135- "author_name" => "Jack Dorsey",
136136- "author_username" => "jack",
137137- "datetime" => "1142974214",
138138- ));
148148+ $tf = "https://tf.rita.moe/show?" . http_build_query(array(
149149+ "url" => "https://twitter.com/jack/status/20",
150150+ "tweet" => "just setting up my twttr",
151151+ "author_name" => "Jack Dorsey",
152152+ "author_username" => "jack",
153153+ "datetime" => "1142974214",
154154+ ));
139155140140- echo "<iframe border=0 frameborder=0 height=250 width=550 "
141141- . "src=\"" . $tf . "\"></iframe>";
156156+ echo "<iframe border=\"0\" frameborder=\"0\" height=\"250\" width=\"550\" "
157157+ . "src=\"" . $tf . "\"></iframe>";
142158?>
143159</pre>
144144-</p>
160160+ </p>
145161146146-<p>
147147-If Twitter's Javascript could not be loaded, this example would produce the
148148-following (without the gray background):
149149-</p>
162162+ <p>
163163+ If Twitter's Javascript could not be loaded, this example would produce the following (without the gray background):
164164+ </p>
150165151151-<p>
152152-<iframe border=0 frameborder=0 height=250 width=550 class="gray"
153153-src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2Fjack%2Fstatus%2F20&tweet=just+setting+up+my+twttr&author_name=Jack+Dorsey&author_username=jack&datetime=1142974214&force_fail=1"></iframe>
154154-</p>
166166+ <p>
167167+ <iframe
168168+ border="0"
169169+ class="gray"
170170+ frameborder="0"
171171+ height="300"
172172+ src="https://tf.rita.moe/show?url=https%3A%2F%2Ftwitter.com%2Fjack%2Fstatus%2F20&tweet=just+setting+up+my+twttr&author_name=Jack+Dorsey&author_username=jack&datetime=1142974214&force_fail=1"
173173+ width="550"
174174+ ></iframe>
175175+ </p>
155176156156-<h3>Styling</h3>
177177+ <h3>Styling</h3>
157178158158-<p>
159159-The following optional parameters may be passed to affect the style of the
160160-embedded Tweet. These are passed directly through to Twitter's Javascript.
161161-</p>
179179+ <p>
180180+ The following optional parameters may be passed to affect the style of the embedded Tweet.
181181+ These are passed directly through to Twitter's Javascript.
182182+ </p>
162183163163-<p>
164164-<ul>
165165-<li><tt style="color: green;">align</tt> - Alignment of the embedded Tweet
166166- inside the iframe - can be <tt style="color: green;">left</tt>,
167167-<tt style="color: green;">center</tt>, or
168168-<tt style="color: green;">right</tt></li>
184184+ <p>
185185+ <ul>
186186+ <li>
187187+ <tt style="color: green;">align</tt>
188188+ - Alignment of the embedded Tweet inside the iframe - can be
189189+ <tt style="color: green;">left</tt>,
190190+ <tt style="color: green;">center</tt>, or
191191+ <tt style="color: green;">right</tt>
192192+ </li>
169193170170-<li><tt style="color: green;">link_color</tt> - Hex code for link color
194194+ <li>
195195+ <tt style="color: green;">link_color</tt>
196196+ - Hex code for link color
197197+ </li>
171198172172-<li><tt style="color: green;">theme</tt> - <a
173173-href="https://dev.twitter.com/web/embedded-tweets/parameters">Theme</a> of
174174-Tweet display (such as <tt>dark</tt>)
199199+ <li>
200200+ <tt style="color: green;">theme</tt>
201201+ - <a
202202+ rel="noopener noreferrer"
203203+ target="_blank"
204204+ href="https://dev.twitter.com/web/embedded-tweets/parameters"
205205+ >Theme</a> of Tweet display (such as <tt>dark</tt>)
206206+ </li>
175207176176-<li><tt style="color: green;">conversation</tt> - Disable showing previous
177177-Tweet in a thread when set to <tt>none</tt>
178178-</ul>
179179-</p>
208208+ <li>
209209+ <tt style="color: green;">conversation</tt>
210210+ - Disable showing previous Tweet in a thread when set to <tt>none</tt>
211211+ </li>
212212+ </ul>
213213+ </p>
180214181181-<h3 id="sizing">Sizing</h3>
215215+ <h3 id="sizing">Sizing</h3>
182216183183-<p>
184184-As with any iframe, its height and width within the parent document are static,
185185-and must be included as attributes in the <tt><iframe></tt> tag or
186186-applied with CSS. Reasonable recommendations to display most Tweets (without
187187-embedded media) without scrolling are <tt>height=250</tt> and
188188-<tt>width=550</tt>. To automatically resize the height of the iframe after it
189189-has loaded, some Javascript is required.
190190-</p>
217217+ <p>
218218+ As with any iframe, its height and width within the parent document are static, and must be included as attributes in the
219219+ <tt><iframe></tt> tag or applied with CSS. Reasonable recommendations to display most Tweets (without embedded media)
220220+ without scrolling are <tt>height="300"</tt> and <tt>width="550"</tt>.
221221+ To automatically resize the height of the iframe after it has loaded, some Javascript is required.
222222+ </p>
191223192192-<p>
193193-Since a parent HTML page loading an iframe from <tt>twitframe.com</tt> has
194194-loaded a cross-origin resource, the parent HTML page is not permitted to
195195-access the iframe's DOM to find out its height. Newer browsers implementing
196196-<tt><a href="https://developer.mozilla.org/en-US/docs/DOM/window.postMessage">window.postMessage</a></tt>
197197-can send a message to the twitframe.com iframe (which it is listening for) and
198198-request its height after Twitter's Javascript loads. <tt>twitframe.com</tt>
199199-will send a response message with the height after it has loaded the Twitter
200200-content.
201201-</p>
224224+ <p>
225225+ Since a parent HTML page loading an iframe from <tt>tf.rita.moe</tt> has loaded a cross-origin resource, the parent HTML page is not
226226+ permitted to access the iframe's DOM to find out its height. Newer browsers implementing
227227+ <tt><a
228228+ rel="noopener noreferrer"
229229+ target="_blank"
230230+ href="https://developer.mozilla.org/en-US/docs/DOM/window.postMessage"
231231+ >window.postMessage</a></tt>
232232+ can send a message to the tf.rita.moe iframe (which it is listening for) and request its height after Twitter's Javascript loads.
233233+ <tt>tf.rita.moe</tt> will send a response message with the height after it has loaded the Twitter content.
234234+ </p>
202235203203-<p>
204204-Using jQuery, the following code will send a message to each
205205-<tt><iframe></tt> element on the page that you have named like
206206-"<tt>tweet_281974362784022528</tt>":
207207-</p>
236236+ <p>
237237+ Using Javascript, the following code will send a message to each <tt><iframe></tt> element on the page that you have named like
238238+ "<tt>tweet_281974362784022528</tt>":
239239+ </p>
208240209209-<p>
241241+ <p>
210242<pre>
211211-$(document).ready(function() {
212212- /* find all iframes with ids starting with "tweet_" */
213213- $("iframe[id^='tweet_']").load(function() {
214214- this.contentWindow.postMessage({ element: this.id, query: "height" },
215215- "https://twitframe.com");
216216- });
217217-});
243243+document.addEventListener('DOMContentLoaded', () => {
244244+ // Find all iframes with ids starting with "tweet_"
245245+ const tweetIframes = document.querySelectorAll('iframe[id^="tweet_"]')
246246+ tweetIframes.forEach((iframe) => {
247247+ iframe.addEventListener('load', () => {
248248+ iframe.contentWindow.postMessage(
249249+ {
250250+ element: iframe.id,
251251+ query: 'height'
252252+ },
253253+ 'https://tf.rita.moe',
254254+ )
255255+ })
256256+ })
257257+})
258258+259259+// Listen for the return message once the tweet has been loaded
260260+window.addEventListener('message', (e) => {
261261+ if (e.origin !== 'https://tf.rita.moe') return
218262219219-/* listen for the return message once the tweet has been loaded */
220220-$(window).bind("message", function(e) {
221221- var oe = e.originalEvent;
222222- if (oe.origin != "https://twitframe.com")
223223- return;
224224-225225- if (oe.data.height && oe.data.element.match(/^tweet_/))
226226- $("#" + oe.data.element).css("height", parseInt(oe.data.height) + "px");
227227-});
263263+ const data = e.data
264264+ if (data?.height && data?.element?.match(/^tweet_/)) {
265265+ const iframe = document.getElementById(data.element)
266266+ if (iframe) {
267267+ iframe.style.height = parseInt(data.height, 10) + 'px'
268268+ }
269269+ }
270270+})
228271</pre>
229229-</p>
272272+ </p>
230273231231-<p>
232232-This code resizes the Twitframe iframes after they have loaded, increasing
233233-the height to display the embedded card information.
234234-</p>
274274+ <p>
275275+ This code resizes the twitframe iframes after they have loaded, increasing the height to display the embedded card information.
276276+ </p>
235277236236-<iframe id="tweet_1291863596922806273" border=0 frameborder=0
237237-src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2Felonmusk%2Fstatus%2F1604617643973124097&conversation=none"
238238-width=550 height=200></iframe>
239239-240240-<script>
241241-$(document).ready(function() {
242242- $("iframe[id^='tweet_']").load(function() {
243243- this.contentWindow.postMessage({ element: this.id,
244244- query: "height" }, "https://twitframe.com");
245245- });
246246-});
278278+ <iframe
279279+ border="0"
280280+ frameborder="0"
281281+ height="300"
282282+ id="tweet_1291863596922806273"
283283+ src="https://tf.rita.moe/show?url=https%3A%2F%2Ftwitter.com%2Felonmusk%2Fstatus%2F1604617643973124097&conversation=none"
284284+ width="550"
285285+ ></iframe>
247286248248-/* listen for the return message once the tweet has been loaded */
249249-$(window).bind("message", function(e) {
250250- var oe = e.originalEvent;
287287+ <script>
288288+ document.addEventListener('DOMContentLoaded', () => {
289289+ // Find all iframes with ids starting with "tweet_"
290290+ const tweetIframes = document.querySelectorAll('iframe[id^="tweet_"]')
291291+ tweetIframes.forEach((iframe) => {
292292+ iframe.addEventListener('load', () => {
293293+ iframe.contentWindow.postMessage(
294294+ {
295295+ element: iframe.id,
296296+ query: 'height'
297297+ },
298298+ 'https://tf.rita.moe',
299299+ )
300300+ })
301301+ })
302302+ })
251303252252- if (oe.origin != "https://twitframe.com")
253253- return;
304304+ // Listen for the return message once the tweet has been loaded
305305+ window.addEventListener('message', (e) => {
306306+ if (e.origin !== 'https://tf.rita.moe') return
254307255255- if (oe.data.height && oe.data.element.match(/^tweet_/))
256256- $("#" + oe.data.element).css("height", parseInt(oe.data.height) + "px");
257257-});
258258-</script>
308308+ const data = e.data
309309+ if (data?.height && data?.element?.match(/^tweet_/)) {
310310+ const iframe = document.getElementById(data.element)
311311+ if (iframe) {
312312+ iframe.style.height = parseInt(data.height, 10) + 'px'
313313+ }
314314+ }
315315+ })
316316+ </script>
259317</body>
260318</html>