●Twitterの埋め込み
twitterも埋め込みタグを作ってくれますが、これには2種類あります。単独の投稿の埋め込みタグと、特定のアカウントの投稿ページの埋め込みタグです。後者は、フレームサイズに入りきらないので、スクロールバーで表示範囲を変化させます。
前者は、アプリの画面そのままを埋め込むため、<iframeタグは使っていません。内容は難しいのですが、タグの取得は簡単です。
埋め込みたい投稿の右上の∨メニューを開き、埋め込みコードの入手をクリックし、次の画面で「クリップボードにコピー」、メモ帳を開いて張り付けます。
<blockquote class="twitter-tweet"><p
lang="ja" dir="ltr">マスク・手洗い・外出自粛・ソーシャルディスタンス・アラートと言っているうちに、梅雨入り。郊外に出ると、いつもの梅雨の風景が。でも、雨空にもかかわらず、車は多く出ていました。我慢できないですね。 <a
href="https://t.co/OU49OIzPOS">pic.twitter.com/OU49OIzPOS</a></p>—
Win坊🧙 (@nobuszk)
<a href="https://twitter.com/nobuszk/status/1271714848137601026?ref_src=twsrc%5Etfw">June 13, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<a href="https://twitter.com/nobuszk/status/1271714848137601026?ref_src=twsrc%5Etfw">June 13, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
複雑なタグになっていますが、部分的には理解できると思います。<script は、外部ファイルのJavascriptを使う宣言です。これが、文字コードutf-8を使っているので、htmlも世界標準のutf-8を使う方が良いのです。このような埋め込みタグは、新しいhtmlを知る教材です。ブラウザで開くと、ネットからjavascriptをダウンドードするので、若干時間があって、この様に表示されます。
●特定のアカウントのtwitterタイムラインを埋め込む場合
ここに繋ぎます。アカウント名を入れて、→をクリックすると、下にタグコピーボタンが出ます。
アカウント名は、twitterの署名の後ろにある＠から始まる半角文字です。＠から入れます。
アカウント名は、twitterの署名の後ろにある＠から始まる半角文字です。＠から入れます。
<a
class="twitter-timeline"
data-width="480" data-height="600"
href="https://twitter.com/nobuszk?ref_src=twsrc%5Etfw">Tweets by
nobuszk</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
自分のホームページや、blogのページに、このhtmlタグを書き込めば、ページ内でtwitterを見せることができます。自分のtwiterでなくとも埋め込めるので、書き込みには注意してください。誰が拡散するか分かりません。スクロールバーで、すべての投稿が見られます。facebookは、埋め込めません。
■ポイント 埋め込みタグは、webデータの共有だけでなく、htmlの勉強になります。