Recently Twitter changed its widgets so that they will no longer run outside of a web site. This presents a problem for folks who have relied on embedded Twitter widgets in their DPS publications. There is a workaround which should present no problem to readers, since they need to be online in order to read Twitter content in the first place.
First, post your widget to a web site, then either refer to it directly from your web overlay or embed an HTML file in your folio that contains an iframe that displays your widget. Here’s a more concrete example.
I have a widget called dpstweets.html, which displays all of the tweets that reference @adobedigitalpub. It resides at http://www.jameslockman.com/dps/jamestweets/dpstweets.html, and it consists of the following code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DPS Twitter Feed</title>
<style>
.body
{background-color:transparent}
</style>
</head>
<body>
<div>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '@adobedigitalpub',
interval: 30000,
title: 'Adobe DPS',
subject: 'See what\'s trending',
width: 180,
height: 187,
theme: {
shell: {
background: '#8ec1da',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
behavior: 'default'
}
}).render().start();
</script>
</div></body>
</html>
That in itself is pretty plain vanilla. However, if I were to embed this file into my DPS app as a web overlay, I would get a blank white rectangle. The easiest solution is to make my web overlay point to http://www.jameslockman.com/dps/jamestweets/dpstweets.html. I set it to auto play, allowed interactions, and made it transparent. Of course, that’s hard to see unless you preview the folio on your desktop or on your tablet.
The other solution is the iFrame, and it’s easy to implement.
I made a second HTML file that I called dpsiframe.html, and in the body tag, I put this:
<iframe src="http://jameslockman.com/dps/jamestweets/dpstweets.html" width="200" height="312" frameborder="0" marginheight="0" marginwidth="0">Your browser doesn't support iFrames</iframe>
You can look up how to stylize iFrames with CSS and with their own tags, but once I put this new html file into my web overlay in my folio, it worked like a charm.
CS6 users have an additional bonus feature, though. In InDesign CS6, you can just copy and paste the <iframe src-” … /iframe> line of code into InDesign, and InDesign will make a nice poster frame of the page for you when you paste. It makes it much easier to figure out how the widget will fit into your layout. Give it a try with my iframe code above, and tell me that’s not awesome. You can’t, can you? Unless, of course, Twitter changes its widgets again and makes them unusable in iFrames.
Share on Facebook