0

I am trying to use a Twitter Collection Grid (like this: 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 it is working but I cannot get it to work consistently. Edit: it loads the right way like 25% of the times... i counted...

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!

1

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.

0

you can use that :

customized twitter feed script - `https://jsfiddle.net/reimeister/9x9fc/`

https://github.com/StanScates/Tweet.js-Mod

hope is helping you

  • Could you specify how this would help me to show a widget with pictures from twitter in a grid formation? – pandaseal Nov 19 '15 at 8:35

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.