Twitter Collection Grid does not work, AngularJS

widgetsjs

#1

See this question on stackoverflow.

I am trying to use a Twitter Collection Grid (like this one: https://dev.twitter.com/web/embedded-timelines/collection) on the site that I’m building, using an angularJS directive. The widget shows on the site but the grid does not work. Instead of showing in a grid formation the pictures stack on top of each other, all with the width of the widget. Resizing the widget does not work for getting them to show as a grid. The weird thing is that some times when I reload the page they are working, but that is like every 10th time I reload, and I cannot get it to work consistently.

This is the html I’m using:

    <div id="twitter-collection">
      <twitter-collection></twitter-collection>
    </div>

And this is the directive:

    .directive("twitterCollection", [ function() {
      return {
      restrict: 'E',
      template: '<a class="twitter-grid" href="https://twitter.com/_/timelines/539487832448843776">Tweets with pictures</a>',
      link: function(scope, element, attrs) {
        function run() {
          (! function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0],
              p = /^http:/.test(d.location) ? 'http' : '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"));
          console.log('run TwitterCollection script');
        }
        run();
       }
      };
    }])

Have someone experienced this problem? Or just gotten the Twitter Collection Grid to work and how did you do it? Or could someone help me find out why this is not working? Thanks!


#2

Got it to work by ditching the directive and just going with html, like the code below. Now it shows in a grid formation every time i reload.

<div id="twitter-collection" style="width: 80%;">
  <a class="twitter-grid" href="https://twitter.com/_/timelines/666933617080299521">A Collection on Twitter</a> </div>
<script async defer src="https://platform.twitter.com/widgets.js"></script>

The reason I tried to use a directive for showing the collection is that the pure html code (that you get from twitter) for a “normal” timeline widget did not work properly. When you navigated to another page of the site and then back again the widget did not reload. Therefor I use a directive for the timeline, and that works.


#3

The embed may be added to a page using a JavaScript factory function.
https://dev.twitter.com/web/embedded-timelines/collection#template-grid-javascript

An enhanced markup embed consists of three parts: the HTML markup, Twitter’s widgets JavaScript loaded on the page, and a DOM scan to find the a.twitter-grid and enhance it into a full embed. If you are placing Twitter widget HTML markup into a dynamic page you should call twttr.widgets.load() to scan the full document or a fragment for markup to be enhanced.


#4