Twitter 타임라인을 포함하는 방법

다음 사이트에서 퍼가기 위한 코드를 생성합니다.
htps : // 푸bぃsh. 라고 r. 이 m/#

포함할 Twitter URL을 입력합니다.

포함된 타임라인 선택

생성된 코드 복사

아래쪽에 미리보기가 표시됩니다.

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하고 싶습니다.

다음 번 : Angular9와 Firebase에서 블로그를 만들어 보는 9(Analytics를 사용해 본다)

Reference

이 문제에 관하여(Angular 9와 Firebase에서 블로그를 만들어 보는 8 (Twitter 타임 라인을 임베드 해 본다)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/teracy164/items/71c84c59100bd312044c

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다