Using Twitter feeds in Adobe DPS

Edit: 7/19/2013  Twitter once again updated its APIs, so this article is inaccurate. I am working on a solution, and will update this article when I have one that works. There is a suggestion over in the DPS Forums, but the results seem to be spotty.

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

13 Responses to Using Twitter feeds in Adobe DPS

  1. steve lunnu says:

    this is great – but what if you want to have all your tweet show in the feed, effectively like going to a twitter profile page and getting the entire feed?

    • James Lockman says:

      Use a Web Content Overlay and point it at your twitter profile page. For instance, for my Twitter profile page, I’d use http://twitter.com/jameslockman as the URL for the Web Content Overlay. You might want to check the “Scale Content to Fit” box and test to ensure that your profile page fits in the Overlay, though.

  2. james says:

    Is there anyway you could do the same for us with the other social sites? Facebook, pintrest, etc.?

    Thanks

    • James Lockman says:

      Of course. So long as that service had URLs that can be displayed in a Web Content Overlay, you’re good to go. If the service has restrictions in place (like Twitter) that prevent displaying content from a mobile device without that content being hosted on a web site, then you’ll have to use my workaround.

  3. james says:

    Is there a specific way for other social media that can get you just the posts and NOT the entire site?

  4. Pierre Labbe says:

    Hi,
    In InDesign CS6, for have tweeter feeds in a folio, we can use Insert HTML code (Objet menu) with the only following code:

    //

    new TWTR.Widget({
    version: 2,
    type: ‘profile’,
    rpp: 3,
    interval: 30000,
    width: 190,
    height: 270,
    theme: {
    shell: {
    background: ‘#006699′,
    color: ‘#ffffff’
    },
    tweets: {
    background: ‘#ffffff’,
    color: ‘#000000′,
    links: ‘#6699cc’
    }
    },
    features: {
    scrollbar: true,
    loop: false,
    live: false,
    behavior: ‘all’
    }
    }).render().setUser(‘pierrelabbe’).start();

    //

    In the Folio Overlays panel for Web Content options, don’t check the “Scale Content to Fit”.

    • James Lockman says:

      Pierre, this did not work for me. I’d be curious to see an example of this in action, if you have one.

  5. Pierre Labbe says:

    Hi James,
    This code works with this file (with ID CS6, french version), you can load it at :
    http://pierre.labbe.free.fr/DPS/ID_twitter.indd.zip
    tell me if it works for you (pierrelabbe[at]yahoo[dot]com)

  6. Toni Ziegler says:

    Hi James,
    do you have any idea, how to get the embedded timeline (the soon only working twitter widget) to work in DPS?
    It seems to work everywhere but there.
    https://dev.twitter.com/docs/embedded-timelines

    • James Lockman says:

      The old APIs were deprecated on March 15th, but it looks like Twitter didn’t shut them down yet. They are doing what they call “blackout testing” right now, so it is anyone’s guess as to whether any of the older code will work going forward. For right this red hot second, the following works (props to Pierre Labbe for pointing me to this). Save it as a .html file or use Object>InsertHTML in InDesign CS6. Again, I have no idea how long it will work.


      <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
      <script>
      new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 3,
      interval: 30000,
      width: 190,
      height: 270,
      theme: {
      shell: {
      background: '#006699',
      color: '#ffffff'
      },
      tweets: {
      background: '#ffffff',
      color: '#000000',
      links: '#6699cc'
      }
      },
      features: {
      scrollbar: true,
      loop: false,
      live: false,
      behavior: 'all'
      }
      }).render().setUser('jameslockman').start();
      </script>

      • Toni Ziegler says:

        The code and the InDesign file from Pierre doesn’t work for me. It doesn’t load in the Content Viewer.

  7. Pingback: Creating an interactive Catalogue. | HELEN KUCHTA