Geek Answers Handbook

Twitter for Angular 2

I tried to include Twitter timeline in my Angular 2 application. I followed this tutorial https://publish.twitter.com then I had this

<a class="twitter-timeline" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

I put the tag in the template and put the script tag in index.html. This is an example.

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Angular 2 App | ng2-webpack</title> <link rel="icon" type="image/x-icon" href="/img/favicon.ico"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <base href="/"> </head> <body> <my-app> <div class="loading-container"> <div class="loading"></div> <div id="loading-text">loading</div> <a class="twitter-timeline" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a> </div> </my-app> </body> </html>

But he showed only the tag, without a timeline. Please help me!

+13
angular twitter
source share
6 answers

You must run the twitter widget script after your template has been uploaded.

I have done this:

 export class SectionSocialComponent implements AfterViewInit { constructor() {} ngAfterViewInit () { !function(d,s,id){ var js: any, fjs=d.getElementsByTagName(s)[0], p='https'; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=p+"://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs"); } }

And my .html file contains only this:

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

This may not be the most elegant solution, but it worked for me.

+15
source share

Download the Twitter widget library to the index.html file.

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

Puts a twitter link to your template

 <a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>

Upload twitter widgets to AfterViewInit

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

I know this is an old question, and maybe there is an answer there, but this is the first place Google sends me.

Recommendations:
How to dynamically display a new Twitter widget?
Twitter Developer Documentation

Best wishes,
Bernardo Baumblath.

+5
source share

I found a pretty simple way to achieve this; it works for Angular 6.

Twitter provides the following code. View here

<a class="twitter-timeline" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw">National Park Tweets - Curated tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

He has two <a></a> and <script></script> .

You can put <script></script> in the <head></head> or <body></body> section in the index.html your corner application, and you can place <a></a> in the template (HTML) your desired corner component. It works like a charm.

+1
source share

If you go to this website, you can enter your Twitter URL and it will generate a code for you.

It will provide you two lines of code. The second line of code is a script link to a javascript file that hosts twitter. This means that we do not need to execute it in the world of angular: D

here is an example:

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

As the angular strips script tags from your view, you will need to find a workaround. One way to solve this problem is here .

entering an example:

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

You must re-run the js twitter widget file every time you route:

  1. First, be sure to import AfterViewInit into your component.

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

  2. Use AfterViewInit in your component class.

    export class OurNewsComponent implements OnInit, AfterViewInit

  3. Now try this will work fine.

  ngAfterViewInit() { // Tweets let ngJs: any; const ngFjs = document.getElementsByTagName('script')[0]; const ngP = 'https'; if (!document.getElementById('twitter-wjs')) { ngJs = document.createElement('script'); ngJs.id = 'twitter-wjs'; ngJs.src = ngP + '://platform.twitter.com/widgets.js'; ngFjs.parentNode.insertBefore(ngJs, ngFjs); } }
0
source share

Try the following:

index.html :

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

app.component.html :

 <a class="twitter-timeline" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw"> Tweets by TwitterDev </a>

app.component.ts :

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

In the last part, some problems with routing were solved (the timeline did not restart) when returning to the application component (Angular 7).

0
source share

More articles:


All Articles