Twitter embedded for Angular 2

angular 6 twitter feed
angular twitter
twitter embed code generator
embed latest tweet
customize twitter embed
html twitter widget
twitter timeline
twitter widget for blogger

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>

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.

Adrael/ngx-tweet: Angular component for displaying a , Easily embed Twitter widgets into your Angular application! 1 year ago #1 Build with --prod and --aot does not work Opened by Badmonky almost 2 years ago. We would like to show you a description here but the site won’t allow us.

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>

Load the twitter widgets on AfterViewInit

ngAfterViewInit(): void {
    // @ts-ignore
    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

Best regards, Bernardo Baumblatt.

arusahni/ngtweet: Easily embed Twitter widgets into your Angular , Easily embed Twitter widgets into your Angular application! No more having to kludge Latest commit by arusahni over 2 years ago. View code Jump to file  Why? Embedding Tweets is easy if your website is a static page. Just drop in a Twitter-supplied embed and you're off to the races. Once you start dynamically altering page content through AJAX or DOM manipulation, things become far less simple since Twitter's widget loader not only scans the entire DOM by default, but requires interactions that violate some of Angular's core principles

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.

ngx-twitter-timeline, ngx-tweet. 2.0.3 • Public • Published a year ago Angular Tweet Component. Easily embed Twitter widgets into your Angular application! This post is primarily focused on accessing Twitter’s resources in your angular 2 app. We all know that twitter has publicly made available a large list of REST Apis for developers. You can find them all here. These are protected using Oauth Authorization method.

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>

ngx-tweet, json file by running npm init , and create a server.js file. 1. 2. 3. 4. mkdir server. A simple app demonstrating how to access twitter resources from your angular 2 app. For further details - http://tphangout.com/?p=404 Follow me on twitter

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);

        }
      }

Connect to the Twitter API in an Angular 6 App, Then I found an accepted solution from this (Twitter widget on Angular 2), but the widget is not even shown from the first load and no errors so I  Easily embed Twitter widgets into your Angular application! No more having to kludge together a Twitter script loader, or manage embed state on route/visibility change. - arusahni/ngtweet

embedded Twitter widget on Angular 2+ app only shows up on the , Since its debut in 2012, you've used the embedded timeline to made it easier than ever to add these rich, responsive Tweet displays directly to your website or CMS. Launching Twitter Kit 2.0 and Digits 2.0 for Android. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Sign up An AngularJS directive of Twitter's Embedded Timeline with support for custom CSS.

Embedding Twitter timelines just got a lot easier, See Tweets about #angular2 on Twitter. See what people are saying and join the conversation. A Twitter feed widget will allow you to embed your live Twitter feed right on your website. People can browse your web pages and get a sneak peek into your Twitter chatter without having to leave your site. Embedding a Twitter feed on your website not only helps improve session time but could also turn visitors into followers. 2 Simple Ways to Embed Twitter on Your Site Using a Twitter Widget

#angular2 hashtag on Twitter, Embed Tweet. Come celebrate #Angular International Women's Day with me this Friday on May 29th at 9AM (EDT)! Can't wait to be a part of the Women in  Embedded timeline widgets give you the ability to embed a collection of Tweets (known as a timeline) on your own website. There are five types of embedded timelines available, all of which look and feel like timelines on twitter.com: Profile: Display public Tweets from any account on Twitter.

Comments
  • Actually it did show up sometimes. I reload the page serveral times and it will show up but not always.
  • Hey this solution works but can you please explain what the function inside ngAfterViewInit is doing.
  • @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 :)
  • Hi @ÁbóSzilágyi using that js code now gives an error: error TS1345: An expression of type 'void' cannot be tested for truthiness
  • 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!
  • wonderful this very simple before I was doing this by recreating the script tag 😔 thanks 👍
  • I have mention you answer here stackoverflow.com/questions/56574072/… 🔥🔥
  • The best, simple and easy solution. Thanks.