Twitter embedded for Angular 2

Asked 12/9, 2016 at 17:39 Answered 5/10, 2021 at 14:13

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 !

Discriminate answered 12/9, 2016 at 17:39 Comment(1)

Actually it did show up sometimes. I reload the page serveral times and it will show up but not always. – Shamrock 13/9, 2016 at 3:6

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.

Allot answered 13/11, 2016 at 9:43 Comment(4)

Hey this solution works but can you please explain what the function inside ngAfterViewInit is doing. – Essen 8/11, 2017 at 20:20

@AsifKarimBherani It basically insert the twitter widget script asynchronously into your document. You can read more about it here: dev.twitter.com/web/javascript/loading I hope it will help You understand, how this works :) – Sarraceniaceous 9/11, 2017 at 21:2

Hi @ÁbóSzilágyi using that js code now gives an error: error TS1345: An expression of type 'void' cannot be tested for truthiness – Chinchin 7/4, 2019 at 6:8

Thanks! your soul has a place in the heavens!! 💪💪 – Predial 5/11, 2021 at 16:40

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

Blackmore answered 26/11, 2018 at 15:45 Comment(5)

This is really helpful. I was routing out and again into the component containing twitter embed code. When i was coming back using routing the widget didn't reload. After adding using twttr.widgets.load(); it worked! – Hauser 5/5, 2019 at 15:2

I have mention you answer here #56574572 🔥🔥 – Landis 26/6, 2019 at 12:19

Good solution! If you add declare var twttr: any; above the @Component({}) decorator of the component you're calling the script in, you can avoid the linting error and don't need to // @ts-ignore. – Ensconce 19/8, 2020 at 14:38

Hi @springerkc, thanks for sharing this, I edited my answer based on your suggestion. – Blackmore 20/8, 2020 at 16:25

Compiled ok, but runtime ReferenceError: twttr is not defined – Natant 13/6 at 16:3

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.

Hauser answered 26/10, 2018 at 3:0 Comment(0)

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

It will provide you with two lines of code. The second line of code is a script link to a javascript file that twitter is hosting. It means that we don't need to execute it in the angular world :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 Angular strips script tags out of its view, you will need to find a workaround. One workaround is this answer here.

making the 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>

Marcellusmarcelo answered 2/12, 2017 at 18:34 Comment(0)

you should re-run twitter widgets js file every time routing:

Firstly be sure to import AfterViewInit in your component.

import { Component, OnInit, AfterViewInit } from '@angular/core';
Use AfterViewInit in your component class.

export class OurNewsComponent implements OnInit, AfterViewInit
Now try this it will be working 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);

        }
      }

Seaver answered 13/5, 2019 at 7:53 Comment(0)

Best way to integrate any twitter widgets in Angular2 Use https://www.npmjs.com/package/ngx-twitter-widgets

Install package

npm install --save ngx-twitter-widgets

Import NgxTwitterWidgetsModule to NgModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxTwitterWidgetsModule } from "ngx-twitter-widgets";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxTwitterWidgetsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use ngx-twitter-timeline tag to your template

<ngx-twitter-timeline
  [source]="{sourceType: 'profile', screenName: 'TwitterDev'}" >
</ngx-twitter-timeline>

Concessionaire answered 5/10, 2021 at 14:13 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags