Good looking footnotes in Instapaper from Wordpress

April 8, 2015 9:20 AM

Is there any documentation on how Instapaper's parser handles footnotes?

I'm enamored with the way that footnotes on Grantland appear in Instapaper--as small buttons I can click that open the footnote at the bottom of the screen--and would like to have that same functionality for my blog. (Both Grantland and my blog are wordpress.)

I've tried a couple of different wordpress plugins for footnotes, but they don't appear correctly in Instapaper when I save the page. Either they (a) appear in line, so I'd have to scroll to the bottom to see them and then scroll back up or (b) the footnote is a link back to my site and Instapaper doesn't load the text of the footnote.

Is there a specific DIV or SPAN class that Instapaper looks for when parsing notes? Is there something else to the formatting that needs to occur?

And lastly, is there a footnote plug-in for Wordpress that works with Instapaper right out of the box?

posted by thecaddy to Computers & Internet (2 answers total)

Can you look at the HTML markup on Grantland's footnotes and just attempt to match it, and see if Instapaper parses it correctly? From what you describe, it sounds like the URL to the footnote that doesn't work is a full URL rather than a link to just the anchor (href="#footnote1")?

I would ping the Instapaper folks on twitter (@Instapaper or @Instapaperhelp) - this seems like the kind of thing they would love to help you get working.
posted by misterbrandt at 11:58 AM on April 8, 2015

Per an exchange on Twitter (see replies to this tweet), @InstapaperHelp says:

This: http://karlwinegardner.blogspot.com/2011/02/how-to-create-footnotes-in-html.html … plus making sure we direct it to the appropriate parser (hence the URL question)[link]

posted by misterbrandt at 1:08 PM on April 9, 2015