Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter embedded for Angular 2

I tried to embed Twitter timeline to my Angular 2 app. 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 a tag into template and put script tag into 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 it only showed the a tag, no timeline. Please help me !

like image 634
Huy Ham Hố Avatar asked Sep 12 '16 17:09

Huy Ham Hố


3 Answers

You should run the twitter widget script after your template was loaded.

I did 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 only contains this:

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

Maybe this is not the most elegant solution, but worked for me.

like image 118
Ábó Szilágyi Avatar answered Nov 11 '22 21:11

Ábó Szilágyi


Load the Twitter's widgets library on the index.html file.

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

Puts the twitter reference on your template

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

Declare twitter var outside the class of your component as suggested by springerkc on comments.

declare var twttr: any;

Load the twitter widgets on AfterViewInit

ngAfterViewInit(): void {
    twttr.widgets.load();
}

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

References:
How do I render new Twitter widget dynamically?
Twitter Developer Documentation

like image 15
Bernardo Baumblatt Avatar answered Nov 11 '22 21:11

Bernardo Baumblatt


I have found a rather simple way of achieving this, it works for Angular 6.

Twitter provides with following code. See 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>

It has two tags <a></a> and <script></script>.

You can place the <script></script> tag within the <head></head> or <body></body> section in the index.html of your angular app and <a></a> can be placed in the template ( html ) of your desired angular component. It worked like charm.

like image 1
Paramvir Singh Karwal Avatar answered Nov 11 '22 21:11

Paramvir Singh Karwal