Day 31 – Load Stuff Inline In Twitter Stream

Want to customize what can load inline on Twitter’s tweet stream interface? Here is how I built a Kynetx app to load XKCD comics inline when a user clicks on a tweet with a link to an XKCD comic.

ruleset a60x531 {
  meta {
    name "xkcd-on-twitter"
    description <<
      xkcd-on-twitter
    >>
    author "Mike Grace"
    logging on
  }

  dispatch {
    domain "twitter.com"
  }

  global {
    datasource xkcd:HTML <- "http://xkcd.com/";

    css <<
      div.xkcd-loaded-via-kynetx img {
        max-width: 445px;
      }
    >>;
  }

  rule starting {
    select when pageview "twitter\.com"
    {
      emit <|
        $K(".stream-item").live("click",
        function() {
            var clicked = this;
            var attempts = 0;
            var found = false;
            if ($K(clicked).attr("processed") != "true") {
                $K(clicked).attr("processed", "true");
                var itemId = $K(clicked).attr("data-item-id");
                var interval = setInterval(function() {
                    if ((attempts > 6) || (found == true)) {
                        clearInterval(interval);
                    } else {
                        attempts = attempts + 1;
                        found = ($K("div.tweet.details-pane-tweet[data-tweet-id='" + itemId + "']").length != 0) ? true: false;
                        if (found) {
                            app = KOBJ.get_application("a60x531");
                            var $links = $K(clicked).find("div.tweet-text a.twitter-timeline-link");
                            $links.each(function(index, element) {
                                var url = $K(element).text();
                                if (url.match(/xkcd\.com/gi)) {
                                  $K("<img class='kynetx-working' src='http://kynetx-apps.s3.amazonaws.com/super-skitch/working.gif'/>").hide().css({
                                      "position": "absolute",
                                      "right": "10px",
                                      "top": "10px"
                                  }).appendTo("div.tweet.details-pane-tweet[data-tweet-id='" + itemId + "']").fadeIn("slow");
                                  app.raise_event("xkcd", {
                                      "url": url,
                                      "itemId": itemId
                                  });
                                };
                            });
                        };
                    };
                },
                500);
            };
        });

      |>;
    }
  }

  rule get_image_from_mini_link {
    select when web xkcd
    pre {
      url = event:param("url");
      itemId = event:param("itemId");
      target = "div.tweet.details-pane-tweet[data-tweet-id='#{itemId}']";
      pathBeta = url.replace(re/http:\/\/xkcd\.com(\/.*)/,"$1");
      path = pathBeta.replace(re/xkcd\.com(\/.*)/,"$1");
      page = datasource:xkcd(path);
      middleContent = page.query("#middleContent");
      title = middleContent.query("h1");
      images = middleContent.query("img");
      image = images[0];
      returnHtml =<<
        <div class="xkcd-loaded-via-kynetx">
          #{title}
          #{image}
        </div>
      >>;
    }
    {
      emit <|
        $K(target).find(".kynetx-working").fadeOut();
        $K('<div>'+returnHtml+'</div>').hide().appendTo(target).fadeIn();
      |>;
    }
  }
}
  • 12 deployed as a browser extension so only check select statements on twitter.com
  • 16 going to query the XKCD site as an HTML datasource and grab the image and title
  • 18-22 make sure comic fits within meta tray of Twitter
  • 34 only process clicked tweet if not already previously processed to prevent duplication
  • 35 mark tweet as processed
  • 36 data-item-id required to find correct meta tray to load comic in
  • 37 use setInterval to wait for the ┬ámeta tray to load since it is not immediate
  • 38-39 clear interval if we’ve waiter longer than 3 seconds or if the tray loaded
  • 42 look for correct meta tray to be loaded
  • 45 get link from tweet that was clicked on
  • 46 go through each tweet
  • 48 if the url found in the tweet is a link to an xkcd comic then lets raise an event to KNS with the link
  • 49-53 show user spinner to let them know the app is working
  • 54 raise event
  • 72 when an event is raised with xkcd link in tweet
  • 77 get path portion of url extracted
  • 78 extract path from url’s that didn’t have ‘http’ prepended
  • 79 get contents of xkcd comic page
  • 80 filter through html of xkcd page and grab html with id of middleContent
  • 81 grab title of comic
  • 82 grab all the images which happens to be just one but query returns an array
  • 83 get first image in array
  • 93 fadeout working spinning gif to let user know the app is done working
  • 94 append the comic into the meta tray of Twitter interface

Tweet with xkcd link clicked on after running app on Twitter.com as a Chrome extension

Get the extension to try it out yourself! (Chrome / Firefox)

Gratuitous day 31 Grace face

About these ads
This entry was posted in Kynetx. Bookmark the permalink.

4 Responses to Day 31 – Load Stuff Inline In Twitter Stream

  1. Pingback: How to: Integrate PeerIndex into Twitter Profile Pages

  2. Pingback: How to: Integrate PeerIndex into Twitter Profile Pages | Daringminds.com

  3. Pingback: How to: Integrate PeerIndex into Twitter Profile Pages / Brainyloft Press SOHO / Feed Your Brain

  4. Pingback: How to: Integrate PeerIndex into Twitter Profile Pages | BuyElectro.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s