Search code examples
twitterurl-routingsingle-page-application

Embedded timeline widget not working in SPA

and thanks for taking a moment,

I have gone to the twitter site and created an embedded timeline per their instructions.

if I place the generated code on a simple html page on my desktop, all works as expected. When I place the same code inside my SPA application, i only get a 'follow me' link on the site. The SPA application is built on the John Papa example.

There are no javascript errors thrown. I'm guessing that the heart of the issue may have something to do with the routing, b/c if I navigate directly to the page where I've embedded my timeline, the code works as expected.

i.e. http://localhost:50000/App/views/shared/pillar.html

However, I also have a google calendar widget, and that works as expected. Tested this in Chrome, FF, IE. Behavior is the same.

Any thoughts on how I might diagnose this further? Or is my approach totally wrong? I'm just looking to add the latest n-number of tweets to what is basically a blog. Nothing too fancy. 

<a class="twitter-timeline" href="https://twitter.com/PoundingCode" data-widget-id="313336765203218432">Tweets by @PoundingCode</a>
<script>!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");

Solution

  • I figured out a solution, but rather than take this down, I hope it might help the next person:

    1. Put the twitter widget code into a new html document.
    2. Have that document take in a querystring called handle
    3. Have that html document parse the querystring and inject it.
    4. Create an iframe bound to an observable that has your twitter handle, passing in that handle as your querystring parameter.

    the iFrame data-binding:

     iframe data-bind="with: twitter, attr: { src: '../App/views/shared/twitter.html?handle=' + twitter() }" style="height:622px;" seamless="seamless"

    The twitter page

    <body>
    <a class="twitter-timeline" href="https://twitter.com/" + get('handle')  data-widget-id="313336765203218432" ></a>
    <script>
        function get(name) {
            if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(location.search))
                return decodeURIComponent(name[1]);
        }


        !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");</script>
</body>