Embedding Twitter Live Feed

dacharya64

So I'm trying to get one of the twitter live feeds embedded in a twine html file. Turns out you can do this with any search; for the search "ukraine" it gave me this embedding info:

<a class="twitter-timeline" href="https://twitter.com/search?q=ukraine" data-widget-id="580534564008906753">Tweets about ukraine</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");</script>

After some trial and error I found out that plugging the script code into a script and the html code into a passage worked great--that is, in a blank document (attached as "test").

When I went to do the same in my bigger project (attached as "windows", the live feed wouldn't show up--just the text "Tweets about ukraine." I could swear I'm doing everything the same--there are no other scripts in my "windows" project, just some images and css.

Any help would be greatly appreciated.  ;D

Never mind, won't let me attach so here's the links:
Test: https://drive.google.com/open?id=0B7kmvXx0HErsWk81WEp2RERPRzQ&authuser=0
Windows: https://drive.google.com/open?id=0B7kmvXx0HErsOTRENUpkQ2lkam8&authuser=0

EDIT: In case you're not sure what to do on the windows html, click the link of the sign with the airplane and the Russian text. That'll take you to the next page, where I'm trying to load the Twitter feed. You'll be able to see the filler text ("Tweets about ukraine") and the space where I want the feed to go.

greyelf

note: You don't say which story format you are using but your windows.tws file was setup for Sugarcane so I am assuming your using it.

You have couple of issues, the javascript scope, the <a> element in the passage not existing when the javascript is executed.

Replace your javascript in your Script passage with the following macro definition:


try {
version.extensions['showfeedMacro'] = {
major:1, minor:0, revision:0
};
macros['showfeed'] = {
handler: function(place, macroName, params, parser) {
var js,
fjs = document.getElementsByTagName("script")[0],
p = /^http:/.test(document.location) ? 'http' : 'https';
if(! document.getElementById("twitter-wjs")){
js = document.createElement("script");
js.id = "twitter-wjs";
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
},
init: function() { },
};
} catch(e) {
throwError(place,"showfeed Setup Error: "+e.message);
}


Now change the passage containing <a class="twitter-timeline" ... so it includes a <<showfeed>> macro:


<a class="twitter-timeline" href="https://twitter.com/search?q=ukraine" data-widget-id="580534564008906753">Tweets about ukraine</a>
<<showfeed>>


dacharya64

I can't believe I forgot to include my story format... yes, I'm using sugarcane.

The code you gave worked perfectly! Thanks so much.

EDIT: Actually, there is one problem--when a user goes to a different passage and then comes back, the twitter feed does not appear again (just the text "Tweets about ukraine." Is there a way to change it so the feed always appears? (Let me know if you need to look at the .tws)

greyelf

The original code you supplied only knew how to add the twitter javascript needed and to create a new widget once.

I have changed the macro so it now tries to reload an existing widget if it exists, this reload needs to be happen after the passage has actually been rendered so I have added a 1/2 second delay.


try {
version.extensions['showfeedMacro'] = {
major:1, minor:0, revision:0
};
macros['showfeed'] = {
handler: function(place, macroName, params, parser) {
var js,
fjs = document.getElementsByTagName("script")[0],
p = /^http:/.test(document.location) ? 'http' : 'https';
if(! document.getElementById("twitter-wjs")){
js = document.createElement("script");
js.id = "twitter-wjs";
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
} else {
// Redisplay the existing widgets, delayed to give passage time to render
setTimeout(twttr.widgets.load, 500);
}
},
init: function() { },
};
} catch(e) {
throwError(place,"showfeed Setup Error: "+e.message);
}


dacharya64

Didn't know that, but thanks for the update.

Everything is working great now, thanks again!