Embedding twitter timeline does not render in angular 7

Question

I am following https://help.twitter.com/en/using-twitter/embed-twitter-feed for embedding timeline in the angular page. Only button renders but not the actual timeline.

The index.html looks like:

<body style="margin:0">
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    <app-root></app-root>
</body>

app.component.html looks like below:

<a class="twitter-timeline"
   href="https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw">
      A Twitter List by TwitterDev
</a>

Also tried things like app.component.ts:

ngOnInit(){
   if ((<any>window).twttr.ready())
      (<any>window).twttr.widgets.load();
}

But no luck

Just tried it in stackblitz and it seems to be working https://stackblitz.com/edit/angular-2mbweb — yurzui, Jun 20 '19 at 03:09
yes ur code works in stackblitz but for me it does not. it only works if i put this on index.html. but not in app.components.html — Moblize IT, Jun 20 '19 at 05:07
i tried a brand new project and all works there. but it is like a blank angular project. so some package messing up probably. the issue is i dont see any error etc. — Moblize IT, Jun 20 '19 at 15:31
the `widgets.js` must be load after the `twitter-timeline` element is render so the best case is load the script dynamically check my answe and the link for the demo @MoblizeIT — Muhammed Albarmavi, Jun 24 '19 at 12:18
@yurzui example is working because the element render before the script has been loaded in my example I create a component for twitter widgets so I must load the script after the component is loaded — Muhammed Albarmavi, Jun 24 '19 at 12:29
@yurzui check my example https://stackblitz.com/edit/angular-twitter-widgets — Muhammed Albarmavi, Jun 24 '19 at 12:30
I just want to mention there is some angular package for handling embedding twitter timeline check this https://www.npmjs.com/package/ngx-tweet — Muhammed Albarmavi, Jun 27 '19 at 04:07

Muhammed Albarmavi · Answer 1 · 2019-06-27T08:01:33.267

you need to load widgets.js script after twitter-timeline element is been render so if you place the script in index.html it is will load and the element hasn't render yet.

the best way around it is to create a script tag dynamically after the element is rendered.

twitter component

export class TwitterComponent  {

  @Input() user:string;

  constructor(private renderer2: Renderer2,private el: ElementRef) {}

  ngAfterViewInit() {

    let scriptEl = document.createElement('script');
    scriptEl.src = "https://platform.twitter.com/widgets.js"

    this.renderer2.appendChild(this.el.nativeElement, scriptEl);

  }

}

template

<a class="twitter-timeline" href="https://twitter.com/{{user}}">Tweets by {{user}}</a>

app componenet template

<app-twitter [user]="name"></app-twitter>

angular twitter widgets ⚡⚡

ngAfterViewInit() a lifecycle hook that is called after Angular has fully initialized a component's view.

Updated

a simple soulution mention in this answer before by user named Bernardo Baumblatt

put the script link in the index.html

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

load the twitter widgets when ngAfterViewInit method call

ngAfterViewInit() {
    // @ts-ignore
    twttr.widgets.load();
  }

in any case the script has not loaded yet you will got an error like twttr is not defined so download the widgets.js script and include it to your project by using import

main.ts

import './app/widgets.js'

demo

Alternative of widgets import: `(window).twttr.widgets.load();` — Emeric, Jul 25 '19 at 15:50

score 2 · Answer 2 · answered Jan 08 '20 at 11:46

I had a requirement of dynamically rendering timelines based on different twitter timelines.

I found a workaround by creating a variable in the constructor that stores the href based on the twitter username .

So for example if your link is "https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw" , you just put this in the constructor in a previously defined global variable , say "embedLink"

such as in your ts component:


@Component({
  selector: 'app-tree-dashboard',
  templateUrl: './tree-dashboard.component.html',
  styleUrls: ['./tree-dashboard.component.css']
})
export class TreeDashboardComponent implements OnInit,AfterViewInit {
  embedLink='';

  constructor(private matIconRegistry: MatIconRegistry,
              ) {
this.embedLink=  "https://twitter.com/TwitterDev/lists/national-parksref_src=twsrc%5Etfw" 
}};

and then in your HTML :

<a class="twitter-timeline" href={{embedLink}}></a>

And lastly you only need to add the script in index.html which you have done already. So you're good to go!

score 1 · Answer 3 · answered Jun 24 '19 at 06:31

Below is my code. I'm creating blank website so I think it's should not be a problem. What I think is maybe the order of the script in index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Twitter</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
  <script
    async
    src="https://platform.twitter.com/widgets.js"
    charset="utf-8"
  ></script>
</html>

In my app.component.html

<a class="twitter-timeline"
   href="https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw">
      A Twitter List by TwitterDev
</a>

You can view my code here

Embedding twitter timeline does not render in angular 7

3 Answers3

Linked