Twitterタイムラインの埋め込み方

以下のサイトから埋め込み用のコードを生成します
https://publish.twitter.com/#

埋め込み対象のTwitterURLを入力します

埋め込みタイムラインを選択

生成されるコードをコピー

下の方にプレビューが表示されます。

Angularへの組み込み

生成したコードをそのまま貼り付けるだけです

src/app/top/twitter/twitter.component.ts

<div class="top-contents">
  <h4 class="title">Twitter</h4>

  <a class="twitter-timeline" href="https://twitter.com/teracy55?ref_src=twsrc%5Etfw">Tweets by teracy55</a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

確認

表示されないですね。。。

解決策？

こちらを参考にさせていただきました。
FacebookとTwitterの公式シェアボタンをSPAで表示する方法

生成された<script>タグをindex.htmlの<head>タグ内に移動します

src/index.html

<html lang="ja">
<head>
  ・・・
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

タイムライン表示をしたい画面のHTMLファイルで<a>タグのみを配置します

src/app/top/twitter/twitter.component.html

<div class="top-contents">
  <a *ngIf="!isLoading" class="twitter-timeline" data-lang="en" data-width="300" data-height="500"
    href="https://twitter.com/teracy55?ref_src=twsrc%5Etfw">Tweets by teracy55</a>
</div>

TwitterComponentでTwitterウィジェットのload()を呼び出します
- https://platform.twitter.com/widgets.jsが読み込めている場合はtwttrが見れるようになっています

src/app/top/twitter/twitter.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-top-twitter',
  templateUrl: './twitter.component.html',
  styleUrls: ['./twitter.component.scss']
})
export class TopTwitterComponent implements OnInit {
  ngOnInit() {
    // Twitterウィジェットの読み込み
    if (window['twttr']) {
      window[`twttr`].widgets.load();
    }
  }
}

Twitterの仕様が変わったら動かなくなる可能性が高いので、おいおい考えることにします。

こんな感じになりました

がたがたですが、これは後々調整していきます

まとめ

モヤモヤは残りますが、とりあえずTwitterのタイムラインも表示できました。
次はNews部分を表示して、TOPページをFixしたいと思います。

次回：Angular９とFirebaseでブログを作ってみる９（Analyticsを使ってみる）

Angular９とFirebaseでブログを作ってみる８（Twitterタイムラインを埋め込んでみる）