Twitter Bootstrap Question posted in

Twitter embedded for Angular 2 – Twitter bootstrap

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 !

Tags:

6

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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 😀

    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>
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    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

    Login or Signup to reply.
  5. 0

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

    1. Firstly be sure to import AfterViewInit in 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 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);

        }
      }
    Login or Signup to reply.
  6. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search