Tag Archives: twitter

Simple Twitter Timeline Data

26 Sep 2015

We’re all familiar with how to embed a Twitter timeline – which is to simply copy the Widget code from Twitter and paste into your site. Twitter then drops in an iframe and you have a timeline.

The alternative is to use the twitter API to pull a timeline and then deal with OAUTH.

Or, you could just scrape a timeline out of the GET response that an iframed timeline’s HREF creates which is what I’ve done here. The key to this working at all is that Twitter’s iframe-embedding method creates a GET request that returns a JSONP payload. JSONP allows developers to circumvent cross domain restrictions which is why embedding a timeline works.

Knowing that I can successfully retrieve timeline data and that the data will be sent to a callback of my choosing (the “P” in “JSONP”) all I needed to do was to parse out the useful information – parse it out because the response we get back is not in JSON notation but a string of html. Parsing is a pain though so I decided to use jQuery to convert the string to a DOM object so that I can search for the nodes by traversing the DOM tree for the bits of information that I need.

Updated 4/11/2016 to reflect the latest Twitter changes

Here’s an example, use the timeline ID below or enter your own.

Note that we’re limited to the 20 most recent tweets. I convert everything to an array of tweet objects as illustrated below:

twttr_updated_jsonp

You can get the code here: https://github.com/r-luna/simple_twitter_timeline or simply view this page’s source.

All you need is the ID of the timeline, a callback of your own making, and jQuery to get this to work.

In this example you can see that the function to get your timeline data is namespaced to twtrUtil. To get your timeline call twtrUtil.getTimeline(CALLBACK_HERE,ID_HERE):

    function handleResponse(o){
        console.log(o);
        $('#response').html(JSON.stringify(o));
    }
        
    function getTimeline(){
        var id = $('input[name="id"]').val();
        twtrUtil.getTimeline(handleResponse,id);
    }

Your next thought would be “how do I get a twitter timeline id?”. Its easy to do, just create a widget in your Twitter account, find the public timeline that you want to use, then create the Widget. Once created the Widget ID appears in the URL of the widget create success page. The ID identifies the widget which of course is setup to show the timeline that you selected.

See this example URL which illustrates where to find the ID:

  • https://twitter.com/settings/widgets/646067303877115905/edit?focus_textarea=1&notice=WIDGET_CREATED

Refreshing a Twitter Timeline

18 Nov 2014

I spent some time searching for this and thought to share how to refresh an embedded Twitter Timeline.

To do so you need to dig into the documentation and use the twttr.widgets.createTimeline() widgets method.

Here it is – just copy and paste and edit where indicated. Each time you call this function your timeline will reload.

twttr.widgets.createTimeline(
   'YOUR WIDGET ID HERE',
   document.getElementById('content'),	// the container element to inject the timeline into
   {
      width:'100%', // config settings....
      height:'100%',
      chrome:'nofooter transparent noheader noscrollbar',
      showReplies: true,
      listSlug: 'the canonical url for the timeline being embedded goes here'
   }
);

To find your widget ID login to your twitter account and generate a new widget. The resulting code will have a data-widget-id value which of course is your widget ID. Here’s a link to the widget creation page:

The rest is configurable per your specific needs. Here’s the link to the full documentation:

Depending on your application you might elect to not use Twitter’s widget code at all and rely instead on programmatically creating timelines. That works fine but you should know that there is a reason why Twitter’s timeline widget generator gives you HTML along with some JavaScript. The point of that is that if for some reason you lose connectivity or Twitter is down or something else prevents the timeline from loading you won’t just have an empty box on your screen – the HTML will appear instead. This is Twitter’s way of having a fallback mechanism so that at the very least the name of the Twitter user and a link to the timeline will be present.

I’ve spent a brief moment looking at the available events in Twitter’s API and I don’t see any that handle errors. I suppose you could wrap the twitter code in a try/catch if you’re concerned about covering your bases.

Launching the Facebook & Twitter Websites From a Web App

25 Mar 2013

Creating a link within your mobile HTML5/web apps is exactly like creating a link that launches in a new window, you simply do the following:

...

...

Or via JavaScript:

...

...

The above does what one would expect in most cases – launching the URL in the device’s mobile browser. However, on iOS if we are trying to go to a Facebook or Twitter site such as in this example:

...

...

…and the Facebook App is installed on the iOS device the Facebook App itself will launch instead and present the Facebook login screen – which is not what we want to happen. In this case getting around this iOS quirk is easy – create a proxy page on a server of your choice that will redirect Mobile Safari to the desired location.

For example you might have a link like this one within your web app:

...

...

Given the above your proxy page would contain a single line of JavaScript:

...
document.location.href = 'http://www.facebook.com/pepsi'; // go to the branded pepsi facebook page
...

Pretty simple… but in my specific example I want to have a single proxy page handle multiple Facebook and Twitter cases. Given this information the link within my web app looks similar to this:

...

...

The convention that I’ve setup here is that I have a link to a specific brand (“b”) whose branded social network (“sn”) website that I want the user to go to. In my “redir.html” document I have some simple JavaScript to inspect the URL’s name/value pairs and thus branch to the desired brand’s specific social network website based on that information.

...

...