{"id":812,"date":"2011-08-06T06:33:22","date_gmt":"2011-08-06T06:33:22","guid":{"rendered":"http:\/\/opendna.com\/blog\/?p=812"},"modified":"2022-11-08T12:57:45","modified_gmt":"2022-11-08T12:57:45","slug":"host-your-own-real-time-twitter-wall","status":"publish","type":"post","link":"https:\/\/opendna.com\/blog\/2011\/08\/06\/host-your-own-real-time-twitter-wall\/","title":{"rendered":"Host your own real-time Twitter wall"},"content":{"rendered":"

This article describes the use of a simple AJAX-powered webpage to display a (near) real-time feed from Twitter. If you found this page by following a link to a specific hash tag (i.e. #Jan25<\/a> for the Egyptian Revolution), it is likely that the page was removed after the tag fell into disuse.<\/p><\/blockquote>\n

Short Title: #bloxtalk<\/a> project<\/strong><\/p>\n

Examples: one page like #SOTU<\/a>, or multiple pages like #egypt<\/a> and #algeria<\/a>, or mixed with other elements, like #bloxtalk<\/a><\/p><\/blockquote>\n

Inspired by comments in Diogenes2008’s diary<\/a> (Jan 25 2011), I rolled out a simple ajax-powered live feed of the #FOK<\/a> twitter hash tag. Having kinda botched the first version, I gave it some more thought and came out with some innovations to promote real-time, cross platform communication for web events (live blogs, tweetathons, etc). It’s off-the-shelf javascript with vanilla html, blended together to put conversations from multiple platforms on the same page.<\/p>\n

This is an easy how-to guide, offered in the hopes that future live blog events can be made more dynamic and live tweet events more accessible to those unfamiliar with twitter.<\/p>\n

Contents<\/strong><\/p>\n

    \n
  1. Twitter is…<\/li>\n
  2. Why would you do this?<\/li>\n
  3. Requirements<\/li>\n
  4. Examples in use<\/li>\n
  5. The code<\/li>\n
  6. Limitations & lessons learned<\/li>\n
  7. Hax & back-channels<\/li>\n<\/ol>\n

    Originally published 26 January 2011, to DailyKos as “#bloxtalk: roll your own twitter+IRC wall<\/a>“<\/em><\/p>\n

    Twitter is…<\/strong>
    \n…a micro-blogging platform which makes it exceptionally easy to publish     140 characters<\/a>-messages from a computer or cell phone. You may not use twitter, but the site is the 10th ranked in the world for traffic, 9th ranked in the US and accounts for a little over 0.3% of global page views (Alexa:Twitter<\/a>). Twitter can be to real-time public conversations (see “Keith Olbermann – Live-Tweeting The SOTU<\/a>“) as facebook is to reconnecting with acquaintances forgot<\/a> (but it’s usually not<\/a>). Anyway, a great deal has written about the twitter sphere on DailyKos<\/a> and elsewhere<\/a>, so back to the subject at hand:<\/p>\n

    Why would you do this?<\/strong>
    \nPersonally, I find twitter’s native tools a little annoying in that they require that you refresh frequently.     Twitter search<\/a>, for example<\/a>, updates to tell you how many new messages there are but doesn’t load them on the fly. To my eyes, it’s a bit like pre-Ajax days of comments at DailyKos (ct<\/a> be praised). There are a number of desktop (and smart phone) client applications but if I’m in a browser, I would rather stay in a browser. I don’t entirely trust third-party developers as even the most reputable have been caught out on security but, more importantly, even they usually require a higher commitment to participation than (I feel) should be necessary. That’s where this hack comes in.<\/p>\n

    It’s based around a simple javascript which can be loaded in (almost<\/a>) any web browser page without installing extra software or browser plugins. Can be installed almost anywhere, as it doesn’t require server-side programming (you can even load it into your browser from your desktop). With this, you can host a twitter stream in a way that anyone can read it, without knowing their way around twitter.<\/p>\n

    So it’s fast, convenient, easy but really, it’s about communicating in the back channel<\/strong>. Any time a community gets as big as DailyKos (nevermind Twitter), it’s important to find quiet corners for like-minded people to conspire<\/span> ways to promote their position. I think that these approaches could let us watch the room while talking to our friends<\/em>.<\/p>\n

    Requirements<\/strong>
    \nSoftware: a modern web browser and a text editor (MS Notepad’s fine)
    \nServer: host plain html files, but you can load it privately from your own computer.
    \nSkills required: (a) a little HTML knowledge; (b) an identifiable twitter feed; and for public use, (d) the ability to upload HTML files.<\/p>\n

    Examples in use<\/strong><\/p>\n

      \n
    1. http:\/\/opendna.com\/fok\/<\/a> loads tweets with the #FOK<\/a> hashtag. (FOK=”Friends of Keith” Olbermann)<\/li>\n
    2. http:\/\/opendna.com\/openmedia\/twitter…<\/a> loads tweets with the #openmedia<\/a> tag, related to the Canadian Internet activist group OpenMedia.ca<\/a>.<\/li>\n
    3. This<\/a> shows the #dkos<\/a> tag and this<\/a> shows the #sotu<\/a> tag.<\/li>\n<\/ol>\n

      “Great. A new tab for every hash tag.” Yeah, I know. That’s not ideal either, but you can load several pages in one window with frames or iframes. This<\/a> frameset, for example, loads the DailyKos home page and the #dkos<\/a> page side-by-side. You could… I don’t know, have the #SOTU<\/a> feed and DailyKos liveblog comments at the same time? (If you’ve got the screen real estate, of course).<\/p>\n

      \"\"<\/a>
      \nThe code<\/strong>
      \nMy original source is the       LIVE Twitter AJAX Script<\/a> from @taranfx<\/a> (some directions there), but you’re welcome to grap the source of any of the pages in the previous section or download them all here<\/a> (“Save as”).<\/p>\n

      Search Filters<\/em><\/strong>
      \nSetting up the script is really, really easy. Search the file for “search.twitter.com”. You’ll find this<\/p>\n

      var url = “http:\/\/search.twitter.com\/search.json?q=%23dkos<\/strong>&callback=?”; \/\/ Change your query here<\/p><\/blockquote>\n

      %23 = # so “%23dkos” is #dkos<\/a> and and “%23followfriday” is #followfriday<\/a>. Similarly, %40 = @ so “%40barackobama” is @barackobama and %40octothorpe” is @octothorpe. (And octothorpe<\/a> is the best twitter name. Ever).<\/p>\n

      [I put up the @barackobama page<\/a> and was going to make some snarky “you know he doesn’t read this” comment, then I noticed that it was dominated by re-tweets of Leonardo DiCaprio (you’ll approve<\/a>).]<\/i><\/p>\n

      You can filter by tweets which have a keyword \u2014 or phrase if joined by “%20” (space) \u2014 and can use “+from:” to filter tweets from a single account. “+from:barackobama” reads the President’s tweets, “%40barackobama” is people talking to his account and “barack%20obama” is people talking about him. You can combine and filter in magnificent ways with a monstrously long search string, but I’ll let you play around with that. Go to http:\/\/search.twitter.com\/advanced<\/a> and then adapt the RSS feed.<\/p>\n

      Colors<\/em><\/strong>
      \nWith a little HTML\/CSS experience, you’ll muddle your way though the font coloring and styling, the page background color and padding. (If you’re new at this, start by changing the       hex color codes<\/a>.) Here’s what’s likely going to trip you up: the background color of the tweets is deeper in the code. Search for<\/p>\n

      Simple Styling of the boxes START<\/p><\/blockquote>\n

      and you’ll find the background colors for odd- and even-numbered tweets.<\/p>\n

      Limitations & lessons learned<\/strong> The code does not provide links to individual tweets. If someone comes up with a hack to do that, please let me know.<\/p>\n

      The vanilla code only pulls one feed and it’s very strict. This raises the possibility that you set up a page with one hash tag for an event, and another one gets used instead. I made a similar this goof during the #SOTU<\/a> when I set the feed to %23fok (#fok) when +from:keithobermann (from @keithobermann) would have been more appropriate. If you think ahead, you can structure your search string to cast a wider filter and avoid this error.<\/p>\n

      Hax & back-channels<\/strong>
      \nTweet this meta<\/em><\/strong> You’ve seen those little blue “Tweet this” buttons? (Hint: see the top of this page), well you can get the code       here<\/a>.
      \nGo old school<\/em><\/strong> Twitter is limited by the technology it adopted (SMS), so it’s feels very much like talking via text message. If you want to have a chat, why not embed an IRC channel along with the twitter feeds?       Rizon.net’s webclient<\/a> allows you to open and embed an IRC channel with iframes (click the blue icon in the top left).<\/p>\n

      When I mixed it all together<\/strong>… I came up with this: \"\"<\/a>.
      \nThanks for playing along.<\/p>\n

      Updated by opendna at Sun Feb 13, 2011, 7:03:51 PM<\/span><\/p>\n

      That last page got borked by the DK4 update and will require a new hack. Here’s an alternate example, just for DK4: http:\/\/opendna.com\/bloxtalk\/dk4<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

      This article describes the use of a simple AJAX-powered webpage to display a real-time feed from Twitter. It suggests use cases and reasons to pair it with an IRC webapp to provide a back channel to noisy hashtags.<\/p>\n

      Note: code uses Twitter REST API v1. This post has not been updated.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[208,8],"tags":[212,215,213,217,211,214,216],"class_list":["post-812","post","type-post","status-publish","format-standard","hentry","category-archive","category-geek-out","tag-bloxtalk","tag-dkos","tag-fok","tag-followfriday","tag-jan25","tag-openmedia","tag-sotu"],"_links":{"self":[{"href":"https:\/\/opendna.com\/blog\/wp-json\/wp\/v2\/posts\/812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/opendna.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/opendna.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/opendna.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/opendna.com\/blog\/wp-json\/wp\/v2\/comments?post=812"}],"version-history":[{"count":1,"href":"https:\/\/opendna.com\/blog\/wp-json\/wp\/v2\/posts\/812\/revisions"}],"predecessor-version":[{"id":1880,"href":"https:\/\/opendna.com\/blog\/wp-json\/wp\/v2\/posts\/812\/revisions\/1880"}],"wp:attachment":[{"href":"https:\/\/opendna.com\/blog\/wp-json\/wp\/v2\/media?parent=812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/opendna.com\/blog\/wp-json\/wp\/v2\/categories?post=812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/opendna.com\/blog\/wp-json\/wp\/v2\/tags?post=812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}