Login/Register
Embedding twitter timeline does not render in angular 7
Asked Answered
node.jsangulartypescriptecmascript-6single-page-application
I

3

6

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

Ingurgitate answered 13/6, 2019 at 5:48 Comment(12)
It works if you put it in index.html ? – Weslee
yes it does work on putting on index.html – Ingurgitate
Just tried it in stackblitz and it seems to be working stackblitz.com/edit/angular-2mbweb – Flatting
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 – Ingurgitate
@MoblizeIT Is there an error in your browser console? – Rudiger
No error nothing. It would be easier to know otherwise – Ingurgitate
Could you share an example reproducting your problem? – Rudiger
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. – Ingurgitate
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 – Coenurus
@Flatting 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 – Coenurus
@Flatting check my example stackblitz.com/edit/angular-twitter-widgets – Coenurus
I just want to mention there is some angular package for handling embedding twitter timeline check this npmjs.com/package/ngx-tweet 🍩🍩 – Coenurus
C
5

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 💥💥

Coenurus answered 24/6, 2019 at 11:0 Comment(1)
Alternative of widgets import: (<any>window).twttr.widgets.load(); – Disinfect
V
2

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!

Vernettaverneuil answered 8/1, 2020 at 11:46 Comment(0)
K
1

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

Kingfish answered 24/6, 2019 at 6:31 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.